const DSh = window.PolishedAmpPinnedDesignSystem_6a1c01;

function Home({ go }) {
  const { Button, SectionHead, PhotoFrame, StepRow } = DSh;
  return (
    <window.Page current="home" go={go}>
      <div className="pp-site-hero" style={{ position: "relative", background: "var(--surface-block)", minHeight: "clamp(520px, 72vh, 720px)", display: "flex", alignItems: "center", padding: "var(--space-9) var(--page-gutter)" }}>
        <div className="pp-stack" style={{ maxWidth: "var(--content-max)", margin: "0 auto", width: "100%", display: "grid", gridTemplateColumns: "minmax(0, .86fr) minmax(320px, 1fr)", gap: "clamp(44px, 7vw, 92px)", alignItems: "center" }}>
          <div>
          <h1 className="pp-hero pp-rise" style={{ margin: 0, maxWidth: "10ch", fontSize: "clamp(48px, 7.1vw, 88px)", lineHeight: 0.91, letterSpacing: "-0.025em", textWrap: "balance" }}>
            <span style={{ display: "block" }}>Bridal hair</span>
            <em style={{ display: "block", color: "var(--text-secondary)" }}>in the GTA.</em>
          </h1>
          <p className="pp-lede pp-rise" style={{ marginTop: "var(--space-6)", maxWidth: "44ch", textWrap: "pretty", animationDelay: "80ms" }}>
            On-location hair styling for you and your wedding party. One wedding per day.
          </p>
          <div className="pp-rise pp-cta-group" style={{ marginTop: "var(--space-7)", display: "flex", flexWrap: "wrap", gap: "var(--space-3)", animationDelay: "160ms" }}>
            <Button onClick={() => go("enquire")}>Start an enquiry</Button>
            <Button variant="secondary" onClick={() => go("work")}>See recent work</Button>
          </div>
          <p className="pp-rise" style={{ margin: "var(--space-6) 0 0", fontSize: "10px", fontWeight: "var(--weight-medium)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-secondary)", animationDelay: "240ms" }}>Hair only <span style={{ color: "var(--brass)", margin: "0 .8em" }}>·</span> On location <span style={{ color: "var(--brass)", margin: "0 .8em" }}>·</span> One wedding per day</p>
          </div>
          <img src="../../assets/photos/walking-out-back.jpg" alt="Bride walking away across grass with the flower girl, braided low updo pinned at the nape" width="750" height="938" fetchPriority="high" decoding="async" style={{ display: "block", width: "100%", height: "auto", maxHeight: "620px", aspectRatio: "4 / 5", objectFit: "cover", objectPosition: "center 42%" }} />
        </div>
      </div>

      <window.Section>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: "var(--space-7)", marginBottom: "var(--space-7)" }}>
          <h2 className="pp-headline" style={{ fontSize: "clamp(36px, 4.6vw, 48px)", maxWidth: "12ch" }}>Recent work</h2>
          <a href="#work" onClick={(e) => { e.preventDefault(); go("work"); }} style={{ fontSize: "12px", flexShrink: 0 }}>View gallery</a>
        </div>
        <div className="pp-stack" style={{ display: "grid", gridTemplateColumns: "1.08fr .84fr 1.08fr", gap: "var(--stack-gap)", alignItems: "start" }}>
          <PhotoFrame src="../../assets/photos/chignon-low-back.jpg" alt="Low chignon pinned at the nape, seen from behind" ratio="4 / 5" caption="Low chignon, pinned at the nape · Kortright, June" />
          <PhotoFrame className="pp-gallery-middle" src="../../assets/photos/hands-working-bw.jpg" alt="Noelle sectioning a bride’s hair mid-set" ratio="3 / 4" caption="Trial, natural light · Leslieville" style={{ marginTop: "var(--space-8)" }} />
          <PhotoFrame src="../../assets/photos/party-done-waiting.jpg" alt="Bride and her party finished and waiting in the getting-ready room" ratio="4 / 5" caption="The party, done and waiting · Niagara" />
        </div>
      </window.Section>

      <window.Section>
        <div className="pp-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: "var(--space-9)", alignItems: "start" }}>
          <SectionHead headline="What&rsquo;s included" size="var(--size-headline)" />
          <window.PinBullets items={[
            "A trial, treated as a proper appointment rather than an audition",
            "A written hair timeline, shared with you and your planner",
            "Hair for you and your party, on that schedule",
            "Veil, hair accessory, and clip-in extension placement",
            "A touch-up kit left behind — pins, spray, a spare comb",
            "Care and prep instructions in the week before"
          ]} />
        </div>
      </window.Section>

      <window.Section tone="tulle" rule={false}>
        <SectionHead headline="How booking works" lede="Three steps from your enquiry to your wedding day." size="var(--size-headline)" style={{ marginBottom: "var(--space-7)" }} />
        <StepRow when="First" title="Consultation">We confirm your date, location, party size, and quote before you book.</StepRow>
        <StepRow when="Then" title="Trial">A separate appointment to test your style, accessories, and extensions.</StepRow>
        <StepRow when="The day" title="Wedding day" divider={false}>We arrive before your scheduled start time and follow the written schedule for your party.</StepRow>
      </window.Section>

      <window.Section>
        <div className="pp-stack" style={{ display: "grid", gridTemplateColumns: ".75fr 1fr", gap: "var(--space-9)", alignItems: "end" }}>
          <PhotoFrame src="../../assets/photos/rollers-in-the-room.jpg" alt="Setting rollers through long dark hair before the pin-up" ratio="4 / 5" />
          <div>
            <SectionHead headline="Meet Noelle" size="clamp(38px, 4.8vw, 48px)" style={{ marginBottom: "var(--space-6)" }} />
            <p className="pp-lede" style={{ margin: "0 0 var(--space-5)", maxWidth: "56ch", textWrap: "pretty" }}>
              I provide hair styling only, on location, for one wedding each day.
            </p>
            <p style={{ margin: "0 0 var(--space-7)", maxWidth: "56ch", textWrap: "pretty" }}>
              You&rsquo;ll receive the timeline six weeks before the wedding. At the trial, we confirm what will work for your hair, accessories, and hold.
            </p>
            <a href="#morning" onClick={(e) => { e.preventDefault(); go("morning"); }} style={{ fontSize: "12px" }}>How the morning works</a>
          </div>
        </div>
      </window.Section>

      <window.Section>
          <SectionHead headline="Service area" size="var(--size-headline)" style={{ marginBottom: "var(--space-6)" }} />
        <p style={{ margin: 0, maxWidth: "50ch", fontFamily: "var(--font-display)", fontSize: "23px", lineHeight: 1.5, textWrap: "pretty", color: "var(--text-secondary)" }}>
          Toronto and the inner suburbs: North York, Etobicoke, Scarborough, East York. West through Mississauga, Oakville, Burlington and Brampton. North to Vaughan, Markham, Richmond Hill, Aurora and Newmarket. East to Pickering, Ajax, Whitby and Oshawa. Niagara, Muskoka and Prince Edward County by arrangement.
        </p>
        <p style={{ margin: "var(--space-7) 0 0", maxWidth: "56ch", fontSize: "var(--size-body-sm)", lineHeight: "var(--leading-body-sm)", textWrap: "pretty" }}>
          Travel is quoted per wedding. For locations more than ninety minutes away, we arrive the night before to protect your start time.
        </p>
      </window.Section>

      <window.Section rule={false} style={{ paddingBottom: "var(--space-10)" }}>
        <div className="pp-stack" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "var(--space-9)", alignItems: "center" }}>
          <SectionHead headline="Enquire about your wedding date" size="var(--size-headline)" />
          <div>
            <p style={{ marginBottom: "var(--space-6)" }}>Pricing is tailored to your wedding, party size, schedule, and travel distance. Enquire for a quote.</p>
            <Button onClick={() => go("enquire")}>Start an enquiry</Button>
          </div>
        </div>
      </window.Section>
    </window.Page>
  );
}

Object.assign(window, { Home });