// sections.jsx — Hawkins Electric site sections
// All components register on window for cross-script use.

const { useState, useEffect, useRef } = React;

// ── Brand bolt mark ─────────────────────────────────────────────────────────
function BoltMark({ size = 22, accent = 'var(--accent)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M14 2 L4 14 H11 L10 22 L20 10 H13 Z" stroke={accent} strokeWidth="1.5"
            strokeLinejoin="round" fill="none"/>
    </svg>
  );
}

// ── Striped placeholder ─────────────────────────────────────────────────────
function Placeholder({ label, ratio = '4/3', tone = 'dark' }) {
  const stripeColor = tone === 'dark' ? 'rgba(255,255,255,.04)' : 'rgba(0,0,0,.05)';
  const bg = tone === 'dark' ? '#0F1626' : '#EDEAE2';
  const fg = tone === 'dark' ? 'rgba(244,241,234,.55)' : 'rgba(20,27,46,.55)';
  return (
    <div className="ph" style={{
      aspectRatio: ratio,
      background: `repeating-linear-gradient(135deg, ${bg} 0 14px, ${stripeColor} 14px 15px)`,
      color: fg,
    }}>
      <span className="ph-lbl">{label}</span>
    </div>
  );
}

// ── Scroll reveal ───────────────────────────────────────────────────────────
function Reveal({ children, delay = 0, as: As = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); io.disconnect(); }
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={`reveal ${shown ? 'reveal-on' : ''} ${className}`}
        style={{ transitionDelay: `${delay}ms` }} {...rest}>
      {children}
    </As>
  );
}

// ── Sticky nav ──────────────────────────────────────────────────────────────
function Nav({ phone }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['Services', '#services'],
    ['Why us', '#why'],
    ['About', '#about'],
    ['Contact', '#contact'],
  ];

  return (
    <header className={`nav ${scrolled ? 'nav-scrolled' : ''}`}>
      <div className="nav-inner">
        <a className="nav-brand" href="#top" onClick={() => setMenuOpen(false)}>
          <img className="nav-logo-img" src="img/hawkins-logo.png" alt="Hawkins Electric Co."/>
          <span className="nav-brand-name">
            <strong>HAWKINS</strong>
            <em>ELECTRIC CO.</em>
          </span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        </nav>
        <div className="nav-cta">
          <a className="nav-phone" href={`tel:${phone.replace(/\D/g,'')}`}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden>
              <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"
                    stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
            </svg>
            <span>{phone}</span>
          </a>
          <a className="btn btn-primary nav-btn" href="#contact">
            Request service
            <span className="btn-arrow">→</span>
          </a>
        </div>
        <button className={`nav-burger ${menuOpen ? 'open' : ''}`}
                aria-label="Toggle menu"
                onClick={() => setMenuOpen(o => !o)}>
          <span/><span/><span/>
        </button>
      </div>
      <div className={`nav-sheet ${menuOpen ? 'open' : ''}`}>
        {links.map(([l, h]) => (
          <a key={h} href={h} onClick={() => setMenuOpen(false)}>{l}</a>
        ))}
        <a className="btn btn-primary" href="#contact" onClick={() => setMenuOpen(false)}>
          Request service →
        </a>
        <a className="nav-sheet-phone" href={`tel:${phone.replace(/\D/g,'')}`}>
          Call {phone}
        </a>
      </div>
    </header>
  );
}

// ── Hero ────────────────────────────────────────────────────────────────────
function HeroLeadForm({ phone }) {
  const [form, setForm] = useState({ name: '', phone: '', address: '', service: 'Panel Upgrade' });
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const onChange = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch('https://formspree.io/f/mbdqngzj', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _subject: `New estimate request from ${form.name}`,
          source: 'Hero lead form',
          name: form.name,
          phone: form.phone,
          address: form.address,
          service: form.service,
        }),
      });
      if (!res.ok) throw new Error('Submission failed');
      setSent(true);
      setTimeout(() => {
        const c = document.getElementById('contact');
        if (c) c.scrollIntoView({ behavior: 'smooth' });
      }, 1200);
    } catch (err) {
      setError(`Couldn't send. Please call ${phone}.`);
    } finally {
      setSubmitting(false);
    }
  };
  return (
    <form className={`hlead ${sent ? 'sent' : ''}`} onSubmit={submit}>
      <div className="hlead-head">
        <span className="hlead-badge">FREE ESTIMATE</span>
        <span className="hlead-sub">No obligation &middot; Same-day callback</span>
      </div>
      {!sent ? (
        <>
          <div className="hlead-row">
            <label><span>Name</span>
              <input required value={form.name} onChange={onChange('name')} placeholder="Your name"/>
            </label>
            <label><span>Phone</span>
              <input required type="tel" value={form.phone} onChange={onChange('phone')} placeholder="(xxx) xxx-xxxx"/>
            </label>
          </div>
          <label className="hlead-full"><span>Service address</span>
            <input required value={form.address} onChange={onChange('address')} placeholder="Street, City, NC"/>
          </label>
          <label className="hlead-full"><span>Service needed</span>
            <div className="cf-select">
              <select value={form.service} onChange={onChange('service')}>
                <option>Panel Upgrade</option>
                <option>EV Charger Install</option>
                <option>Service &amp; Repair</option>
                <option>Lighting</option>
                <option>Generator</option>
                <option>Commercial</option>
                <option>Something else</option>
              </select>
            </div>
          </label>
          <button type="submit" className="btn btn-primary btn-lg hlead-submit" disabled={submitting}>
            {submitting ? 'Sending…' : 'Get my free estimate'}
            <span className="btn-arrow">→</span>
          </button>
          {error && <p className="hlead-error">{error}</p>}
          <a className="hlead-call" href={`tel:${phone.replace(/\D/g,'')}`}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden>
              <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"
                stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/>
            </svg>
            Or call {phone}
          </a>
        </>
      ) : (
        <div className="hlead-sent">
          <div className="cf-sent-mark">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <path d="M5 12.5 10 17l9-10" stroke="currentColor" strokeWidth="2.2"
                strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <h4>Got it, {form.name || 'thanks'}.</h4>
          <p>We&rsquo;ll call <strong>{form.phone}</strong> within the next business day to confirm your free estimate.</p>
        </div>
      )}
    </form>
  );
}

function Hero({ phone }) {
  return (
    <section id="top" className="hero">
      <div className="hero-bg" aria-hidden>
        <div className="hero-bg-img"/>
        <div className="hero-bg-scrim"/>
        <div className="hero-grid-bg"/>
        <div className="hero-glow"/>
      </div>
      <div className="hero-inner">
        <div className="hero-copy">
          <div className="hero-meta">
            <span className="meta-dot meta-dot-on"/>
            <span>LICENSED &amp; INSURED &middot; SERVING WESTERN NC</span>
          </div>

          <h1 className="hero-h1">
            Local electricians.
            <span className="hero-h1-accent">
              <span className="wire">Free estimates.</span>
            </span>
            <br/>
            Done right the first time.
          </h1>

          <p className="hero-sub">
            Hawkins Electric Co. is a licensed North Carolina electrical contractor serving
            <strong> Gaston, Lincoln, Cleveland, &amp; Catawba</strong> counties &mdash; clean workmanship,
            honest quotes, and fast response when the lights go out.
          </p>

          <ul className="hero-badges" role="list">
            {[
              ['Free estimates', 'No obligation, ever'],
              ['Licensed & insured', 'NC electrical contractor'],
              ['Fast response', 'Same-day where possible'],
              ['Local & accountable', 'Owner-operated'],
            ].map(([t, s]) => (
              <li key={t} className="badge">
                <span className="badge-tick" aria-hidden>
                  <svg width="11" height="11" viewBox="0 0 12 12"><path d="M2 6.5 5 9l5-6"
                    stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
                <div>
                  <strong>{t}</strong>
                  <em>{s}</em>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <div className="hero-form-wrap">
          <HeroLeadForm phone={phone}/>
          <div className="hero-form-trust">
            <span className="meta-dot meta-dot-on"/>
            <span>Average response &lt; 2 hours during business hours</span>
          </div>
        </div>
      </div>
      <div className="hero-marquee" aria-hidden>
        <div className="hero-marquee-track">
          {Array.from({length: 2}).map((_, i) => (
            <div key={i} className="hero-marquee-row">
    <span>GASTON COUNTY</span><BoltMark size={12}/>
              <span>LINCOLN COUNTY</span><BoltMark size={12}/>
              <span>CLEVELAND COUNTY</span><BoltMark size={12}/>
              <span>CATAWBA COUNTY</span><BoltMark size={12}/>
              <span>PANEL UPGRADES</span><BoltMark size={12}/>
              <span>EV CHARGER INSTALL</span><BoltMark size={12}/>
              <span>GENERATOR HOOK-UPS</span><BoltMark size={12}/>
              <span>SERVICE & REPAIR</span><BoltMark size={12}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── CTA strip ───────────────────────────────────────────────────────────────
function CTAStrip({ headline, sub, phone }) {
  return (
    <section className="ctastrip">
      <div className="ctastrip-inner">
        <div>
          <h3>{headline}</h3>
          <p>{sub}</p>
        </div>
        <div className="ctastrip-actions">
          <a className="btn btn-primary" href="#contact">Request service →</a>
          <a className="btn btn-ghost" href={`tel:${phone.replace(/\D/g,'')}`}>{phone}</a>
        </div>
      </div>
    </section>
  );
}

// ── Section header ──────────────────────────────────────────────────────────
function SectionHeader({ num, eyebrow, title, lede, align = 'left' }) {
  return (
    <div className={`sec-head sec-head-${align}`}>
      <div className="sec-eyebrow">
        <span className="sec-num">{num}</span>
        <span className="sec-eyebrow-line"/>
        <span>{eyebrow}</span>
      </div>
      <h2 className="sec-title">{title}</h2>
      {lede && <p className="sec-lede">{lede}</p>}
    </div>
  );
}

// ── Services ────────────────────────────────────────────────────────────────
const SERVICES = [
  {
    n: '01',
    title: 'Service & Repair',
    blurb: 'Tripping breakers, flickering lights, dead outlets &mdash; we diagnose the real cause and fix it right the first time.',
    bullets: ['Outlet & switch repair', 'Breaker replacement', 'Whole-home troubleshooting'],
    icon: 'wrench',
  },
  {
    n: '02',
    title: 'Panel Upgrades',
    blurb: 'Modern 200A service for older homes &mdash; safer, code-compliant, ready for today’s electrical loads.',
    bullets: ['100A → 200A upgrades', 'Sub-panels & re-feeds', 'Meter base replacement'],
    icon: 'panel',
  },
  {
    n: '03',
    title: 'EV Charger Install',
    blurb: 'Level 2 chargers wired clean &mdash; permitted, inspected, and ready the day your car arrives.',
    bullets: ['Tesla / J1772 / NACS', 'Garage & driveway runs', 'Load-management setups'],
    icon: 'ev',
  },
  {
    n: '04',
    title: 'Lighting Design',
    blurb: 'Recessed, accent, landscape, and architectural lighting &mdash; thoughtful layouts, dimmer-ready.',
    bullets: ['Recessed & wafer LED', 'Under-cabinet & accent', 'Outdoor & landscape'],
    icon: 'bulb',
  },
  {
    n: '05',
    title: 'Generators',
    blurb: 'Standby and portable generator hookups so your home keeps running when the grid doesn’t.',
    bullets: ['Transfer switches', 'Standby gen install', 'Inlet boxes & inter-locks'],
    icon: 'gen',
  },
  {
    n: '06',
    title: 'Commercial',
    blurb: 'Tenant fit-outs, service calls, and code corrections for offices, retail, and light industrial.',
    bullets: ['Fit-out & build-out', 'Maintenance contracts', 'Inspection corrections'],
    icon: 'building',
  },
];

function ServiceIcon({ kind }) {
  const s = { stroke: 'currentColor', strokeWidth: 1.5, fill: 'none', strokeLinejoin: 'round', strokeLinecap: 'round' };
  switch (kind) {
    case 'wrench': return (
      <svg viewBox="0 0 32 32" {...s}><path d="M21 6a6 6 0 0 0-7.5 7.5L5 22l5 5 8.5-8.5A6 6 0 0 0 26 11l-3 3-3-1-1-3 3-3a6 6 0 0 0-1-1Z"/></svg>);
    case 'panel': return (
      <svg viewBox="0 0 32 32" {...s}><rect x="6" y="4" width="20" height="24" rx="1.5"/><path d="M10 9h12M10 14h12M10 19h12M10 24h6"/></svg>);
    case 'ev': return (
      <svg viewBox="0 0 32 32" {...s}><rect x="5" y="9" width="16" height="14" rx="1.5"/><path d="M5 15h16M21 13l4 2v6a2 2 0 0 1-4 0v-2"/><path d="M11 12h5l-2 4h3l-4 5 1-4h-3Z"/></svg>);
    case 'bulb': return (
      <svg viewBox="0 0 32 32" {...s}><path d="M16 5a8 8 0 0 0-5 14c1 1 2 2 2 4h6c0-2 1-3 2-4a8 8 0 0 0-5-14ZM13 27h6M14 24h4"/></svg>);
    case 'gen': return (
      <svg viewBox="0 0 32 32" {...s}><rect x="4" y="9" width="24" height="16" rx="1.5"/><circle cx="22" cy="17" r="3"/><path d="M8 13h8M8 17h6M8 21h8M22 6v3"/></svg>);
    case 'building': return (
      <svg viewBox="0 0 32 32" {...s}><path d="M6 28V8l10-4 10 4v20"/><path d="M11 14h2M11 19h2M11 24h2M16 14h2M16 19h2M16 24h2M21 14h2M21 19h2M21 24h2"/></svg>);
    default: return null;
  }
}

function ServiceCard({ s, i }) {
  return (
    <Reveal as="article" className="svc-card" delay={i * 60}>
      <div className="svc-card-top">
        <span className="svc-num">{s.n}</span>
        <span className="svc-icon"><ServiceIcon kind={s.icon}/></span>
      </div>
      <h3 className="svc-title">{s.title}</h3>
      <p className="svc-blurb" dangerouslySetInnerHTML={{__html: s.blurb}}/>
      <ul className="svc-bullets">
        {s.bullets.map(b => (
          <li key={b}>
            <span className="svc-tick" aria-hidden>
              <svg width="9" height="9" viewBox="0 0 12 12"><path d="M2 6.5 5 9l5-6"
                stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
            {b}
          </li>
        ))}
      </ul>
      <a className="svc-link" href="#contact">
        Request a quote <span className="btn-arrow">→</span>
      </a>
    </Reveal>
  );
}

function Services() {
  return (
    <section id="services" className="sec sec-services">
      <div className="sec-inner">
        <SectionHeader num="01" eyebrow="WHAT WE DO"
          title={<>Electrical work, done <span className="ul-accent">properly.</span></>}
          lede="Residential and commercial service across Gaston, Lincoln, Cleveland, and Catawba counties. Six core practices, one standard of work."
        />
        <div className="svc-grid">
          {SERVICES.map((s, i) => <ServiceCard key={s.n} s={s} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

// ── Why us ──────────────────────────────────────────────────────────────────
const PILLARS = [
  { k: 'Safety first', v: 'Every job starts with the panel off and ends with a meter in hand. No shortcuts, no guessing.' },
  { k: 'Clean workmanship', v: 'Wires dressed, labels on, drywall patched. The kind of work you’d be proud to show an inspector.' },
  { k: 'Honest pricing', v: 'Flat-rate quotes before we start. If something changes, you hear it from us first &mdash; not on the invoice.' },
  { k: 'Clear communication', v: 'You’ll know who’s coming, when, and what they’re doing. Texts when we’re on the way.' },
  { k: 'Local & accountable', v: 'We live and work here. The truck you see today is the same one you’ll see for a warranty call.' },
  { k: 'Code-compliant, always', v: 'Permits pulled. Inspections passed. Documentation handed back to you when the job is done.' },
];

function WhyUs() {
  return (
    <section id="why" className="sec sec-why">
      <div className="sec-inner">
        <div className="why-head">
          <SectionHeader num="02" eyebrow="WHY HAWKINS"
            title={<>Six things we <span className="ul-accent">won’t</span> compromise on.</>}
          />
          <div className="why-aside">
            <Placeholder label="ELECTRICIAN AT WORK · PANEL DETAIL" ratio="4/5"/>
          </div>
        </div>
        <ol className="pillars">
          {PILLARS.map((p, i) => (
            <Reveal as="li" key={p.k} className="pillar" delay={i * 40}>
              <span className="pillar-num">{String(i+1).padStart(2,'0')}</span>
              <div>
                <h4>{p.k}</h4>
                <p>{p.v}</p>
              </div>
            </Reveal>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ── Work gallery (rolling) ──────────────────────────────────────────────────
const WORK_IMAGES = Array.from({length: 15}, (_, i) => ({
  src: `img/work-${String(i+1).padStart(2,'0')}.jpeg`,
  alt: `Hawkins Electric prior work ${i+1}`,
}));

function WorkGallery() {
  const trackRef = useRef(null);
  const [paused, setPaused] = useState(false);
  // duplicate list for seamless loop
  const list = [...WORK_IMAGES, ...WORK_IMAGES];
  return (
    <section id="work" className="sec sec-work">
      <div className="sec-inner">
        <SectionHeader num="03" eyebrow="OUR WORK"
          title={<>Recent jobs across <span className="ul-accent">the Carolinas.</span></>}
          lede="Panel upgrades, rewires, lighting, and full renovation electrical &mdash; a sample of work we&rsquo;ve completed for homeowners and contractors in the area."
        />
      </div>
      <div className={`work-marquee ${paused ? 'paused' : ''}`}
           onMouseEnter={() => setPaused(true)}
           onMouseLeave={() => setPaused(false)}>
        <div className="work-track" ref={trackRef}>
          {list.map((img, i) => (
            <figure key={i} className="work-card">
              <img src={img.src} alt={img.alt} loading="lazy"/>
              <figcaption>
                <span className="work-tag">HAWKINS ELECTRIC</span>
              </figcaption>
            </figure>
          ))}
        </div>
        <div className="work-fade work-fade-l" aria-hidden/>
        <div className="work-fade work-fade-r" aria-hidden/>
      </div>
    </section>
  );
}

// ── Testimonials ───────────────────────────────────────────────────────────
const TESTIMONIALS = [
  {
    quote: "Hawkins Electric was professional from the first call. They showed up on time, walked me through the panel upgrade, and left the work area cleaner than they found it.",
    name: "Sarah M.",
    location: "Gastonia, NC",
    service: "Panel Upgrade",
  },
  {
    quote: "Honest pricing and quality work. I had three quotes for my EV charger install and Hawkins was the only one who actually explained what I was paying for. Highly recommend.",
    name: "James R.",
    location: "Lincolnton, NC",
    service: "EV Charger Install",
  },
  {
    quote: "Called on a Saturday with a tripping breaker that wouldn't reset. They were at the house in under two hours and had it sorted before dinner. That kind of response is rare.",
    name: "Patricia L.",
    location: "Shelby, NC",
    service: "Service & Repair",
  },
  {
    quote: "We hired Hawkins for the electrical on a full kitchen remodel. New circuits, recessed lighting, under-cabinet, the works. Inspector signed off first try. Couldn't be happier.",
    name: "David & Anna K.",
    location: "Hickory, NC",
    service: "Renovation",
  },
  {
    quote: "Straightforward, no upsell, and the workmanship is meticulous. You can see they care about doing it right, not just doing it fast.",
    name: "Michael T.",
    location: "Cherryville, NC",
    service: "Whole-home Rewire",
  },
];

function Testimonials() {
  const [idx, setIdx] = useState(0);
  const n = TESTIMONIALS.length;
  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % n), 7000);
    return () => clearInterval(id);
  }, [n]);

  return (
    <section id="testimonials" className="sec sec-testimonials">
      <div className="sec-inner">
        <div className="t-grid">
          <div className="t-head">
            <SectionHeader num="04" eyebrow="WHAT NEIGHBORS SAY"
              title={<>Real reviews from <span className="ul-accent">real customers.</span></>}
            />
            <div className="t-stats">
              <div>
                <em>RATING</em>
                <strong>5.0 <span className="t-stars">★★★★★</span></strong>
              </div>
              <div>
                <em>REVIEWS</em>
                <strong>Verified local</strong>
              </div>
            </div>
          </div>
          <div className="t-stage">
            {TESTIMONIALS.map((t, i) => (
              <article key={i} className={`t-card ${i === idx ? 'on' : ''}`}>
                <span className="t-quote-mark" aria-hidden>"</span>
                <p className="t-quote">{t.quote}</p>
                <div className="t-attrib">
                  <div className="t-author">
                    <strong>{t.name}</strong>
                    <em>{t.location} &middot; {t.service}</em>
                  </div>
                  <div className="t-stars t-stars-lg">★★★★★</div>
                </div>
              </article>
            ))}
            <div className="t-dots" role="tablist">
              {TESTIMONIALS.map((_, i) => (
                <button key={i}
                  className={`t-dot ${i === idx ? 'on' : ''}`}
                  onClick={() => setIdx(i)}
                  aria-label={`Show testimonial ${i+1}`}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── About ───────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" className="sec sec-about">
      <div className="sec-inner about-grid-compact">
        <div className="about-copy">
          <SectionHeader num="05" eyebrow="ABOUT THE COMPANY"
            title={<>A small shop. <span className="ul-accent">Big standards.</span></>}
          />
          <p>
            Hawkins Electric Co. LLC is a licensed North Carolina electrical contractor
            built around one idea: do the work the way you&rsquo;d want it done in your own
            home. We&rsquo;re small enough that the person who answers the phone is the person
            who shows up &mdash; and big enough to handle service panels, EV chargers, and
            full commercial fit-outs.
          </p>
          <p>
            We don&rsquo;t chase volume. We chase the kind of jobs you tell your neighbors
            about. If that&rsquo;s the experience you&rsquo;re looking for, we&rsquo;d like to be your
            electrician.
          </p>
        </div>
        <ul className="about-stats about-stats-side">
          <li><em>BASED IN</em><strong>North Carolina</strong></li>
          <li><em>SERVING</em><strong>Residential &amp; Commercial</strong></li>
          <li><em>LICENSED</em><strong>NC Electrical Contractor</strong></li>
          <li><em>INSURANCE</em><strong>Fully insured</strong></li>
        </ul>
      </div>
    </section>
  );
}

// ── Contact ─────────────────────────────────────────────────────────────────
function Contact({ phone, email }) {
  const [form, setForm] = useState({
    name: '', phone: '', email: '', address: '', service: 'Service & Repair',
    urgency: 'Within a week', notes: '',
  });
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const onChange = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch('https://formspree.io/f/mbdqngzj', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _subject: `New service request from ${form.name} (${form.urgency})`,
          source: 'Contact form',
          name: form.name,
          phone: form.phone,
          email: form.email,
          address: form.address,
          service: form.service,
          urgency: form.urgency,
          notes: form.notes,
        }),
      });
      if (!res.ok) throw new Error('Submission failed');
      setSent(true);
    } catch (err) {
      setError(`Couldn't send. Please call ${phone} or email ${email}.`);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="contact" className="sec sec-contact">
      <div className="sec-inner contact-grid">
        <div className="contact-copy">
          <SectionHeader num="04" eyebrow="GET IN TOUCH"
            title={<>Tell us what’s going on. <span className="ul-accent">We’ll take it from there.</span></>}
            lede="Most requests get a same-day response. For active emergencies &mdash; sparks, smoke, dead service &mdash; please call."
          />
          <ul className="contact-info">
            <li>
              <em>CALL</em>
              <a href={`tel:${phone.replace(/\D/g,'')}`}>{phone}</a>
            </li>
            <li>
              <em>EMAIL</em>
              <a href={`mailto:${email}`}>{email}</a>
            </li>
            <li>
              <em>SERVICE AREA</em>
              <strong>Gaston, Lincoln, Cleveland &amp; Catawba counties, NC</strong>
            </li>
            <li>
              <em>HOURS</em>
              <strong>Mon&ndash;Fri 7a&ndash;6p &middot; Emergencies 24/7</strong>
            </li>
          </ul>
        </div>

        <form className={`contact-form ${sent ? 'sent' : ''}`} onSubmit={submit}>
          <div className="cf-head">
            <span className="meta-dot meta-dot-on"/>
            <span>REQUEST SERVICE</span>
            <span className="cf-spacer"/>
            <span className="cf-step">{sent ? '2 / 2' : '1 / 2'}</span>
          </div>
          {!sent ? (
            <>
              <div className="cf-row cf-row-2">
                <label><span>Your name</span>
                  <input required value={form.name} onChange={onChange('name')} placeholder="First & last"/>
                </label>
                <label><span>Phone</span>
                  <input required type="tel" value={form.phone} onChange={onChange('phone')} placeholder="(xxx) xxx-xxxx"/>
                </label>
              </div>
              <div className="cf-row cf-row-2">
                <label><span>Email</span>
                  <input type="email" value={form.email} onChange={onChange('email')} placeholder="you@email.com"/>
                </label>
                <label><span>Service address</span>
                  <input value={form.address} onChange={onChange('address')} placeholder="Street, City"/>
                </label>
              </div>
              <div className="cf-row cf-row-2">
                <label><span>Service needed</span>
                  <div className="cf-select">
                    <select value={form.service} onChange={onChange('service')}>
                      {SERVICES.map(s => <option key={s.title}>{s.title}</option>)}
                      <option>Something else</option>
                    </select>
                  </div>
                </label>
                <label><span>How soon?</span>
                  <div className="cf-select">
                    <select value={form.urgency} onChange={onChange('urgency')}>
                      <option>Emergency &mdash; today</option>
                      <option>This week</option>
                      <option>Within a week</option>
                      <option>Just getting a quote</option>
                    </select>
                  </div>
                </label>
              </div>
              <label className="cf-full"><span>Tell us what’s going on</span>
                <textarea rows="4" value={form.notes} onChange={onChange('notes')}
                  placeholder="A breaker keeps tripping, I’d like a quote on a panel upgrade, etc."/>
              </label>
              <button type="submit" className="btn btn-primary btn-lg cf-submit" disabled={submitting}>
                {submitting ? 'Sending…' : 'Send request'} <span className="btn-arrow">→</span>
              </button>
              {error && <p className="hlead-error">{error}</p>}
              <p className="cf-fine">We’ll respond by phone or email within one business day. No spam, ever.</p>
            </>
          ) : (
            <div className="cf-sent">
              <div className="cf-sent-mark">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                  <path d="M5 12.5 10 17l9-10" stroke="currentColor" strokeWidth="2.2"
                    strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h4>Request received.</h4>
              <p>
                Thanks {form.name || 'there'} &mdash; we’ve got it. Someone from the
                Hawkins team will reach out at <strong>{form.phone || phone}</strong> within
                the next business day.
              </p>
              <p className="cf-fine">
                Need help right now? Call <a href={`tel:${phone.replace(/\D/g,'')}`}>{phone}</a>.
              </p>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

// ── Footer ──────────────────────────────────────────────────────────────────
function Footer({ phone, email }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div className="nav-brand">
            <img className="nav-logo-img footer-logo-img" src="img/hawkins-logo.png" alt="Hawkins Electric Co."/>
            <span className="nav-brand-name">
              <strong>HAWKINS</strong>
              <em>ELECTRIC CO. LLC</em>
            </span>
          </div>
          <p>Licensed electrical contractor &middot; North Carolina</p>
        </div>
        <div className="footer-cols">
          <div>
            <em>SERVICES</em>
            <ul>{SERVICES.map(s => <li key={s.title}><a href="#services">{s.title}</a></li>)}</ul>
          </div>
          <div>
            <em>COMPANY</em>
            <ul>
              <li><a href="#why">Why Hawkins</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <em>CONTACT</em>
            <ul>
              <li><a href={`tel:${phone.replace(/\D/g,'')}`}>{phone}</a></li>
              <li><a href={`mailto:${email}`}>{email}</a></li>
              <li>Mon&ndash;Fri 7a&ndash;6p</li>
              <li>Emergencies 24/7</li>
            </ul>
          </div>
        </div>
      </div>
      <div className="footer-rule"/>
      <div className="footer-fine">
        <span>&copy; {new Date().getFullYear()} Hawkins Electric Co. LLC. All rights reserved.</span>
        <span>NC Licensed &middot; Fully Insured</span>
      </div>
    </footer>
  );
}

// ── Sticky mobile CTA ───────────────────────────────────────────────────────
function MobileCTA({ phone }) {
  return (
    <div className="mcta">
      <a className="mcta-btn mcta-call" href={`tel:${phone.replace(/\D/g,'')}`}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden>
          <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"
                stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/>
        </svg>
        Call now
      </a>
      <a className="mcta-btn mcta-quote" href="#contact">Request service →</a>
    </div>
  );
}

Object.assign(window, {
  BoltMark, Placeholder, Reveal,
  Nav, Hero, CTAStrip, SectionHeader,
  Services, WhyUs, About, Contact, Footer, MobileCTA,
  WorkGallery, Testimonials,
});