// Inner pages — Services, About, Service Area, Reviews, Contact

// Reusable page header
const PageHero = ({ eyebrow, title, sub, children }) => (
  <section className="section section--ink" style={{ paddingTop: 80, paddingBottom: 48, borderBottom: "1px solid var(--line)" }}>
    <div className="wrap">
      <div className="eyebrow">{eyebrow}</div>
      <h1 className="h-head h1 mt-12" style={{ maxWidth: 900 }}>{title}</h1>
      {sub && <p className="mt-16" style={{ fontSize: 19, color: "var(--ink-2)", maxWidth: 720 }}>{sub}</p>}
      {children && <div className="mt-32">{children}</div>}
    </div>
  </section>
);

// ============== Services ==============

const ServiceCard = ({ title, desc, idx, total }) => (
  <article className="card" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
      <div className="tile__num" style={{ fontSize: 12 }}>{String(idx + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}</div>
      <ArrowIcon/>
    </div>
    <h3 className="h-head" style={{ fontSize: 22, letterSpacing: "0.02em", marginTop: 8 }}>{title}</h3>
    <p style={{ color: "var(--ink-2)", margin: 0, fontSize: 15 }}>{desc}</p>
  </article>
);

const ServicesPage = () => (
  <main className="page-enter">
    <PageHero
      eyebrow="Services"
      title="Two clean lanes. One phone call."
      sub="Every job we run on the residential side and the commercial side. If you don't see exactly what you need, call — odds are we still handle it."
    >
      <CtaPair size="xl"/>
    </PageHero>

    <section className="section section--ink">
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <SectionHead
            eyebrow="01 — Residential"
            title="Homeowners &amp; landlords."
            sub="The work that keeps NH houses running. We handle the small surprise jobs and the big once-a-decade jobs."
          />
          <span className="pill">{RESI_SERVICES.length} services</span>
        </div>
        <div className="grid-3 mt-40">
          {RESI_SERVICES.map((s, i) => (
            <ServiceCard key={s.title} {...s} idx={i} total={RESI_SERVICES.length}/>
          ))}
        </div>
      </div>
    </section>

    <section className="section section--elev">
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <SectionHead
            eyebrow="02 — Commercial &amp; Industrial"
            title="Contractors &amp; property owners."
            sub="Build-outs, retrofits, machine hookups, and the recurring work that keeps a portfolio running."
          />
          <span className="pill">{COMM_SERVICES.length} services</span>
        </div>
        <div className="grid-2 mt-40" style={{ gap: 18 }}>
          {COMM_SERVICES.map((s, i) => (
            <ServiceCard key={s.title} {...s} idx={i} total={COMM_SERVICES.length}/>
          ))}
        </div>
      </div>
    </section>

    {/* Emergency strip */}
    <section className="section--xs section section--ink" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "var(--yellow)" }}/>
          <div>
            <div className="eyebrow">Power out? Burnt outlet? Breakers tripping?</div>
            <div style={{ fontFamily: "var(--head)", fontWeight: 800, fontSize: 22, letterSpacing: "0.02em", marginTop: 2 }}>
              Emergency service available after hours.
            </div>
          </div>
        </div>
        <a href={PHONE_HREF} className="btn btn--primary btn--xl"><PhoneIcon/> Call {PHONE_DISPLAY}</a>
      </div>
    </section>

    <ProofStrip/>
    <QuoteBlock/>
  </main>
);

// ============== About ==============

const AboutPage = () => (
  <main className="page-enter">
    <section className="section section--ink" style={{ paddingTop: 64, paddingBottom: 48 }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="ab-grid">
          <div>
            <div className="eyebrow">About</div>
            <h1 className="h-head h1 mt-12">25 years of<br/>honest electrical work.</h1>
            <p className="mt-24" style={{ fontSize: 19, color: "var(--ink-2)", maxWidth: 540 }}>
              Mike Daigle founded Daigle Electric in <strong style={{ color: "var(--ink)" }}>2000</strong>.
              Twenty-five years later he still picks up the phone, still comes out to quote the job,
              and still runs most of the wire himself — with a small, trained crew when it's time.
            </p>
          </div>
          <div className="hero-photo" style={{ aspectRatio: "4/5", maxWidth: 520, justifySelf: "end" }}>
            <img src="assets/mike.jpg" alt="Mike Daigle"/>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .ab-grid { grid-template-columns: 1fr !important; } .ab-grid .hero-photo { justify-self: stretch !important; max-width: 100% !important; } }`}</style>
    </section>

    <ProofStrip/>

    <section className="section section--light">
      <div className="wrap" style={{ maxWidth: 1080 }}>
        <div className="grid-2" style={{ gap: 48 }}>
          <div>
            <span className="pill pill--light">The pitch, in three lines</span>
            <h2 className="h-head h2 mt-16" style={{ color: "#0C0C0C" }}>No surprises.<br/>No runaround.<br/>We show up.</h2>
          </div>
          <div style={{ color: "#1a1a1a" }}>
            <p style={{ fontSize: 18, lineHeight: 1.65 }}>
              The number we quote is the number you pay. The day we say we're coming is the day we come.
              When something we said was 2 hours turns out to be 4, we eat the difference — that's the job.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, marginTop: 16 }}>
              That's been the business since 2000. It's why the reviews use Mike's first name and why landlords keep us
              on a single phone number across their whole portfolio.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section className="section section--ink">
      <div className="wrap" style={{ maxWidth: 1080 }}>
        <SectionHead eyebrow="The Story" title="How Daigle Electric got here."/>
        <div className="grid-2 mt-40" style={{ gap: 32, alignItems: "start" }}>
          <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 24 }}>
            {[
              { y: "2000", t: "Mike starts the business.", b: "Founds Daigle Electric LLC in Barrington, NH. Truck, ladder, license, phone number." },
              { y: "2008", t: "Generator installs become a signature.", b: "After a few bad NH ice storms, whole-home standbys take over a chunk of the calendar." },
              { y: "2015", t: "First multi-property landlord contract.", b: "Word-of-mouth across Strafford County builds a base of recurring property-management work." },
              { y: "2020", t: "ME &amp; MA work picks up.", b: "Crosses the borders for GCs and homeowners within ~60 min of the shop." },
              { y: "2026", t: "Still owner-operated.", b: "Mike still answers the phone. <!-- TODO: confirm wording with Mike on intake -->" },
            ].map((item, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "76px 1fr", gap: 20 }}>
                <div style={{
                  fontFamily: "var(--head)", fontWeight: 900, fontSize: 28, letterSpacing: "0.02em",
                  color: "var(--blue-2)"
                }}>{item.y}</div>
                <div>
                  <div className="h-head" style={{ fontSize: 20, letterSpacing: "0.02em" }} dangerouslySetInnerHTML={{__html: item.t}}/>
                  <p style={{ margin: "6px 0 0", color: "var(--ink-2)" }} dangerouslySetInnerHTML={{__html: item.b}}/>
                </div>
              </li>
            ))}
          </ol>

          <div className="card">
            <span className="pill" style={{ background: "rgba(245,197,24,0.10)", color: "var(--yellow)" }}>What we won't do</span>
            <ul style={{ margin: "16px 0 0", padding: 0, listStyle: "none", display: "grid", gap: 12 }}>
              {[
                "Quote a number we can't honor",
                "Pad an invoice with surprise line items",
                "Cut corners on grounding, GFCI, or labeling",
                "Send a salesman to your kitchen — Mike comes himself",
              ].map((t, i) => (
                <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ color: "var(--blue-2)" }}><CheckIcon/></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
            <div className="mt-32" style={{ paddingTop: 20, borderTop: "1px solid var(--line)" }}>
              <div className="eyebrow">Trust signals</div>
              <div className="mt-12" style={{ display: "grid", gap: 8, color: "var(--ink-2)" }}>
                <div>
                  <ShieldIcon size={14}/> &nbsp; Licensed in NH, ME &amp; MA
                  <span style={{ color: "var(--ink-3)", fontSize: 13 }}> &nbsp;·&nbsp; License numbers on request</span>
                </div>
                {/* TODO: confirm license numbers (NH/ME/MA) */}
                <div><ShieldIcon size={14}/> &nbsp; Fully insured · GL + workers' comp</div>
                <div><ShieldIcon size={14}/> &nbsp; Permits pulled on every applicable job</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <QuoteBlock/>
  </main>
);

// ============== Service Area ==============

const ServiceAreaPage = () => {
  // Group towns by state for nicer rendering.
  const nh = TOWNS.filter((t) => !t.includes("("));
  const me = TOWNS.filter((t) => t.includes("(ME)")).map((t) => t.replace(" (ME)", ""));
  const ma = TOWNS.filter((t) => t.includes("(MA)")).map((t) => t.replace(" (MA)", ""));

  return (
    <main className="page-enter">
      <PageHero
        eyebrow="Service Area"
        title="Strafford County core, ~60 min into ME &amp; MA."
        sub="If you're inside roughly an hour of Barrington, NH, we can quote your job. Not sure? Call — Mike will tell you straight."
      />

      <section className="section--sm section section--ink">
        <div className="wrap">
          <div className="grid-2" style={{ gap: 48, alignItems: "start" }}>

            {/* Hand-drawn-ish service area map */}
            <div className="card" style={{ padding: 0, overflow: "hidden", background: "#0F1A2E" }}>
              <div style={{ position: "relative" }}>
                <svg viewBox="0 0 600 480" width="100%" height="auto" style={{ display: "block" }} aria-label="Daigle Electric service area map">
                  {/* state-shape stylized backdrop */}
                  <defs>
                    <radialGradient id="hg" cx="50%" cy="50%" r="60%">
                      <stop offset="0%" stopColor="#5B8FF0" stopOpacity="0.32"/>
                      <stop offset="60%" stopColor="#2D6BE4" stopOpacity="0.08"/>
                      <stop offset="100%" stopColor="#2D6BE4" stopOpacity="0"/>
                    </radialGradient>
                    <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
                      <path d="M24 0H0V24" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="600" height="480" fill="url(#grid)"/>
                  {/* state outlines (stylized) */}
                  <path d="M210 60 L370 50 L380 130 L420 160 L430 250 L400 340 L380 420 L250 430 L180 380 L150 290 L160 200 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
                  <path d="M380 50 L530 60 L560 220 L520 360 L430 410 L420 250 L380 130 Z" fill="rgba(255,255,255,0.025)" stroke="rgba(255,255,255,0.15)" strokeWidth="1"/>
                  <path d="M150 290 L70 320 L60 410 L150 440 L250 430 L180 380 Z" fill="rgba(255,255,255,0.025)" stroke="rgba(255,255,255,0.15)" strokeWidth="1"/>

                  {/* state labels */}
                  <text x="265" y="190" fill="rgba(255,255,255,0.5)" fontFamily="Barlow Condensed, sans-serif" fontWeight="800" fontSize="14" letterSpacing="2">NH</text>
                  <text x="465" y="160" fill="rgba(255,255,255,0.5)" fontFamily="Barlow Condensed, sans-serif" fontWeight="800" fontSize="14" letterSpacing="2">ME</text>
                  <text x="100" y="400" fill="rgba(255,255,255,0.5)" fontFamily="Barlow Condensed, sans-serif" fontWeight="800" fontSize="14" letterSpacing="2">MA</text>

                  {/* radius halo from Barrington */}
                  <circle cx="290" cy="295" r="170" fill="url(#hg)"/>
                  <circle cx="290" cy="295" r="170" fill="none" stroke="rgba(91,143,240,0.45)" strokeWidth="1" strokeDasharray="4 6"/>
                  <circle cx="290" cy="295" r="100" fill="none" stroke="rgba(91,143,240,0.5)" strokeWidth="1" strokeDasharray="2 4"/>

                  {/* town pins */}
                  {[
                    { x: 290, y: 295, k: "shop", l: "Barrington (HQ)" },
                    { x: 310, y: 270, l: "Dover" }, { x: 270, y: 265, l: "Durham" },
                    { x: 250, y: 305, l: "Lee" },   { x: 280, y: 245, l: "Madbury" },
                    { x: 240, y: 270, l: "Newmarket" }, { x: 305, y: 235, l: "Rochester" },
                    { x: 330, y: 280, l: "Somersworth" }, { x: 260, y: 230, l: "Strafford" },
                    { x: 215, y: 290, l: "Northwood" },
                    { x: 360, y: 290, l: "Berwick, ME" }, { x: 380, y: 320, l: "Kittery, ME" },
                    { x: 350, y: 360, l: "Portsmouth" },
                    { x: 230, y: 380, l: "Haverhill, MA" }, { x: 280, y: 400, l: "Newburyport, MA" },
                  ].map((p, i) => (
                    <g key={i}>
                      <circle cx={p.x} cy={p.y} r={p.k === "shop" ? 7 : 4} fill={p.k === "shop" ? "var(--yellow)" : "var(--blue-2)"} />
                      <text x={p.x + 9} y={p.y + 4}
                            fill={p.k === "shop" ? "var(--yellow)" : "rgba(255,255,255,0.78)"}
                            fontFamily="Inter, sans-serif" fontSize={p.k === "shop" ? 13 : 11} fontWeight={p.k === "shop" ? 700 : 500}>
                        {p.l}
                      </text>
                    </g>
                  ))}
                </svg>
              </div>
              <div style={{ padding: "16px 18px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", color: "var(--ink-3)", fontSize: 13 }}>
                <span><span style={{ color: "var(--yellow)" }}>●</span> &nbsp;HQ — 376 Calef Hwy</span>
                <span><span style={{ color: "var(--blue-2)" }}>●</span> &nbsp;Towns we work in regularly</span>
              </div>
            </div>

            <div>
              <SectionHead eyebrow="Towns we cover" title="If you're on this list — or near it — call."/>
              <div className="mt-32">
                <div className="eyebrow eyebrow--ink" style={{ marginBottom: 10 }}>New Hampshire</div>
                <div className="taglist">
                  {nh.map((t) => <span key={t} className="pill" style={{ background: "rgba(255,255,255,0.05)", color: "var(--ink-2)" }}>{t}</span>)}
                </div>
              </div>
              <div className="mt-32">
                <div className="eyebrow eyebrow--ink" style={{ marginBottom: 10 }}>Maine</div>
                <div className="taglist">
                  {me.map((t) => <span key={t} className="pill" style={{ background: "rgba(255,255,255,0.05)", color: "var(--ink-2)" }}>{t}</span>)}
                </div>
              </div>
              <div className="mt-32">
                <div className="eyebrow eyebrow--ink" style={{ marginBottom: 10 }}>Massachusetts</div>
                <div className="taglist">
                  {ma.map((t) => <span key={t} className="pill" style={{ background: "rgba(255,255,255,0.05)", color: "var(--ink-2)" }}>{t}</span>)}
                </div>
              </div>

              <div className="mt-40" style={{ padding: 18, border: "1px solid var(--line)", borderRadius: 6, background: "var(--bg-elev)" }}>
                <div className="eyebrow">Not on the list?</div>
                <p style={{ margin: "8px 0 0", color: "var(--ink-2)" }}>
                  We've been further. Call <a href={PHONE_HREF} style={{ color: "var(--ink)", borderBottom: "1px solid var(--blue-2)" }}>{PHONE_DISPLAY}</a> and ask — Mike will tell you yes or no in 30 seconds.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <QuoteBlock/>
    </main>
  );
};

// ============== Reviews ==============

const ReviewsPage = () => (
  <main className="page-enter">
    <PageHero
      eyebrow="Reviews"
      title="4.9 stars. 16 reviews. Mike's name in every single one."
      sub="Every review here is verbatim from Google. We don't pay for them, we don't filter them, and we don't write them."
    >
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <a className="btn btn--primary btn--xl" href="https://www.google.com/search?q=Daigle+Electric+Barrington+NH" target="_blank" rel="noreferrer">
          <GoogleG/> Leave a review on Google
        </a>
        <a className="btn btn--ghost btn--xl" href={PHONE_HREF}><PhoneIcon/> {PHONE_DISPLAY}</a>
      </div>
    </PageHero>

    <section className="section section--light">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }} className="rev-stats">
          <div className="stat">
            <div className="stat__n" style={{ color: "#0C0C0C" }}>4.9<span style={{ fontSize: "0.6em", color: "var(--yellow)" }}> ★</span></div>
            <div className="stat__l" style={{ color: "#555" }}>Average rating</div>
          </div>
          <div className="stat">
            <div className="stat__n" style={{ color: "#0C0C0C" }}>16</div>
            <div className="stat__l" style={{ color: "#555" }}>Google reviews</div>
          </div>
          <div className="stat">
            <div className="stat__n" style={{ color: "#0C0C0C" }}>100%</div>
            <div className="stat__l" style={{ color: "#555" }}>4★ or higher</div>
          </div>
          <div className="stat">
            <div className="stat__n" style={{ color: "#0C0C0C" }}>25y</div>
            <div className="stat__l" style={{ color: "#555" }}>In business</div>
          </div>
        </div>
        <hr className="rule rule--light mt-40"/>
        <div className="grid-3 mt-40">
          {REVIEWS.map((r, i) => (
            <article key={i} className="card card--light">
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <Stars/>
                <GoogleG size={18}/>
              </div>
              <p style={{ marginTop: 14, fontSize: 17, lineHeight: 1.5, color: "#181818" }}>“{r.quote}”</p>
              <div className="mt-24" style={{ borderTop: "1px solid var(--light-2)", paddingTop: 14 }}>
                <div className="h-head" style={{ fontSize: 16, letterSpacing: "0.06em" }}>{r.name}</div>
                <div style={{ fontSize: 13, color: "#666", marginTop: 2 }}>{r.job} · {r.date}</div>
              </div>
            </article>
          ))}
        </div>

        {/* TODO: paginate or surface remaining 10 reviews once attribution is confirmed */}

        <div className="mt-40" style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
          <a className="btn btn--primary btn--xl" href="https://www.google.com/search?q=Daigle+Electric+Barrington+NH" target="_blank" rel="noreferrer">
            <GoogleG/> Read all on Google
          </a>
        </div>
      </div>
      <style>{`@media (max-width: 720px) { .rev-stats { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </section>

    <QuoteBlock/>
  </main>
);

// ============== Contact ==============

const ContactPage = () => (
  <main className="page-enter">
    <PageHero
      eyebrow="Contact"
      title="Get a real estimate from a real electrician."
      sub="Two ways to reach us. Pick whichever's easier."
    />

    <section className="section section--ink">
      <div className="wrap">
        <div className="grid-2" style={{ gap: 48, alignItems: "start" }}>
          {/* Direct contact */}
          <div>
            <div className="card" style={{ padding: 32 }}>
              <span className="pill">Option 1</span>
              <h3 className="h-head h3 mt-16">Call Mike direct.</h3>
              <p style={{ color: "var(--ink-2)" }}>
                Fastest path. Mike answers Mon–Fri during business hours and returns voicemails the same day.
              </p>
              <a href={PHONE_HREF} className="mt-16" style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{
                  width: 56, height: 56, borderRadius: 999, background: "var(--blue)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}>
                  <PhoneIcon size={22}/>
                </span>
                <span className="phone-big">{PHONE_DISPLAY}</span>
              </a>
              <div className="mt-24" style={{ display: "grid", gap: 10, color: "var(--ink-2)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <MailIcon/> <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <ClockIcon/> <span>Mon–Fri · 7:00 AM – 3:30 PM</span>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--yellow)" }}>
                  <BoltIcon/> <span>Emergency service available after hours</span>
                </div>
              </div>
            </div>

            <div className="card mt-24" style={{ padding: 0, overflow: "hidden" }}>
              <div style={{ padding: 24 }}>
                <span className="pill">Visit</span>
                <h3 className="h-head h3 mt-16">376 Calef Hwy</h3>
                {/* TODO: confirm address — 232 vs 376 Calef Hwy */}
                <p style={{ color: "var(--ink-2)", margin: "6px 0 0" }}>Barrington, NH 03825</p>
                <a className="btn btn--ghost mt-16" href="https://maps.google.com/?q=376+Calef+Hwy+Barrington+NH" target="_blank" rel="noreferrer">
                  Get directions <ArrowIcon/>
                </a>
              </div>
              {/* Stylized map placeholder */}
              <div style={{ height: 200, background: "#10182A", position: "relative", borderTop: "1px solid var(--line)" }}>
                <svg viewBox="0 0 400 200" width="100%" height="100%" preserveAspectRatio="none">
                  <defs>
                    <pattern id="mgrid" width="20" height="20" patternUnits="userSpaceOnUse">
                      <path d="M20 0H0V20" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="400" height="200" fill="url(#mgrid)"/>
                  <path d="M0 110 Q 80 80 180 100 T 400 90" stroke="rgba(91,143,240,0.4)" strokeWidth="3" fill="none"/>
                  <path d="M0 140 Q 100 130 200 145 T 400 130" stroke="rgba(91,143,240,0.25)" strokeWidth="2" fill="none"/>
                  <path d="M120 0 L 130 200" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
                  <path d="M260 0 L 270 200" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
                  <circle cx="200" cy="105" r="10" fill="var(--blue)" stroke="#fff" strokeWidth="2"/>
                  <text x="216" y="109" fill="#fff" fontFamily="Inter, sans-serif" fontSize="12" fontWeight="600">Daigle Electric</text>
                </svg>
              </div>
            </div>
          </div>

          {/* Quote form */}
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <span className="pill">Option 2</span>
              <span style={{ color: "var(--ink-3)", fontSize: 14 }}>Mike calls you back, usually same day.</span>
            </div>
            <QuoteForm/>

            {/* BOOKING_CALENDAR_PLACEHOLDER */}
          </div>
        </div>
      </div>
    </section>

    <ProofStrip/>
  </main>
);

Object.assign(window, { PageHero, ServicesPage, AboutPage, ServiceAreaPage, ReviewsPage, ContactPage });