// Remaining sections — Services, Why, Process, Service Area, Testimonials, FAQ, CTA, Footer

// ---------- Services Grid ----------
const Services = ({ accent }) => {
  const services = [
    { icon: 'wrench', title: 'Garage Door Repair', body: 'Broken springs, cables, rollers, and openers. Fast diagnostics, honest quotes.', tag: 'Fast diagnostics' },
    { icon: 'home', title: 'New Installations', body: 'Residential garage doors built to last, professionally installed.', tag: 'Free estimate' },
    { icon: 'plug', title: 'Opener Service', body: 'Install, repair, and replace openers from all major brands.', tag: 'All brands' },
    { icon: 'building', title: 'Commercial Doors', body: 'Rolling steel, sectional, and high-cycle doors for businesses.', tag: 'Service contracts' },
    { icon: 'settings', title: 'Maintenance & Tune-Ups', body: 'Preventative service that extends the life of your door.', tag: 'Annual plans' },
  ];

  return (
    <section id="services" style={{ padding: '120px 0' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <div className="eyebrow">— What We Do</div>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14 }}>
            Complete Overhead Door Service
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.62)', fontSize: 17, marginTop: 14, maxWidth: 580 }}>
            From a broken spring at 9am to a brand-new commercial install, we cover every part of your door — and stand behind every job.
          </p>
        </div>

        <div className="services-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 48,
        }}>
          {services.map((s, i) => (
            <a href="#services" key={s.title} className="card reveal" data-delay={`${i * 0.05}`}
               style={{ display: 'block', textDecoration: 'none', color: 'inherit', padding: 28 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: 'rgba(0,72,144,0.14)',
                color: accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 22,
              }}>
                <Icon name={s.icon} size={22} stroke={1.75} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.01em' }}>{s.title}</h3>
              </div>
              <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14.5, lineHeight: 1.55 }}>{s.body}</p>
              <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', fontSize: 13 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)' }}>
                  {s.tag}
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        .card:hover .learn-more { color: ${accent} !important; }
        @media (max-width: 900px) {
          .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 600px) {
          .services-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

// ---------- Why Apex ----------
const WhyApex = ({ accent }) => {
  const features = [
    { icon: 'home', title: 'Locally Owned', body: 'Not a franchise. Real people answering the phone.' },
    { icon: 'bolt', title: 'Responsive Service', body: 'Repairs handled promptly when you need them most.' },
    { icon: 'dollar', title: 'Honest Pricing', body: 'Free written estimates. No surprises.' },
    { icon: 'award', title: 'Quality Workmanship', body: 'We stand behind every job we put our name on.' },
  ];

  return (
    <section id="about" style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div className="why-top" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginBottom: 56 }}>
          <div className="reveal">
            <div className="eyebrow">— Why Apex</div>
            <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14 }}>
              A Local Company That<br/>Stands Behind Its Work.
            </h2>
          </div>
          <p className="reveal" data-delay="0.1" style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16.5, lineHeight: 1.65, maxWidth: 520 }}>
            We're a locally owned overhead door company built on honest service and quality workmanship.
            We value the relationships we build with our customers, and we approach every project with the same care and attention to detail as if it were our own property.
          </p>
        </div>

        <div className="why-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 14,
          background: 'rgba(255,255,255,0.02)',
          overflow: 'hidden',
        }}>
          {features.map((f, i) => (
            <div key={f.title} className="reveal" data-delay={`${i * 0.06}`} style={{
              padding: '32px 28px',
              borderRight: i < features.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
            }}>
              <Icon name={f.icon} size={26} color={accent} stroke={1.6} />
              <h3 style={{ fontSize: 17, fontWeight: 700, marginTop: 22 }}>{f.title}</h3>
              <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14.5, marginTop: 8, lineHeight: 1.55 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .why-top { grid-template-columns: 1fr !important; align-items: start !important; }
          .why-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .why-grid > div:nth-child(2) { border-right: none !important; }
          .why-grid > div:nth-child(1), .why-grid > div:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
        }
        @media (max-width: 540px) {
          .why-grid { grid-template-columns: 1fr !important; }
          .why-grid > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
          .why-grid > div:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
};

// ---------- Process ----------
const Process = ({ accent }) => {
  const steps = [
    { n: '01', title: 'Call or Request a Quote', body: "Tell us what's going on. We'll give you a real timeline." },
    { n: '02', title: 'Get a Fair, Written Estimate', body: 'No high-pressure sales. Just an honest quote you can review.' },
    { n: '03', title: 'We Get It Done Right', body: 'Quality parts, clean install, work that lasts.' },
  ];
  return (
    <section style={{ color: '#fff', padding: '110px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="noise"></div>
      <div className="container" style={{ position: 'relative' }}>
        <div className="reveal">
          <div className="eyebrow" style={{ color: '#4a86d6' }}>— The Process</div>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', color: '#fff', marginTop: 14, maxWidth: 720 }}>
            Simple, Straightforward Service.
          </h2>
        </div>

        <div className="process-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, marginTop: 64, position: 'relative',
        }}>
          {/* connecting line */}
          <div className="process-line" style={{
            position: 'absolute', top: 38, left: '12%', right: '12%', height: 1,
            background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)',
          }}></div>
          {steps.map((s, i) => (
            <div key={s.n} className="reveal" data-delay={`${i * 0.1}`} style={{ position: 'relative' }}>
              <div style={{
                width: 76, height: 76, borderRadius: 999,
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.18)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26,
                color: accent,
                position: 'relative', zIndex: 1,
                backdropFilter: 'blur(8px)',
              }}>
                {s.n}
              </div>
              <h3 style={{ color: '#fff', fontSize: 21, fontWeight: 700, marginTop: 26, letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ color: 'var(--on-dark-2)', fontSize: 15, marginTop: 10, lineHeight: 1.6, maxWidth: 320 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .process-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .process-line { display: none; }
        }
      `}</style>
    </section>
  );
};

// ---------- Service Area ----------
const ServiceArea = ({ accent }) => {
  /* {{TODO}} replace city list with real coverage */
  const cities = ['Great Falls', 'Cascade', 'Belt', 'Vaughn', 'Sun Prairie', 'Fort Benton', 'Choteau', 'Black Eagle', 'Ulm', 'Stockett'];

  return (
    <section id="service-area" style={{ padding: '120px 0' }}>
      <div className="container">
        <div className="sa-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
          <div className="reveal">
            <div className="eyebrow">— Service Area</div>
            <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14 }}>
              Proudly Serving<br/>
              <span style={{ color: accent }}>Northern Montana</span>.
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.62)', fontSize: 16.5, marginTop: 18, lineHeight: 1.65, maxWidth: 500 }}>
              We cover homes and businesses across the region with responsive service in most service zones.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: '30px 0 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 24px', maxWidth: 460 }}>
              {cities.map(c => (
                <li key={c} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, color: 'rgba(255,255,255,0.78)' }}>
                  <Icon name="mapPin" size={14} color={accent} /> {c}
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 32, padding: 18, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="phone" size={16} color="#fff" />
              </div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.78)', lineHeight: 1.45 }}>
                Don't see your town? Give us a call — <a href={PHONE_TEL} style={{ color: accent, fontWeight: 600 }}>{PHONE_DISPLAY}</a> — we may still be able to help.
              </div>
            </div>
          </div>

          {/* Map placeholder */}
          <div className="reveal" data-delay="0.1">
            <div style={{
              position: 'relative', aspectRatio: '5/3',
              background: '#fff',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 14, overflow: 'hidden',
            }}>
              <MapSVG accent={accent} />
              <div style={{
                position: 'absolute', top: 12, left: 12, padding: '6px 10px',
                background: 'rgba(0,0,0,0.65)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6,
                fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)',
              }}>
                Coverage Map · Northern Montana
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .sa-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
};

// Coverage map: clean Northern Montana reference image, no overlay markers.
const MapSVG = ({ accent }) => (
  <svg viewBox="0 0 1265 772" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
    <defs>
      <filter id="mapTone">
        {/* slightly desaturate + brighten the source map so it sits on dark UI */}
        <feColorMatrix type="matrix" values="
          0.92 0 0 0 0.04
          0 0.92 0 0 0.04
          0 0 0.95 0 0.04
          0 0 0 1 0"/>
      </filter>
    </defs>
    <image href={(typeof window !== 'undefined' && window.__resources && window.__resources.montanaMap) || "assets/montana-map.png"} x="0" y="0" width="1265" height="772" filter="url(#mapTone)"/>
    <rect x="0" y="0" width="1265" height="772" fill="rgba(5,5,7,0.15)"/>
  </svg>
);

// ---------- Testimonials ----------
const Testimonials = ({ accent }) => {
  /* {{TODO}} replace with real customer quotes */
  const items = [
    { quote: "Showed up fast for a broken spring. Quote was the price I paid. Door has been perfect for six months.", name: 'Sarah M.', loc: 'Great Falls, MT' },
    { quote: "Replaced both opener and the door at our shop. Crew was clean, on time, and the new door is whisper-quiet compared to the old one.", name: 'Dan K.', loc: 'Belt, MT' },
    { quote: "Got three quotes — Apex was the most honest about what actually needed fixing. No upsell. I'd call them again.", name: 'Jenna R.', loc: 'Cascade, MT' },
  ];
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <div className="eyebrow">— What Customers Say</div>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14 }}>
            Trusted by Homeowners and Businesses.
            <span className="todo-flag">TODO real reviews</span>
          </h2>
        </div>

        <div className="t-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 48 }}>
          {items.map((t, i) => (
            <figure key={i} className="card reveal" data-delay={`${i * 0.06}`}
                    style={{ margin: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 260 }}>
              <div>
                <div style={{ display: 'flex', gap: 2, color: accent, marginBottom: 18 }}>
                  {[0,1,2,3,4].map(k => <Icon key={k} name="star" size={15} />)}
                </div>
                <blockquote style={{
                  margin: 0, fontFamily: 'var(--font-display)', fontWeight: 500,
                  fontSize: 17, lineHeight: 1.5, color: '#fff', letterSpacing: '-0.005em',
                }}>
                  "{t.quote}"
                </blockquote>
              </div>
              <figcaption style={{ marginTop: 24, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: 13.5 }}>
                <div style={{ fontWeight: 600, color: '#fff' }}>{t.name}</div>
                <div style={{ color: 'rgba(255,255,255,0.55)' }}>{t.loc}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .t-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

// ---------- FAQ ----------
const FAQ = ({ accent }) => {
  const items = [
    { q: 'How much does a broken spring repair cost?', a: 'Most spring repairs fall within a predictable range based on door size and spring type. We give you a written estimate before any work begins — no surprise charges.' },
    { q: 'Are you licensed and insured?', a: 'Fully licensed and insured. We can provide proof on request before any work begins.' /* {{TODO}} license #s */ },
    { q: 'What brands of openers do you service?', a: 'We service all major brands including LiftMaster, Chamberlain, Genie, and more. If your opener has a wall-mounted button, chances are we can fix it.' },
    { q: 'Do you handle commercial overhead doors?', a: 'Yes — rolling steel, sectional, and high-cycle commercial doors. We also offer ongoing service contracts for businesses.' },
    { q: 'Do you offer free estimates?', a: 'Always. Estimates are free, written, and there is no obligation to move forward.' },
    { q: 'What warranty do you offer?', a: 'We warranty our workmanship and pass through manufacturer warranties on parts. Specifics depend on the work — we will spell it out before we start. Our workmanship is fully warrantied and all manufacturer part warranties are passed directly on to you.' /* {{TODO}} */ },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ padding: '120px 0' }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow" style={{ justifyContent: 'center' }}>— Common Questions</div>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14 }}>
            Answers, Not Sales Pitches.
          </h2>
        </div>

        <div className="reveal" style={{ border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, overflow: 'hidden', background: 'rgba(255,255,255,0.02)' }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: i < items.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                        style={{
                          width: '100%', textAlign: 'left',
                          background: 'transparent', border: 'none',
                          padding: '22px 26px',
                          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16.5, color: '#fff',
                          letterSpacing: '-0.005em',
                        }}>
                  <span>{it.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 999,
                    border: '1px solid rgba(255,255,255,0.14)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: isOpen ? accent : 'rgba(255,255,255,0.85)',
                    background: isOpen ? 'rgba(0,72,144,0.18)' : 'rgba(255,255,255,0.04)',
                    transition: 'all .2s ease',
                    flexShrink: 0,
                  }}>
                    <span style={{ display: 'inline-flex', transition: 'transform .25s ease', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)' }}>
                      <Icon name="plus" size={14} stroke={2.25} />
                    </span>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 240 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .35s ease',
                }}>
                  <div style={{ padding: '0 26px 24px', color: 'rgba(255,255,255,0.62)', fontSize: 15.5, lineHeight: 1.65, maxWidth: 700 }}>
                    {it.a}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ---------- Final CTA ----------
const FinalCTA = ({ accent }) => (
  <section id="quote" style={{
    position: 'relative',
    color: '#fff',
    padding: '90px 0',
    overflow: 'hidden',
  }}>
    <div className="noise"></div>
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `radial-gradient(circle at 85% 50%, rgba(0,72,144,0.22), transparent 45%)`,
    }}></div>
    <div className="container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center' }} >
      <div className="reveal">
        <div className="eyebrow" style={{ color: '#4a86d6' }}>— Get Started</div>
        <h2 style={{ color: '#fff', fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14, maxWidth: 640 }}>
          Need a Garage Door Fixed or Installed?
        </h2>
        <p style={{ color: 'var(--on-dark-2)', fontSize: 17, marginTop: 14, maxWidth: 540 }}>
          Tell us about the issue you're experiencing. We'll get back to you within one business day — usually sooner.
        </p>
      </div>
      <div className="reveal" data-delay="0.1" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
        <a href={PHONE_TEL} className="btn btn-primary" style={{ background: accent, padding: '15px 24px', fontSize: 16 }}>
          <Icon name="phone" size={16} /> Call {PHONE_DISPLAY}
        </a>
        <a href="contact.html" className="btn btn-outline-light" style={{ padding: '15px 22px' }}>
          Get a Free Quote <Icon name="arrowRight" size={15} className="arrow" />
        </a>
      </div>
    </div>
  </section>
);

// ---------- Footer ----------
const Footer = ({ accent }) => (
  <footer style={{ background: '#0E0E10', color: 'var(--on-dark-2)', paddingTop: 0 }}>
    <div style={{ height: 3, background: accent }}></div>
    <div className="container" style={{ paddingTop: 64, paddingBottom: 28 }}>
      <div className="footer-grid" style={{
        display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1.1fr', gap: 40,
      }}>
        {/* Brand */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 38, height: 38, borderRadius: 8, background: '#fff', color: 'var(--steel)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, position: 'relative',
            }}>
              A
              <span style={{ position: 'absolute', right: 4, bottom: 4, width: 8, height: 2, background: accent }}></span>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: '#fff', fontSize: 18 }}>APEX</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Overhead Doors</div>
            </div>
          </div>
          <p style={{ marginTop: 22, fontSize: 14, lineHeight: 1.65, maxWidth: 360 }}>
            Locally owned overhead door company. Honest service, quality workmanship, and dependable results — for homes and businesses across Northern Montana.
          </p>
          <div style={{ marginTop: 22, display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: 'rgba(255,255,255,0.55)' }}>
            <Icon name="badgeCheck" size={14} color={accent} />
            Licensed &amp; Insured <span className="todo-flag">TODO license #</span>
          </div>
        </div>

        {/* Services */}
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Services</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'grid', gap: 10, fontSize: 14 }}>
            {['Residential', 'Commercial', 'Repair', 'Opener Service', 'Maintenance'].map(l => (
              <li key={l}><a href="#services" style={{ color: 'rgba(255,255,255,0.78)' }}>{l}</a></li>
            ))}
          </ul>
        </div>

        {/* Areas */}
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Service Areas</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'grid', gap: 10, fontSize: 14 }}>
            {['Great Falls', 'Cascade', 'Belt', 'Vaughn', 'Fort Benton', 'Choteau'].map(l => (
              <li key={l}><a href="#service-area" style={{ color: 'rgba(255,255,255,0.78)' }}>{l}</a></li>
            ))}
          </ul>
        </div>

        {/* Contact */}
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Contact</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'grid', gap: 14, fontSize: 14 }}>
            <li style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="phone" size={14} color={accent} />
              <a href={PHONE_TEL} style={{ color: '#fff', fontWeight: 600 }}>{PHONE_DISPLAY}</a>
            </li>
            <li style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="mail" size={14} color={accent} />
              <span>hello@apexoverhead.com <span className="todo-flag">TODO</span></span>
            </li>
            <li style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <span style={{ paddingTop: 3 }}><Icon name="clock" size={14} color={accent} /></span>
              <span>Mon–Fri · 7am–5pm <span className="todo-flag">TODO hours</span></span>
            </li>
          </ul>
        </div>
      </div>

      <div style={{
        marginTop: 56, paddingTop: 22,
        borderTop: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        fontSize: 12.5, color: 'rgba(255,255,255,0.5)',
      }}>
        <div>© 2026 Apex Overhead Doors. Locally Owned &amp; Operated. · Licensed &amp; Insured</div>
        <div style={{ display: 'flex', gap: 18 }}>
          <a href="#" style={{ color: 'rgba(255,255,255,0.6)' }}>Privacy</a>
          <a href="#" style={{ color: 'rgba(255,255,255,0.6)' }}>Terms</a>
          <a href="#" style={{ color: 'rgba(255,255,255,0.6)' }}>Sitemap</a>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 900px) {
        .footer-grid { grid-template-columns: 1fr 1fr !important; }
      }
      @media (max-width: 540px) {
        .footer-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </footer>
);

window.Services = Services;
window.WhyApex = WhyApex;
window.Process = Process;
window.ServiceArea = ServiceArea;
window.Testimonials = Testimonials;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
