function HomePage({ heroVariant, onContact }) {
  return (
    <main data-screen-label="Home">
      <Hero heroVariant={heroVariant} onContact={onContact} />

      <ServicesPreview />

      {/* Aurora divider */}
      <div className="container"><hr className="divider-aurora" /></div>

      <ProcessSection />

      <FeatureSplit
        eyebrow="Websites"
        accent="var(--aurora-green)"
        title={<>A website that <span className="beat-aurora">earns its keep.</span></>}
        body="Most small-business sites are a digital business card. We build sites that load fast, look sharp, and actually generate calls — without the bloat of page-builder themes."
        bullets={[
          'Hand-built. No WordPress. No drag-and-drop bloat.',
          'Mobile-first, accessible, 95+ Lighthouse scores',
          'Lead capture, booking, payments — wired to your inbox',
          'On-call edits afterward, billed by the hour or retainer',
        ]}
        ctaLabel="See website work"
        ctaTo="/services/websites"
        visual={<WebsiteVisual />}
      />

      <FeatureSplit
        eyebrow="Business Email & IT"
        accent="var(--aurora-magenta)"
        title={<>Look like a business. <span className="beat-aurora">Not a Gmail address.</span></>}
        body="hello@yourbusiness.com instead of a free address. Domain configured, SPF/DKIM/DMARC dialed in so your invoices don't end up in spam, and migration handled without losing a single email."
        bullets={[
          'Google Workspace or Microsoft 365 — your choice',
          'Domain, MX, SPF, DKIM, DMARC configured properly',
          'Mailbox migration from Gmail, GoDaddy, Outlook, anywhere',
          'Ongoing user adds, password resets, MFA, on-call help',
        ]}
        ctaLabel="See email packages"
        ctaTo="/services/email"
        visual={<EmailVisual />}
        reverse
      />

      <FeatureSplit
        eyebrow="Network & Camera Care"
        accent="var(--aurora-blue)"
        title={<>Your network, <span className="beat-aurora">off your mind.</span></>}
        body="Dead zones, mystery slowdowns, or a UniFi® setup nobody's touched since it went in? We diagnose, tune, and right-size what you already own — and tell you honestly when you don't need new gear."
        bullets={[
          'Dead-zone diagnosis — often fixed with one well-placed AP',
          'UniFi cleanups: firmware, VLANs, guest & IoT segmentation',
          'UniFi Protect® camera tuning, storage, and health checks',
          'Small upgrades done in a visit — not multi-week projects',
        ]}
        ctaLabel="See network services"
        ctaTo="/services/networking"
        visual={<PlanningVisual />}
      />

      <LocalSection />

      <TestimonialsSection />

      <FAQTeaser />

      <CTABand
        eyebrow="Free consultation"
        title="Let's build something that works for you."
        body="A quick conversation, no obligation. We'll tell you whether we're the right fit — and if we're not, we'll tell you who is."
        primary="Schedule a Free Consultation"
        onPrimary={onContact}
        secondary="Read FAQ first"
        onSecondary={() => navigate('/faq')}
      />
    </main>
  );
}
window.HomePage = HomePage;


function LocalSection() {
  return (
    <section className="section" data-screen-label="01 Home Local">
      <div className="container">
        <div className="cols-2" style={{'--cols':'1fr 1.2fr', '--col-gap':'64px', alignItems:'center'}}>
          <div>
            <div className="eyebrow">Triangle Area · NC</div>
            <h2 className="h2" style={{margin:'18px 0 18px'}}>Raleigh-based. <span className="beat-aurora">Boots-on-the-ground.</span></h2>
            <p className="lede" style={{margin:'0 0 24px'}}>
              We serve homeowners and small businesses across the Triangle — and we'll travel further for the right project.
              Your consultant is local, your point of contact is local, and your support call doesn't route to a different time zone.
            </p>
            <div className="kv-list">
              <div className="kv"><span className="k">Headquartered</span><span className="v">Raleigh, NC 27601</span></div>
              <div className="kv"><span className="k">Primary service area</span><span className="v">Wake · Durham · Orange counties</span></div>
              <div className="kv"><span className="k">Response time</span><span className="v">1 business day · Mon–Fri</span></div>
              <div className="kv"><span className="k">Site visits</span><span className="v">Free within 25 mi of 27601</span></div>
            </div>
            <Link to="/about" className="btn btn--secondary mt-8">
              About Aurora <Icon name="arrow-right" size={16} />
            </Link>
          </div>
          <div>
            <TriangleMap />
          </div>
        </div>
      </div>
    </section>
  );
}
window.LocalSection = LocalSection;


function TestimonialsSection() {
  return (
    <section className="section" data-screen-label="01 Home Testimonials">
      <div className="container">
        <SectionHeader
          eyebrow="Word of mouth"
          title={<>The work speaks. <span className="beat-aurora">So do the clients.</span></>}
          body="We're a young company building our case study library. Real customer quotes are in the works — these are honest placeholders so you can see how it'll lay out."
        />
        <div className="grid grid-3">
          <Testimonial isPlaceholder
            quote="New website, new business email, and our WiFi dead zones fixed in one afternoon visit. Quiet, fast, no upsells."
            name="Customer name" role="Homeowner · Cary, NC" initials="CN"
          />
          <Testimonial isPlaceholder
            quote="Built our site, migrated us to Google Workspace, and untangled the network the last guy left behind. One bill, one phone number."
            name="Business owner" role="Small business · Raleigh, NC" initials="BO"
          />
          <Testimonial isPlaceholder
            quote="Two years after the project wrapped he still answers the phone. That's worth more than anything, honestly."
            name="Repeat client" role="Homeowner · Wake Forest, NC" initials="RC"
          />
        </div>
      </div>
    </section>
  );
}
window.TestimonialsSection = TestimonialsSection;


function FAQTeaser() {
  const items = [
    { q: 'Do you still install whole-home networks and camera systems?', a: <>Not anymore — we've focused the business on websites, business email, and IT consulting. We still love network work at the right size: tune-ups, dead-zone fixes, small upgrades like adding an access point, and keeping existing UniFi® and Protect® systems healthy. For a full new install, we'll consult on the design and point you to installers we trust.</> },
    { q: 'Are you affiliated with Ubiquiti?', a: <>No. We're an independent consultant. UniFi® and UniFi Protect® are registered trademarks of Ubiquiti Inc., and we work with their gear because it's the best at what it does. But we don't speak for them and they don't speak for us.</> },
    { q: 'Do you charge for the consultation?', a: <>No. The first call is free, and if we come out to your home or office to scope a job within 25 miles of downtown Raleigh, that's free too. You only pay once we agree on a written quote.</> },
    { q: 'What does ongoing support cost?', a: <>It depends on what you want. We offer hourly support, monthly monitoring plans, and project-based check-ins. We'll quote you something that matches your actual usage, not the maximum we can talk you into.</> },
  ];
  return (
    <section className="section" data-screen-label="01 Home FAQ">
      <div className="container container--narrow">
        <SectionHeader
          eyebrow="Got questions?"
          title={<>Got questions? <span className="beat-aurora">We've got answers.</span></>}
          body="The most common questions we hear from new clients. The full list lives on the FAQ page."
        />
        <FAQ items={items} />
        <div className="row row--center mt-8" style={{justifyContent:'center'}}>
          <Link to="/faq" className="btn btn--secondary">Read all FAQ <Icon name="arrow-right" size={16} /></Link>
        </div>
      </div>
    </section>
  );
}
window.FAQTeaser = FAQTeaser;