(function(){
/* global React, Link, Ph, Icon, Stars, Breadcrumbs */
const { useState } = React;

// ───── SERVICES HUB ─────
function ServicesHub() {
  const services = [
    { icon: 'wrench', title: 'Gutter Installation', to: '/services/gutter-installation', copy: 'Seamless aluminum and copper, custom-rolled on-site for your exact fascia line.' },
    { icon: 'ruler',  title: 'Gutter Repair', to: '/services/gutter-repair', copy: 'Leak sealing, miter rework, re-hanging, slope correction, and fascia repair.' },
    { icon: 'broom',  title: 'Gutter Cleaning', to: '/services/gutter-cleaning', copy: 'Hand-scooped debris, downspout flush, and a flow test before we leave.' },
    { icon: 'grid',   title: 'Gutter Guards', to: '/services/gutter-guards', copy: 'Micro-mesh and reverse-curve systems matched to your trees and roof pitch.' },
    { icon: 'drop',   title: 'Downspout Installation', to: '/services/downspout-installation', copy: 'Extensions, splash blocks, and buried drains that move water away from the foundation.' },
    { icon: 'building', title: 'Commercial Gutters', to: '/services/commercial-gutters', copy: 'Box gutters, scupper boxes, and heavy-gauge systems for LA commercial properties.' },
  ];
  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Services' }]}/></div>
      <section style={{ padding: '24px 0 56px' }}>
        <div className="wrap">
          <span className="eyebrow">Services</span>
          <h1 style={{ marginTop: 14, maxWidth: 760 }}>
            Full-service gutter work, <span className="ital">from install to cleanout.</span>
          </h1>
          <p className="muted" style={{ fontSize: 18, maxWidth: 640, marginTop: 20 }}>
            Every job starts with a free estimate and honest trade-offs — not a pitch. Whatever's keeping water from leaving your roof, we handle it.
          </p>
        </div>
      </section>
      <section style={{ paddingBottom: 96 }}>
        <div className="wrap grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {services.map((s) => (
            <Link key={s.to} to={s.to} className="card" style={{ display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 20, alignItems: 'center', textDecoration: 'none' }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--color-accent-soft)', color: 'var(--color-primary)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name={s.icon} size={24}/>
              </div>
              <div>
                <h3 style={{ marginBottom: 6 }}>{s.title}</h3>
                <p className="muted" style={{ fontSize: 14 }}>{s.copy}</p>
              </div>
              <Icon name="arrow" size={18} />
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
}

// ───── GUTTER INSTALLATION sub-page ─────
function GutterInstallation() {
  const faqs = [
    ['How is "seamless" actually different from sectional?', 'We bring a rolling machine to your house and fabricate each run in one continuous piece — only joined at corners. Fewer seams means fewer leak points, full stop. Most LA homes only need 1–3 seams on an entire perimeter.'],
    ['How long does install take?', 'Most single-family homes finish in a day. Multi-story or complex roofs may take two. You don\'t need to be home — we just need access to the perimeter and an outdoor outlet for the brake.'],
    ['Do you paint or just clip on?', "Our aluminum comes pre-finished with a baked enamel that lasts decades. We don't paint on-site — painted aluminum always chalks. For copper, we leave it raw to patina, or pre-patinate on request."],
    ['What gauge do you install?', '.032″ aluminum as standard — one step up from the .027″ big-box-store default. On exposed or coastal homes, we\'ll recommend .040″. Copper is 16oz.'],
  ];
  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Services', to:'/services' }, { label:'Gutter Installation' }]}/></div>
      <section style={{ padding: '24px 0 56px' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <span className="tag">Most requested service</span>
            <h1 style={{ marginTop: 16 }}>Seamless gutter <br/><span className="ital">installation,</span> done in a day.</h1>
            <p style={{ fontSize: 17, marginTop: 22, color: 'var(--color-text-muted)', maxWidth: 540 }}>
              One continuous run, fabricated on-site, hanger-spaced to code, and pitched 1/4″ per 10 ft. We've installed on every roof profile LA has — Spanish tile, composition shingle, standing-seam metal, flat torchdown.
            </p>
            <div style={{ display:'flex', gap: 12, flexWrap:'wrap', marginTop: 28 }}>
              <Link to="/gutter-guide" className="btn btn-primary btn-lg">Start a free quote <Icon name="arrow" size={14}/></Link>
              <a href="tel:+13234521809" className="btn btn-secondary btn-lg"><Icon name="phone" size={14}/> (323) 452-1809</a>
            </div>
          </div>
          <Ph src="assets/loading-gutter-van.jpg" alt="Coastline installers loading a seamless aluminum gutter into a truck on a LA street." ratio="4/5" pos="center"/>
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap">
          <span className="eyebrow">What's included</span>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 28, marginTop: 24 }}>
            {[
              ['On-site fabrication', 'Truck-mounted brake rolls each run in one continuous piece — no seams along a wall.'],
              ['Hidden hangers', 'Screwed into the rafter tail every 24″ — not the old nail-and-spike method.'],
              ['Pre-bent miters', 'Inside and outside corners bent from a single sheet; soldered on copper.'],
              ['Downspouts & straps', 'Sized to your roof area — usually 3×4 for LA rainfall — strapped plumb.'],
            ].map(([t, s]) => (
              <div key={t}>
                <div style={{ display:'inline-flex', alignItems:'center', justifyContent:'center', width: 32, height: 32, borderRadius: 10, background: 'var(--color-accent-soft)', color: 'var(--color-primary)', marginBottom: 12 }}>
                  <Icon name="check" size={16}/>
                </div>
                <h4 style={{ marginBottom: 6, color: 'var(--color-primary)' }}>{t}</h4>
                <p className="muted" style={{ fontSize: 13 }}>{s}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:860px){.section-sm .grid{grid-template-columns:1fr 1fr !important}}`}</style>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 56, alignItems: 'start' }}>
            <div>
              <span className="eyebrow">Our process</span>
              <h2 style={{ marginTop: 12 }}>Five steps, <span className="ital">no surprises.</span></h2>
            </div>
            <div>
              {[
                ['Walk & measure', 'We measure fascia length, rise, pitch, and existing downspout locations. You get a written quote same day, usually in under an hour.'],
                ['Confirm specs', 'Material (.032 aluminum / 16oz copper), size (5/6/7″), color, guard type, downspout size. Ballpark timeline locked.'],
                ['Fabrication day', 'Truck brake on site. We roll each run to exact length, pre-bend miters, and set hanger spacing.'],
                ['Install & flow test', 'Hanger-screwed into rafter tails, sealed at seams, pitched 1/4″/10 ft. We run a hose test across every run before we pack up.'],
                ['Walkthrough', 'We walk the perimeter with you, show you the miters and outlets, and register your warranty on the spot.'],
              ].map(([t, s], i) => (
                <div key={t} style={{ display: 'grid', gridTemplateColumns: '48px 1fr', gap: 20, borderBottom: '1px solid var(--color-border)', padding: '22px 0' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--color-primary)', lineHeight: 1 }}>0{i+1}</div>
                  <div>
                    <h3 style={{ marginBottom: 6 }}>{t}</h3>
                    <p className="muted" style={{ fontSize: 14 }}>{s}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`@media(max-width:860px){section.section>.wrap>div{grid-template-columns:1fr !important}}`}</style>
      </section>

      <section className="section" style={{ background: 'var(--color-accent-soft)' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
            <Ph src="assets/installer-tape.jpg" alt="Installer sealing a seamless gutter section on a lawn before hanging." ratio="1/1" pos="center"/>
            <div>
              <span className="eyebrow">Factors that affect cost</span>
              <h2 style={{ marginTop: 12 }}>What actually drives the price.</h2>
              <ul style={{ listStyle: 'none', padding: 0, marginTop: 18, display: 'grid', gap: 14 }}>
                {[
                  ['Linear footage', 'How much perimeter we need to cover.'],
                  ['Material', 'Aluminum is the LA default. Copper is 3–5×.'],
                  ['Size', '5″ is fine for most; 6–7″ for larger roofs or heavy rain.'],
                  ['Stories & access', 'Two-story roofs or steep hillside lots add labor.'],
                  ['Tear-off', 'Removing old gutters and fascia repair.'],
                  ['Add-ons', 'Guards, heat cable, splash blocks, buried drains.'],
                ].map(([t,s]) => (
                  <li key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <div style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--color-primary)', marginTop: 10, flex: 'none' }}/>
                    <div>
                      <strong style={{ color: 'var(--color-primary)' }}>{t}.</strong> <span className="muted">{s}</span>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap-n">
          <h2 style={{ textAlign: 'center', marginBottom: 28 }}>Installation FAQ</h2>
          <FAQList items={faqs}/>
        </div>
      </section>

      <RelatedLinks
        title="Related services & products"
        links={[
          ['Gutter Repair', '/services/gutter-repair', 'service'],
          ['Gutter Guards', '/services/gutter-guards', 'service'],
          ['Seamless Aluminum', '/products/seamless-aluminum-gutters', 'product'],
        ]}
      />
    </div>
  );
}

// ───── PRODUCTS HUB ─────
function ProductsHub() {
  const gutters = [
    { title: 'Seamless Aluminum Gutters', to: '/products/seamless-aluminum-gutters',
      copy: '.032″ roll-formed aluminum in 25+ baked-on finishes. The LA default.',
      src: 'assets/installer-tape.jpg', alt: 'Coastline installer measuring a seamless aluminum gutter section.' },
    { title: 'Copper Gutters', to: '/products/copper-gutters',
      copy: '16oz cold-rolled copper with hand-soldered miters. Heritage-grade.',
      src: 'assets/HT-Natural-Copper.jpg', alt: 'Natural copper half-round gutter on a heritage home.' },
    { title: 'Galvanized Steel Gutters', to: '/products/galvanized-steel-gutters',
      copy: '26-gauge G90 steel. Industrial durability for exposed or commercial runs.',
      src: 'assets/Galvanized-scaled.png', alt: 'Galvanized steel gutter run on a commercial building.' },
    { title: 'K-Style Gutters', to: '/products/k-style-gutters',
      copy: 'The residential standard — ogee profile, maximum capacity for the size. Available in any material.',
      label: 'K-style profile', brief: 'Ogee front · maximum capacity per size' },
    { title: 'Half-Round Gutters', to: '/products/half-round-gutters',
      copy: 'Period-accurate profile for Craftsman, Spanish, and Tudor homes. Available in any material.',
      label: 'Half-round profile', brief: 'Curved trough · period-correct' },
    { title: 'Box Gutters', to: '/products/box-gutters',
      copy: 'Custom-sized box profiles for commercial buildings and large-volume residential.',
      label: 'Box gutter', brief: 'Custom-sized · commercial / large-volume' },
  ];
  const downspouts = [
    { title: 'Corrugated Round Downspouts', to: '/products/corrugated-round-downspouts',
      copy: 'Classic round profile, ribbed for strength. The traditional choice.',
      label: 'Corrugated round', brief: 'Round profile · ribbed for rigidity' },
    { title: 'Box / Square Downspouts', to: '/products/box-square-downspouts',
      copy: 'Clean rectangular profile. Pairs well with modern and contemporary architecture.',
      label: 'Box / square', brief: 'Rectangular profile · modern lines' },
  ];
  const accessories = [
    { title: 'Rain Chains', to: '/products/rain-chains',
      copy: 'Copper or aluminum chains as a decorative downspout alternative. Beautiful in rain.',
      src: 'assets/rainchain.jpg', alt: 'Copper rain chain channeling water from a gutter.' },
    { title: 'Leader Heads', to: '/products/leader-heads',
      copy: 'Decorative collection boxes that catch water from the gutter and channel it into the downspout. Often custom-cast.',
      label: 'Leader head', brief: 'Decorative collection box · often custom-cast' },
    { title: 'Gutter Guards', to: '/products/gutter-guards',
      copy: 'Micro-mesh and reverse-curve systems. Sized per roof pitch and debris.',
      label: 'Gutter guards', brief: 'Micro-mesh · reverse-curve systems' },
  ];

  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Products' }]}/></div>
      <section style={{ padding: '24px 0 48px' }}>
        <div className="wrap">
          <span className="eyebrow">Products</span>
          <h1 style={{ marginTop: 14, maxWidth: 760 }}>
            Every profile, material, and finish we install.
          </h1>
          <p className="muted" style={{ fontSize: 18, maxWidth: 640, marginTop: 20 }}>
            We'll walk you through the real trade-offs — what performs, what's worth the premium for your house, and what you're paying for that you won't actually use.
          </p>
        </div>
      </section>

      <ProductSection title="Gutters" intro="Available in 5″ and 6″, in aluminum (25+ colors), copper, or galvanized steel." items={gutters} columns={3}/>
      <ProductSection title="Downspouts" intro="Available in 2×3 or 3×4, in aluminum, copper, or galvanized steel." items={downspouts} columns={2}/>
      <ProductSection title="Accessories & Add-Ons" intro="Functional and decorative additions to any gutter system." items={accessories} columns={3} last/>
    </div>
  );
}

function ProductSection({ title, intro, items, columns, last }) {
  return (
    <section style={{ paddingBottom: last ? 96 : 56 }}>
      <div className="wrap">
        <div style={{ marginBottom: 28, paddingBottom: 18, borderBottom: '1px solid var(--color-border)' }}>
          <h2 style={{ fontSize: 26, marginBottom: 8 }}>{title}</h2>
          <p className="muted" style={{ fontSize: 15, maxWidth: 640 }}>{intro}</p>
        </div>
        <div className="products-section-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 24 }}>
          {items.map((p) => (
            <Link key={p.to} to={p.to} className="card" style={{ padding: 0, overflow:'hidden', textDecoration: 'none' }}>
              {p.src
                ? <Ph src={p.src} alt={p.alt || p.title} ratio="4/3" pos="center"/>
                : <Ph label={p.label} brief={p.brief} ratio="4/3"/>}
              <div style={{ padding: 20 }}>
                <h3 style={{ marginBottom: 6, fontSize: 16 }}>{p.title}</h3>
                <p className="muted" style={{ fontSize: 13, lineHeight: 1.5 }}>{p.copy}</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:860px){.products-section-grid{grid-template-columns:1fr !important}}`}</style>
    </section>
  );
}

// ───── SEAMLESS ALUMINUM sub-page ─────
function SeamlessAluminum() {
  const colors = [
    ['White', '#F2F1EC'], ['Almond', '#E3D8C3'], ['Musket Brown', '#4A3B2E'],
    ['Black', '#1C1C1C'], ['Royal Brown', '#3E2B21'], ['Clay', '#BDA37A'],
    ['Terratone', '#8A6F52'], ['Sandstone', '#C7B490'], ['Forest Green', '#2D3F38'],
    ['Colonial Red', '#7E2F2A'], ['Charcoal', '#3B3B3B'], ['Linen', '#E8E0CE'],
  ];
  return (
    <div>
      <div className="wrap"><Breadcrumbs items={[{ label:'Home', to:'/' }, { label:'Products', to:'/products' }, { label:'Seamless Aluminum' }]}/></div>
      <section style={{ padding: '24px 0 56px' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <span className="tag">Most popular material</span>
            <h1 style={{ marginTop: 16 }}>Seamless aluminum gutters.</h1>
            <p style={{ fontSize: 17, marginTop: 20, color: 'var(--color-text-muted)', maxWidth: 480 }}>
              The workhorse of LA residential gutters. Custom-rolled on-site in .032″ aluminum with a baked enamel finish that outlasts anything you paint. Light enough to hang fast, strong enough to outlast the shingles.
            </p>
            <div style={{ display:'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
              <Link to="/gutter-guide" className="btn btn-primary btn-lg">Get a quote <Icon name="arrow" size={14}/></Link>
              <a href="tel:+13234521809" className="btn btn-secondary btn-lg"><Icon name="phone" size={14}/> Call us</a>
            </div>
          </div>
          <Ph src="assets/worker-portrait.jpg" alt="Coastline installer holding a long seamless aluminum gutter outside a Los Angeles home." ratio="4/3" pos="center"/>
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--color-surface)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)' }}>
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {[
              ['Gauge', '.032″ standard · .040″ available'],
              ['Sizes', '5″, 6″, and 7″ K-style + half-round'],
              ['Finish', 'Baked enamel · 25+ stocked colors'],
              ['Warranty', 'Lifetime material · 5-yr workmanship'],
            ].map(([t,v]) => (
              <div key={t}>
                <div style={{ fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--color-text-muted)', fontWeight: 600 }}>{t}</div>
                <div style={{ color: 'var(--color-primary)', fontWeight: 600, marginTop: 6 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:860px){.section-sm>.wrap>div{grid-template-columns:1fr 1fr !important; gap:20px}}`}</style>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div>
            <span className="eyebrow">Why aluminum</span>
            <h2 style={{ marginTop: 12 }}>The right answer <span className="ital">for 90% of LA homes.</span></h2>
            <ul style={{ marginTop: 20, display: 'grid', gap: 14, listStyle: 'none', padding: 0 }}>
              {[
                'Won\'t rust. Handles coastal humidity without issue.',
                'Light enough to hang fast; strong enough at .032″ for every LA rain event.',
                'Baked-on finish holds color for 20+ years — far better than painted steel.',
                'Fabricated on-site in one continuous run — only seams are at corners.',
              ].map((t) => (
                <li key={t} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                  <Icon name="check" size={18}/> <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <span className="eyebrow">When it's not the answer</span>
            <h2 style={{ marginTop: 12 }}>We'll tell you. <span className="ital">Honestly.</span></h2>
            <ul style={{ marginTop: 20, display: 'grid', gap: 14, listStyle: 'none', padding: 0 }}>
              {[
                'Period-authentic Craftsman or Tudor homes — copper or galvanized often reads better.',
                'Exposed hillside or commercial applications with high impact risk — galvanized steel is tougher.',
                'HOAs or historic districts that require a specific material — we\'ll match the spec.',
              ].map((t) => (
                <li key={t} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                  <Icon name="minus" size={18}/> <span className="muted">{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <style>{`@media(max-width:860px){section.section>.wrap{grid-template-columns:1fr !important}}`}</style>
      </section>

      <section className="section" style={{ background: 'var(--color-accent-soft)' }}>
        <div className="wrap">
          <span className="eyebrow">Finishes</span>
          <h2 style={{ marginTop: 12 }}>25+ baked colors <span className="ital">in stock.</span></h2>
          <p className="muted" style={{ marginTop: 12, maxWidth: 540 }}>We bring a physical color fan to the estimate. Custom color matches are available for HOA or heritage projects.</p>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(6, 1fr)', gap: 16, marginTop: 28 }}>
            {colors.map(([name, hex]) => (
              <div key={name}>
                <div style={{ aspectRatio: '1', borderRadius: 10, background: hex, border: '1px solid rgba(0,0,0,0.08)' }}/>
                <div style={{ fontSize: 12, color: 'var(--color-primary)', fontWeight: 500, marginTop: 8 }}>{name}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:860px){.section .grid{grid-template-columns:repeat(3,1fr) !important}}`}</style>
      </section>

      <section className="section">
        <div className="wrap-n">
          <h2 style={{ textAlign: 'center', marginBottom: 28 }}>Aluminum gutter FAQ</h2>
          <FAQList items={[
            ['How long does aluminum actually last in LA?', '25–35 years is typical for .032″ with a baked finish. Our warranty is lifetime on the material for as long as you own the home — because we\'ve rarely seen it fail.'],
            ['Can I paint it later if I change my mind?', 'You can, but the factory-baked finish is far more durable than anything on-site. If you want a different color, we recommend a new color run.'],
            ['Will it dent?', 'Aluminum is softer than steel — a ladder leaned incorrectly can dent it. We use stand-off ladder bumpers and train for ladder placement.'],
          ]}/>
        </div>
      </section>

      <RelatedLinks
        title="Related"
        links={[
          ['Copper', '/products/copper-gutters', 'product'],
          ['K-Style', '/products/k-style-gutters', 'product'],
          ['Gutter Installation', '/services/gutter-installation', 'service'],
        ]}
      />
    </div>
  );
}

// ───── Helpers ─────
function FAQList({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {items.map(([q, a], i) => (
        <div key={q} className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <button onClick={() => setOpen(open === i ? -1 : i)}
            style={{ width: '100%', textAlign: 'left', padding: '20px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, color: 'var(--color-primary)', fontWeight: 600, fontSize: 15 }}>
            {q}
            <Icon name={open === i ? 'minus' : 'plus'} size={16}/>
          </button>
          {open === i && (
            <div style={{ padding: '0 22px 22px', color: 'var(--color-text-muted)', fontSize: 14.5, lineHeight: 1.6, borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>
              {a}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function RelatedLinks({ title, links }) {
  return (
    <section className="section-sm" style={{ borderTop: '1px solid var(--color-border)', background: 'var(--color-bg)' }}>
      <div className="wrap">
        <span className="eyebrow">{title}</span>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 22 }}>
          {links.map(([label, to, kind]) => (
            <Link key={to} to={to} className="card" style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <div>
                <div className="tag-muted tag" style={{ fontSize: 10, marginBottom: 8 }}>{kind}</div>
                <h3 style={{ fontSize: 16 }}>{label}</h3>
              </div>
              <Icon name="arrow" size={18}/>
            </Link>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:860px){.section-sm .grid{grid-template-columns:1fr !important}}`}</style>
    </section>
  );
}

Object.assign(window, { ServicesHub, GutterInstallation, ProductsHub, SeamlessAluminum, FAQList, RelatedLinks });

})();