// Home page

const Hero = ({ heroVariant = "split" }) => {
  if (heroVariant === "stacked") return <HeroStacked/>;
  return <HeroSplit/>;
};

const HeroSplit = () => (
  <section className="section section--ink" style={{ paddingTop: 56, paddingBottom: 64, overflow: "hidden" }}>
    <div className="wrap">
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center" }} className="hero-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <span className="pill">
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--blue-2)" }}/>
              Owner-operated · Barrington, NH
            </span>
            <span className="pill" style={{ background: "rgba(255,255,255,0.06)", color: "var(--ink-2)" }}>
              <Stars n={5}/> 4.9 on Google
            </span>
          </div>

          <h1 className="h-head h1 mt-24">
            Mike picks&nbsp;up.<br/>
            Mike shows&nbsp;up.
          </h1>

          <p className="mt-24" style={{ fontSize: 20, color: "var(--ink-2)", maxWidth: 520 }}>
            Honest electrical work across <strong style={{ color: "var(--ink)" }}>NH, ME &amp; MA</strong> —
            25 years and counting. Generators, panels, new construction, renovations.
            <br/>No surprise fees. No runaround.
          </p>

          <div className="mt-32">
            <a href={PHONE_HREF} style={{ display: "inline-flex", alignItems: "center", gap: 16 }}>
              <span style={{
                width: 56, height: 56, borderRadius: 999,
                background: "var(--blue)", color: "#fff",
                display: "inline-flex", alignItems: "center", justifyContent: "center"
              }}>
                <PhoneIcon size={22}/>
              </span>
              <span>
                <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)" }}>Call Mike direct</div>
                <span className="phone-big">{PHONE_DISPLAY}</span>
              </span>
            </a>
          </div>

          <div className="mt-24" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn--primary btn--xl" onClick={() => window.__nav("contact")}>
              Request a Quote <ArrowIcon/>
            </button>
            <button className="btn btn--ghost btn--xl" onClick={() => window.__nav("services")}>
              See services
            </button>
          </div>

          <div className="mt-32" style={{ display: "flex", gap: 22, flexWrap: "wrap", color: "var(--ink-3)", fontSize: 13 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><CheckIcon size={14}/> Licensed &amp; insured</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><CheckIcon size={14}/> Quote = price you pay</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><CheckIcon size={14}/> Emergency available</span>
          </div>
        </div>

        <div className="hero-photo" style={{ aspectRatio: "4/5", maxWidth: 520, justifySelf: "end" }}>
          <img src="assets/mike.jpg" alt="Mike Daigle, owner of Daigle Electric, on a jobsite in hard hat and safety glasses" />
          <div className="hero-photo__badge">
            <div style={{
              padding: 10, background: "rgba(12,12,12,0.7)", border: "1px solid rgba(255,255,255,0.12)",
              borderRadius: 6, backdropFilter: "blur(6px)",
              display: "flex", alignItems: "center", gap: 10
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 999, background: "var(--bg-elev)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--head)", fontWeight: 900, fontSize: 18
              }}>MD</div>
              <div>
                <div style={{ fontFamily: "var(--head)", fontWeight: 800, fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  Mike Daigle
                </div>
                <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Owner · Master Electrician</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 880px) {
        .hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        .hero-grid .hero-photo { max-width: 100% !important; justify-self: stretch !important; aspect-ratio: 4/5; }
      }
    `}</style>
  </section>
);

const HeroStacked = () => (
  <section className="section section--ink" style={{ padding: "48px 0 64px" }}>
    <div className="wrap" style={{ maxWidth: 1100 }}>
      <div className="hero-photo" style={{ aspectRatio: "16/9", marginBottom: 40 }}>
        <img src="assets/mike.jpg" alt="Mike Daigle on a jobsite" style={{ objectPosition: "50% 25%" }}/>
        <div style={{ position: "absolute", left: 24, bottom: 24, right: 24, zIndex: 2 }}>
          <span className="pill">Owner-operated · Barrington, NH</span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "end" }} className="hs-grid">
        <h1 className="h-head h1">Mike picks&nbsp;up.<br/>Mike shows&nbsp;up.</h1>
        <div>
          <p style={{ fontSize: 18, color: "var(--ink-2)", margin: 0 }}>
            Honest electrical work across NH, ME &amp; MA — 25 years and counting.
          </p>
          <div className="mt-24" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a href={PHONE_HREF} className="btn btn--primary btn--xl"><PhoneIcon/> {PHONE_DISPLAY}</a>
            <button className="btn btn--ghost btn--xl" onClick={() => window.__nav("contact")}>Request a Quote <ArrowIcon/></button>
          </div>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 880px) { .hs-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

const ServicesSplit = () => (
  <section className="section section--ink">
    <div className="wrap">
      <SectionHead
        eyebrow="What We Do"
        title="Two sides. One Mike."
        sub="Daigle Electric handles the residential jobs that keep your house running and the commercial work that keeps the lights on for landlords, builders, and shops."
      />

      <div className="grid-2 mt-56" style={{ gap: 24 }}>
        <article className="tile">
          <div className="tile__num">01 — RESIDENTIAL</div>
          <h3 className="h-head h3">Homeowners &amp; landlords</h3>
          <p style={{ color: "var(--ink-2)", margin: 0 }}>
            Generators, panel upgrades, kitchen rewires, new construction.
            Fair quote, clean install, real follow-through.
          </p>
          <ul className="tile__list mt-16">
            {RESI_SERVICES.slice(0,5).map((s, i) => <li key={i}>{s.title}</li>)}
            <li style={{ color: "var(--ink-3)" }}>+ {RESI_SERVICES.length - 5} more</li>
          </ul>
          <button className="btn btn--ghost mt-16" onClick={() => window.__nav("services")}>
            See residential services <ArrowIcon/>
          </button>
        </article>

        <article className="tile">
          <div className="tile__num">02 — COMMERCIAL</div>
          <h3 className="h-head h3">Contractors &amp; property owners</h3>
          <p style={{ color: "var(--ink-2)", margin: 0 }}>
            Build-outs, retrofits, multi-property service, three-phase machine hookups.
            Coordinated with your GC and your tenants.
          </p>
          <ul className="tile__list mt-16">
            {COMM_SERVICES.map((s, i) => <li key={i}>{s.title}</li>)}
          </ul>
          <button className="btn btn--ghost mt-16" onClick={() => window.__nav("services")}>
            See commercial services <ArrowIcon/>
          </button>
        </article>
      </div>
    </div>
  </section>
);

const SignatureService = () => (
  <section className="section section--elev">
    <div className="wrap">
      <div className="grid-2" style={{ alignItems: "center", gap: 48 }}>
        <div>
          <span className="pill pill--yellow">Signature Service</span>
          <h2 className="h-head h2 mt-16">Generator installs that hold up to a New Hampshire winter.</h2>
          <p className="mt-16" style={{ fontSize: 18, color: "var(--ink-2)" }}>
            We size the unit to your actual load, site it where the code (and the snowblower) allows,
            handle the gas-line coordination, pull the permit, and start it up. Most homes are done
            in two days.
          </p>
          <div className="grid-2 mt-32" style={{ gap: 14 }}>
            {[
              "Whole-home standby (Generac · Kohler · Cummins)",
              "Manual & automatic transfer switches",
              "Portable generator inlet boxes",
              "Annual maintenance & repair",
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <span style={{ color: "var(--blue-2)", marginTop: 2 }}><CheckIcon/></span>
                <span style={{ fontSize: 15 }}>{t}</span>
              </div>
            ))}
          </div>
          <div className="mt-32">
            <button className="btn btn--primary" onClick={() => window.__nav("contact")}>Quote my generator <ArrowIcon/></button>
          </div>
        </div>
        <div>
          {/* TODO: swap in real generator install jobsite photo from Mike */}
          <div className="placeholder-photo" style={{ aspectRatio: "4/3" }}>
            Jobsite photo placeholder · Generator install
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HomeReviews = () => (
  <section className="section section--light">
    <div className="wrap">
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
        <SectionHead
          variant="light"
          eyebrow="Reviews"
          title="What folks have been telling Google."
        />
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <GoogleG/>
          <div>
            <div style={{ fontFamily: "var(--head)", fontWeight: 800, letterSpacing: "0.04em", fontSize: 22 }}>4.9 · 16 reviews</div>
            <div style={{ fontSize: 13, color: "#666" }}>And climbing.</div>
          </div>
        </div>
      </div>

      <div className="mt-40">
        <ReviewsRow variant="light"/>
      </div>

      <div className="mt-32" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <button className="btn btn--ghost-dark" onClick={() => window.__nav("reviews")}>Read all reviews <ArrowIcon/></button>
        <a className="btn btn--ghost-dark" href="https://www.google.com/search?q=Daigle+Electric+Barrington+NH" target="_blank" rel="noreferrer">
          <GoogleG/> Leave a review
        </a>
      </div>
    </div>
  </section>
);

const MeetMike = () => (
  <section className="section section--ink">
    <div className="wrap">
      <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 40, alignItems: "center" }} className="mm-grid">
        <div style={{
          width: 280, height: 280, borderRadius: "50%",
          overflow: "hidden", background: "#222",
          border: "1px solid var(--line)",
          justifySelf: "start"
        }}>
          <img src="assets/mike.jpg" alt="Mike Daigle" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 26%" }}/>
        </div>
        <div>
          <div className="eyebrow">Meet the owner</div>
          <h2 className="h-head h2 mt-12">Mike <em style={{ fontStyle: "normal", color: "var(--blue-2)" }}>is</em> Daigle Electric.</h2>
          <p className="mt-16" style={{ fontSize: 18, color: "var(--ink-2)", maxWidth: 620 }}>
            Mike Daigle started Daigle Electric in 2000. Twenty-five years later he's still the guy who picks up the phone,
            comes out to quote your job, and runs the wire himself or with a small crew he trained. That's the whole pitch.
          </p>
          <div className="mt-24">
            <button className="btn btn--ghost" onClick={() => window.__nav("about")}>Read Mike's story <ArrowIcon/></button>
          </div>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 720px) { .mm-grid { grid-template-columns: 1fr !important; } .mm-grid > div:first-child { width: 200px !important; height: 200px !important; } }`}</style>
  </section>
);

const ServiceAreaTeaser = () => (
  <section className="section--xs section section--elev" style={{ paddingTop: 48, paddingBottom: 48 }}>
    <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <PinIcon size={28}/>
        <div>
          <div className="eyebrow eyebrow--ink">Service Area</div>
          <div style={{ fontFamily: "var(--head)", fontWeight: 800, fontSize: 22, letterSpacing: "0.02em", marginTop: 2 }}>
            Strafford County core · ~60 min radius into ME &amp; MA
          </div>
        </div>
      </div>
      <button className="btn btn--ghost" onClick={() => window.__nav("area")}>See towns we cover <ArrowIcon/></button>
    </div>
  </section>
);

const HomePage = ({ heroVariant = "split" }) => (
  <main className="page-enter">
    <Hero heroVariant={heroVariant}/>
    <ProofStrip/>
    <ServicesSplit/>
    <SignatureService/>
    <HomeReviews/>
    <MeetMike/>
    <ServiceAreaTeaser/>
    <QuoteBlock/>
  </main>
);

Object.assign(window, { HomePage });