const DSm = window.PolishedAmpPinnedDesignSystem_6a1c01;

function Morning({ go }) {
  const { SectionHead, Pillar, Block, Button, PhotoFrame, Eyebrow } = DSm;
  return (
    <window.Page current="morning" go={go}>
      <window.Section>
        <SectionHead headline="Wedding morning hair" size="40px" lede="On-location styling for you and your wedding party, with a written timeline before the day." />
      </window.Section>

      <window.Section tone="ink" rule={false}>
        <SectionHead tone="inverse" headline="What you can expect" size="34px" style={{ marginBottom: "var(--space-7)" }} />
        <div className="pp-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "2px", background: "rgba(239,237,231,.14)", border: "1px solid rgba(239,237,231,.14)" }}>
          <Pillar tone="inverse" word="Early arrival" fear="Will she actually show up?">We arrive ahead of call time. Your timeline is written and shared weeks in advance.</Pillar>
          <Pillar tone="inverse" word="Your style" fear="Will I look like myself?">Your reference photo is a starting point. The trial helps us find the style that works for your hair.</Pillar>
          <Pillar tone="inverse" word="Lasting hold" fear="Will it fall out by dinner?">Your style is pinned, checked before we leave, and supported with a touch-up kit.</Pillar>
        </div>
      </window.Section>

      <window.Section>
        <div className="pp-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--stack-gap)" }}>
          <Block padding="34px 36px">
            <Eyebrow style={{ marginBottom: "var(--space-5)" }}>What&rsquo;s included</Eyebrow>
            <window.PinBullets items={[
              "A trial, booked as its own appointment",
              "A written hair timeline for the day",
              "Hair for you and your party, on that schedule",
              "Veil, hair accessory, and clip-in extension placement",
              "A touch-up kit left behind",
              "Care and prep instructions the week before"
            ]} />
          </Block>
          <Block surface="outline" padding="34px 36px">
            <Eyebrow style={{ marginBottom: "var(--space-5)" }}>What&rsquo;s not included</Eyebrow>
            <p>Hair only. Makeup, photography, and wedding planning are not part of this service.</p>
            <p style={{ marginTop: "var(--space-4)" }}>If you need makeup, we can share recommendations.</p>
            <p style={{ marginTop: "var(--space-4)", color: "var(--text-secondary)" }}>We accept one wedding per day so your start time is protected.</p>
          </Block>
        </div>
      </window.Section>

      <window.Section tone="tulle" rule={false}>
        <div className="pp-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "center" }}>
          <SectionHead headline="Your wedding-day timeline" size="34px" lede="Your running order is confirmed before the day, so everyone knows when to be ready." />
          <PhotoFrame src="../../assets/photos/braided-updo-path.jpg" alt="Bride walking a field path, braided low updo seen from behind" ratio="4 / 5" />
        </div>
      </window.Section>

      <window.Section>
        <SectionHead headline="Frequently asked questions" size="34px" style={{ marginBottom: "var(--space-7)" }} />
        <div style={{ maxWidth: "var(--content-narrow)" }}>
          <FaqItem
            question="Do you work with hair extensions?"
            answer="Yes. We prep, place, and blend your clip-in extensions on the wedding morning at no extra charge. If you’re unsure what to buy, we advise on length, weight, and colour matching at the trial."
          />
          <FaqItem
            question="How should the bridal party prep their hair?"
            answer="Hair should be clean, 100% dry, and washed the night before. Avoid heavy oils, leave-in serums, or flat irons. Please wear a button-up shirt or robe so nothing has to pull over styled hair."
          />
          <FaqItem
            question="Do you style mothers of the bride or groom?"
            answer="Yes. Mothers and grandmothers are warmly welcomed in the party count, whether they would like a low updo, half-up waves, or a soft blowout style."
          />
          <FaqItem
            question="What happens if our party headcount changes?"
            answer="You can adjust your bridal party count up or down until eight weeks before the wedding date, as long as the start time and running order can accommodate the morning schedule."
          />
          <FaqItem
            question="Do you stay until the veil is placed?"
            answer="Always. We never pack down before your veil, accessories, and comb are pinned, tested, and secure. A touch-up kit is also left behind for the rest of your day."
          />
        </div>
      </window.Section>

      <window.Section rule={false} style={{ paddingBottom: "var(--space-10)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-8)", flexWrap: "wrap" }}>
          <h2 className="pp-subhead" style={{ maxWidth: "22ch" }}>Check availability for your wedding date.</h2>
          <Button onClick={() => go("enquire")}>Start an enquiry</Button>
        </div>
      </window.Section>
    </window.Page>
  );
}

function FaqItem({ question, answer }) {
  const [open, setOpen] = React.useState(false);
  const id = React.useId();
  return (
    <div style={{ borderBottom: "1px solid var(--line-hairline)", padding: "18px 0" }}>
      <button
        type="button"
        onClick={() => setOpen(!open)}
        aria-expanded={open}
        aria-controls={id}
        style={{
          width: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: "16px",
          background: "none",
          border: "none",
          padding: 0,
          textAlign: "left",
          cursor: "pointer",
          color: "var(--ink)",
          fontFamily: "var(--font-display)",
          fontSize: "20px",
          lineHeight: 1.2
        }}
      >
        <span>{question}</span>
        <span style={{ fontSize: "20px", color: "var(--brass)", fontWeight: 300, flexShrink: 0, width: "24px", textAlign: "right" }}>
          {open ? "−" : "+"}
        </span>
      </button>
      {open && (
        <div id={id} role="region" aria-label={question}>
          <p style={{ margin: "14px 0 6px", fontSize: "var(--size-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-body)", maxWidth: "var(--measure)" }}>
            {answer}
          </p>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Morning });