// Shared atoms used across pages.

const PHONE_DISPLAY = "603-978-8219";
const PHONE_HREF = "tel:+16039788219";
const EMAIL = "mdaigle@daigleelectric.net";
const ADDRESS_LINE1 = "376 Calef Hwy";
const ADDRESS_LINE2 = "Barrington, NH 03825";
const HOURS_LINE1 = "Mon–Fri  ·  7:00 AM – 3:30 PM";
const HOURS_LINE2 = "Emergency service after hours";

const TOWNS = [
  "Barrington", "Dover", "Durham", "Lee", "Madbury", "Newmarket",
  "Rochester", "Somersworth", "Strafford", "Farmington", "Northwood",
  "Nottingham", "Epping", "Exeter", "Stratham", "Greenland",
  "Portsmouth", "Rye", "New Castle", "Newington",
  "Berwick (ME)", "South Berwick (ME)", "Eliot (ME)", "Kittery (ME)",
  "Haverhill (MA)", "Newburyport (MA)", "Amesbury (MA)"
];

const RESI_SERVICES = [
  { title: "Generator Installation",          desc: "Whole-home standby & portable hookups. Sized, sited, permitted, and started up." },
  { title: "Service & Panel Upgrades",         desc: "100A → 200A upgrades, sub-panels, meter mast replacements, EV-ready feeds." },
  { title: "New Home Wiring",                  desc: "Ground-up residential wiring from rough-in to trim, on the GC's schedule." },
  { title: "Renovation & Addition Wiring",     desc: "Kitchens, baths, additions — clean fishes through existing walls when we can." },
  { title: "Recessed Lighting & Fixtures",     desc: "Cans, pendants, under-cabinet, smart switches. Tidy, symmetric layouts." },
  { title: "Outlets & Device Work",            desc: "Adds, moves, GFCI/AFCI replacements, dedicated circuits for appliances." },
  { title: "Emergency Service",                desc: "No power, breaker tripping, burnt outlet — call. We respond after hours." },
];

const COMM_SERVICES = [
  { title: "Commercial Installation",          desc: "Build-outs, tenant fit-ups, low-voltage rough-in coordinated with other trades." },
  { title: "Renovation & Upgrades",            desc: "Retail, office, light-industrial refits. Off-hours work when needed." },
  { title: "Industrial Services",              desc: "Motor controls, three-phase distribution, machine hookups, repairs." },
  { title: "Multi-Property / Landlord Work",   desc: "Recurring service across rental portfolios. One call, one invoice, one crew." },
];

const REVIEWS = [
  {
    name: "Amy Cregan",
    quote: "Mike has been awesome to work with. Great communication and very knowledgeable. I would definitely recommend him and his team!",
    job: "Panel upgrade · Barrington",
    date: "2025",
  },
  {
    name: "Lance Mercier",
    quote: "I didn't receive typical contractor hidden fees at the end of the job and price was always as discussed. Communication was always amazing as well.",
    job: "Generator install · Dover",
    date: "2024",
  },
  {
    name: "Kristina Brauch",
    quote: "We have used Daigle Electric for three projects now and have been highly satisfied through every interaction. Mike is prompt with coming out to quote and offers a great value for services rendered.",
    job: "Repeat customer · Lee",
    date: "2024",
  },
  {
    name: "Grant Parham",
    quote: "I cannot say enough good things about Mike and his team. Always very knowledgeable, on time and a fair price. Easy to communicate with and just out and out good guys.",
    job: "Kitchen reno wiring · Durham",
    date: "2024",
  },
  {
    name: "Homeowner, Rochester",
    quote: "Showed up early Saturday morning, fixed our panel, and was out before lunch. Charged exactly what he quoted. We'll call no one else.",
    job: "Saturday service call",
    date: "2023",
  },
  {
    name: "Landlord, Strafford County",
    quote: "I have a small portfolio of rentals and Mike handles everything electrical for me. Communicative, on time, fair. Worth his weight in copper.",
    job: "Property management",
    date: "2023",
  },
];

// ----- Small UI atoms -----

const Stars = ({ n = 5 }) => (
  <span className="stars" aria-label={`${n} out of 5 stars`}>
    {"★★★★★".slice(0, n)}<span style={{ opacity: 0.25 }}>{"★★★★★".slice(n)}</span>
  </span>
);

const PhoneIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z" />
  </svg>
);

const ArrowIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
);

const CheckIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M20 6 9 17l-5-5"/>
  </svg>
);

const PinIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>
  </svg>
);

const MailIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/>
  </svg>
);

const ClockIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
  </svg>
);

const GoogleG = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
    <path fill="#4285F4" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
    <path fill="#34A853" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
    <path fill="#EA4335" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
  </svg>
);

const ShieldIcon = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>
  </svg>
);

const BoltIcon = ({ size = 18 }) => (
  // Used sparingly; only inside license/insured badge — not as a brand element.
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M13 2 4 14h7l-2 8 9-12h-7l2-8Z"/>
  </svg>
);

// Composable CTA group used in hero + contact strip
const CtaPair = ({ tone = "dark", size = "xl", showQuote = true }) => (
  <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
    <a className={`btn btn--primary btn--${size}`} href={PHONE_HREF}>
      <PhoneIcon size={18}/> Call {PHONE_DISPLAY}
    </a>
    {showQuote && (
      <button
        className={`btn ${tone === "light" ? "btn--ghost-dark" : "btn--ghost"} btn--${size}`}
        onClick={() => window.__nav && window.__nav("contact")}
      >
        Request a Quote <ArrowIcon size={16}/>
      </button>
    )}
  </div>
);

// Proof strip — the same numbers, light vs dark variants
const ProofStrip = ({ variant = "elev" }) => (
  <section className={variant === "light" ? "section--light" : "proof"} aria-label="Trust signals">
    <div className="wrap">
      <div className="proof__row">
        <div className="proof__item">
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Stars/>
            <span className="proof__n">4.9</span>
          </div>
          <div className="proof__l">on Google · 16 reviews</div>
        </div>
        <div className="proof__item" style={{ flexDirection: "column", alignItems: "flex-start", gap: 0 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span className="proof__n" style={{ fontSize: 28 }}>25</span>
            <span style={{ fontFamily: "var(--head)", textTransform: "uppercase", letterSpacing: "0.16em", fontSize: 13, color: "var(--ink-3)" }}>Years in business</span>
          </div>
          <span className="y-rule" style={{ marginTop: 6 }}/>
        </div>
        <div className="proof__item">
          <PinIcon/>
          <div>
            <div className="proof__n" style={{ fontSize: 18 }}>NH · ME · MA</div>
            <div className="proof__l">Service area</div>
          </div>
        </div>
        <div className="proof__item">
          <ShieldIcon/>
          <div>
            <div className="proof__n" style={{ fontSize: 18 }}>Licensed &amp; Insured</div>
            <div className="proof__l">Owner-operated by Mike Daigle</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// Contact / quote-request block — used on most pages
const QuoteBlock = ({ id = "quote", variant = "dark" }) => {
  const light = variant === "light";
  return (
    <section id={id} className={"section " + (light ? "section--light" : "section--ink")}>
      <div className="wrap">
        <div className="grid-2" style={{ gap: 48, alignItems: "start" }}>
          <div>
            <div className="eyebrow" style={{ color: light ? "var(--blue-3)" : "var(--blue-2)" }}>Get a Quote</div>
            <h2 className="h-head h2 mt-12">No surprises.<br/>Just a real estimate.</h2>
            <p className="mt-16" style={{ maxWidth: 460, fontSize: 18, color: light ? "#333" : "var(--ink-2)" }}>
              Tell us about the job. Mike will follow up — usually same day — to set a time to come out.
              Price we quote is the price you pay.
            </p>

            <div className="mt-32" style={{ display: "grid", gap: 14 }}>
              <a href={PHONE_HREF} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <PhoneIcon size={22}/>
                <span className="phone-big" style={{ color: light ? "#0C0C0C" : "var(--ink)" }}>{PHONE_DISPLAY}</span>
              </a>
              <div style={{ display: "flex", alignItems: "center", gap: 12, color: light ? "#444" : "var(--ink-2)" }}>
                <MailIcon size={18}/> <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, color: light ? "#444" : "var(--ink-2)" }}>
                <PinIcon size={18}/> {ADDRESS_LINE1}, {ADDRESS_LINE2}
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, color: light ? "#444" : "var(--ink-2)" }}>
                <ClockIcon size={18}/> {HOURS_LINE1}
              </div>
            </div>
          </div>

          <QuoteForm variant={variant}/>
        </div>
      </div>
    </section>
  );
};

const QuoteForm = ({ variant = "dark" }) => {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    name: "", phone: "", email: "", town: "",
    job: "", details: "", when: "Within 2 weeks",
  });
  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));
  const light = variant === "light";
  const fieldClass = "field " + (light ? "field--light" : "");

  return (
    <div className={"card " + (light ? "card--light" : "")} style={{ padding: 28 }}>
      {/* CONTACT_FORM_PLACEHOLDER */}
      {step === 1 && (
        <form
          onSubmit={(e) => { e.preventDefault(); setStep(2); }}
          action="FORM_ENDPOINT"
          method="post"
        >
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
            <span className="eyebrow" style={{ color: light ? "var(--blue-3)" : "var(--blue-2)" }}>Quote Request · Step 1 of 2</span>
            <span style={{ fontSize: 13, color: light ? "#777" : "var(--ink-3)" }}>~ 60 seconds</span>
          </div>

          <div style={{ display: "grid", gap: 14 }}>
            <div className="grid-2" style={{ gap: 14 }}>
              <div className={fieldClass}>
                <label htmlFor="qf-name">Your name</label>
                <input id="qf-name" required value={data.name} onChange={set("name")} placeholder="First and last" />
              </div>
              <div className={fieldClass}>
                <label htmlFor="qf-phone">Phone</label>
                <input id="qf-phone" required type="tel" value={data.phone} onChange={set("phone")} placeholder="603-555-0119" />
              </div>
            </div>
            <div className="grid-2" style={{ gap: 14 }}>
              <div className={fieldClass}>
                <label htmlFor="qf-email">Email</label>
                <input id="qf-email" type="email" value={data.email} onChange={set("email")} placeholder="you@example.com" />
              </div>
              <div className={fieldClass}>
                <label htmlFor="qf-town">Town</label>
                <input id="qf-town" value={data.town} onChange={set("town")} placeholder="Barrington, NH" />
              </div>
            </div>
            <div className={fieldClass}>
              <label htmlFor="qf-job">What kind of work?</label>
              <select id="qf-job" value={data.job} onChange={set("job")}>
                <option value="">Choose one…</option>
                <option>Generator install</option>
                <option>Service / panel upgrade</option>
                <option>New construction wiring</option>
                <option>Renovation / addition</option>
                <option>Recessed lighting / fixtures</option>
                <option>Outlets / device work</option>
                <option>Commercial / industrial</option>
                <option>Multi-property / landlord</option>
                <option>Something else</option>
              </select>
            </div>
            <div className={fieldClass}>
              <label htmlFor="qf-details">Anything we should know?</label>
              <textarea id="qf-details" rows="3" value={data.details} onChange={set("details")} placeholder="Square footage, age of panel, brand of generator, anything weird…"/>
            </div>
          </div>

          <button type="submit" className="btn btn--primary btn--xl btn--block mt-24">
            Continue <ArrowIcon/>
          </button>
          <p style={{ fontSize: 12, color: light ? "#777" : "var(--ink-3)", marginTop: 10, marginBottom: 0 }}>
            By submitting you agree to be contacted by Daigle Electric about your request. No spam, ever.
          </p>
        </form>
      )}

      {step === 2 && (
        <form
          onSubmit={(e) => { e.preventDefault(); setStep(3); }}
          action="FORM_ENDPOINT"
          method="post"
        >
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
            <span className="eyebrow" style={{ color: light ? "var(--blue-3)" : "var(--blue-2)" }}>Quote Request · Step 2 of 2</span>
            <button type="button" onClick={() => setStep(1)} style={{ background: "transparent", border: 0, color: light ? "#666" : "var(--ink-3)", fontSize: 13 }}>← Back</button>
          </div>

          <div className={fieldClass}>
            <label>When are you looking to start?</label>
            <div style={{ display: "grid", gap: 8, gridTemplateColumns: "repeat(2,1fr)" }}>
              {["ASAP / Emergency","Within 2 weeks","Within 1–3 months","Just planning"].map((w) => (
                <button
                  type="button"
                  key={w}
                  onClick={() => setData((d) => ({ ...d, when: w }))}
                  className={"btn " + (data.when === w ? "btn--primary" : (light ? "btn--ghost-dark" : "btn--ghost"))}
                  style={{ fontSize: 13, padding: "12px 14px", minHeight: 48 }}
                >
                  {w}
                </button>
              ))}
            </div>
          </div>

          <div className={fieldClass + " mt-16"}>
            <label htmlFor="qf-addr">Job address (optional)</label>
            <input id="qf-addr" placeholder="Street, town, state" />
          </div>

          <button type="submit" className="btn btn--primary btn--xl btn--block mt-24">
            Send to Mike <ArrowIcon/>
          </button>
        </form>
      )}

      {step === 3 && (
        <div style={{ textAlign: "center", padding: "24px 8px" }}>
          <div style={{
            width: 64, height: 64, borderRadius: 999,
            background: "rgba(45,107,228,0.15)", color: "var(--blue-2)",
            display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16
          }}>
            <CheckIcon size={28}/>
          </div>
          <h3 className="h-head h3">Got it, {data.name?.split(" ")[0] || "thanks"}.</h3>
          <p className="mt-12" style={{ color: light ? "#444" : "var(--ink-2)", maxWidth: 380, margin: "12px auto 0" }}>
            Mike will call you back at <strong>{data.phone || "the number you gave"}</strong> — usually same day, always within one business day.
          </p>
          <div className="mt-24" style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <a href={PHONE_HREF} className="btn btn--primary">
              <PhoneIcon/> Or call now
            </a>
            <button className={"btn " + (light ? "btn--ghost-dark" : "btn--ghost")} onClick={() => setStep(1)}>
              Send another
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

// Featured testimonials trio
const ReviewsRow = ({ items = REVIEWS.slice(0,3), variant = "light" }) => {
  const light = variant === "light";
  return (
    <div className="grid-3">
      {items.map((r, i) => (
        <article key={i} className={"card " + (light ? "card--light" : "")}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <Stars n={5}/>
            <GoogleG size={18}/>
          </div>
          <p style={{ marginTop: 14, fontSize: 17, lineHeight: 1.5, color: light ? "#181818" : "var(--ink)" }}>
            “{r.quote}”
          </p>
          <div className="mt-24" style={{ borderTop: "1px solid " + (light ? "var(--light-2)" : "var(--line)"), paddingTop: 14 }}>
            <div className="h-head" style={{ fontSize: 16, letterSpacing: "0.06em" }}>{r.name}</div>
            <div style={{ fontSize: 13, color: light ? "#666" : "var(--ink-3)", marginTop: 2 }}>{r.job} · {r.date}</div>
          </div>
        </article>
      ))}
    </div>
  );
};

// Section header
const SectionHead = ({ eyebrow, title, sub, align = "left", variant = "dark" }) => {
  const light = variant === "light";
  return (
    <header style={{ maxWidth: align === "center" ? 720 : 760, margin: align === "center" ? "0 auto" : 0, textAlign: align }}>
      {eyebrow && <div className={"eyebrow " + (light ? "eyebrow--dark" : "")}>{eyebrow}</div>}
      <h2 className="h-head h2 mt-12">{title}</h2>
      {sub && <p className="mt-16" style={{ fontSize: 18, color: light ? "#444" : "var(--ink-2)" }}>{sub}</p>}
    </header>
  );
};

// Expose
Object.assign(window, {
  PHONE_DISPLAY, PHONE_HREF, EMAIL, ADDRESS_LINE1, ADDRESS_LINE2, HOURS_LINE1, HOURS_LINE2,
  TOWNS, RESI_SERVICES, COMM_SERVICES, REVIEWS,
  Stars, PhoneIcon, ArrowIcon, CheckIcon, PinIcon, MailIcon, ClockIcon, GoogleG, ShieldIcon, BoltIcon,
  CtaPair, ProofStrip, QuoteBlock, QuoteForm, ReviewsRow, SectionHead,
});