const { Wordmark, Button, Card } = window.VoxAwenDesignSystem_e48818;

const offerings = [
  {
    key: "offerings",
    eyebrow: "Witness & Nourish",
    title: "Graceful Ignited Bodies",
    /* Two paragraphs rather than one line, as Companion Voices below also has;
       Marketing Consultancy still carries a single string. OfferLine takes either. */
    line: [
      "A deeply restorative session — including massage, body wrapping and sound — that honours the thresholds all of us transition through in life, the range of emotions they evoke, and the expansion they ask of us.",
      "This session fulfils the function of a Rite of Passage — a space of deep witness that allows for emotional and spiritual processing, and connection back to your inner wisdom.",
    ],
    image: "public/graceful-ignited-bodies.jpg",
    alt: "A wrapping and massage ceremony held outdoors",
  },
  {
    key: "end-of-life",
    eyebrow: "Singing for the dying",
    title: "Companion Voices",
    line: [
      "Bedside singing, offered free of charge by a small group of trained volunteers to anyone approaching the end of life.",
      "At the end of life, when words often become insufficient, song can still reach places beyond language.",
    ],
    image: "public/companion-voices.png",
    alt: "Hands held together, an elder's and a younger person's",
  },
  {
    key: "consultancy",
    eyebrow: "Strategy & Growth",
    title: "Marketing Consultancy",
    line: "Drawing on ten years in financial marketing, I offer flexible support across strategy, operations, campaigns and events — tailored to businesses of any size, from a single project to ongoing partnership.",
    image: "public/creative-consultancy.jpg",
    alt: "Marketing consultancy work in progress",
  },
];

/* Shelved: the first offerings module — three abreast on one dark band, the
   choice taken in at a glance, stacking to squares on a phone. Not rendered.
   To bring it back, render <OfferingsRow onNav={onNav} /> in place of the .o2
   section in Home and move id="work-together" onto it. Its styles are still in
   home.css under .home-offerings / .home-offer. */
function OfferingsRow({ onNav }) {
  const offersRef = useEntryProgress("--op", 0.5);
  return (
    <section id="work-together" className="home-offerings" style={{ scrollMarginTop: 76 }}>
      <div className="home-offerings-head">
        <Eyebrow onDark>Offerings</Eyebrow>
        <h2 style={{ font: "var(--text-h2)", color: "var(--text-on-dark)", margin: 0 }}>Work with me</h2>
      </div>

      <div className="home-offer-row" ref={offersRef}>
        {offerings.map((o, i) => (
          <a className="home-offer" key={o.key} style={{ "--i": i }}
            href={"#" + o.key} onClick={(e) => { e.preventDefault(); onNav(o.key); }}>
            <div className="home-offer-figure">
              <img src={o.image} alt={o.alt} loading="lazy" />
            </div>
            <div className="home-offer-copy">
              <Eyebrow onDark>{o.eyebrow}</Eyebrow>
              <h3 className="home-offer-title">{o.title}</h3>
              <OfferLine line={o.line} className="home-offer-line" />
              <span className="home-offer-more">Learn more →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* An offering's line, which is one string for two of them and several paragraphs
   for the third. */
function OfferLine({ line, className }) {
  const paras = Array.isArray(line) ? line : [line];
  return paras.map((t, i) => <p className={className} key={i}>{t}</p>);
}

function Home({ onNav }) {
  const IMG = "assets/imagery/";
  const aboutRef = useEntryProgress("--ap", 0.42);
  const offers2Ref = useEntryProgress("--o2p", 0.5);
  /* Drives the curved hand-off at the top of the offerings band, and the rule
     that drops under its heading. Kept separate from --o2p so the cards' own
     stagger keeps the timing it was tuned to. */
  const offersCurveRef = useEntryProgress("--o2c", 0.55);
  return (
    <section id="home">
      {/* Hero — full-bleed dusk veil */}
      <ScrollReveal
        id="home-hero"
        image="public/test-image1.png"
        alt="A figure holding a black veil in desert wind at dusk"
        mark={["VOX", "AWEN"]}
        markSize="19.69vw"
        markSizeSm="33.5vw"
        title={["Voice.", "Ignite.", "Uplift."]}
        copy="Presence and tenderness at life's thresholds."
        label="Vox Awen — Esther Wilson"
      />

      {/* Everything below rises as one over the pinned hero, once the words clear */}
      <div className="rise">
      {/* Marks where this section starts covering the hero, so the nav knows
          when to stop being transparent. */}
      <div data-nav-sentinel aria-hidden="true" />

      {/* About — a dark band interrupting the beige. The portrait is the only
          asset for this module, so it is held tall and unadorned rather than
          cropped into a landscape, and rises into the frame on scroll. */}
      <section id="about-preview" className="home-about" style={{ scrollMarginTop: 76 }} ref={aboutRef}>
        <div className="home-about-figure">
          <img src="public/esther-wilson-about-me.jpg" alt="Esther Wilson holding a frame drum" />
        </div>
        <div className="home-about-copy">
            <Eyebrow>About me</Eyebrow>
            <h2 className="home-about-title">Hi! I’m Esther</h2>
            {/* PLACEHOLDER: standing in at roughly the length of the real
                paragraph, so the band keeps its proportions while the copy is
                being written. The line it replaced is in the copy document. */}
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            </p>
            <div className="home-about-social">
              <a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="3" />
                  <line x1="7.5" y1="10.5" x2="7.5" y2="16.5" />
                  <circle cx="7.5" cy="7" r="0.6" fill="currentColor" stroke="none" />
                  <path d="M11.5 16.5v-4a2.2 2.2 0 0 1 4.4 0v4" />
                  <line x1="11.5" y1="10.5" x2="11.5" y2="16.5" />
                </svg>
              </a>
              <a href="https://www.instagram.com/vox.awen/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="5" />
                  <circle cx="12" cy="12" r="4" />
                  <circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" stroke="none" />
                </svg>
              </a>
            </div>
          <Button variant="ghost" onClick={() => onNav("about")}>More about me →</Button>
        </div>
      </section>

      {/* Offerings — one lead card and two beside it. The three-abreast version
          is kept as OfferingsRow above; swap the two here to bring it back.
          The band's dark ground rises over the About photograph as a curve
          rather than a ruled edge — see .o2::before. */}
      <section id="work-together" className="o2" style={{ scrollMarginTop: 76 }} ref={offersCurveRef}>
        <div className="home-offerings-head">
          <Eyebrow onDark>Offerings</Eyebrow>
          <h2 style={{ font: "var(--text-h2)", color: "var(--text-on-dark)", margin: 0 }}>Work with me</h2>
        </div>

        <div className="o2-grid" ref={offers2Ref}>
          <a className="o2-card o2-card--lead" style={{ "--i": 0 }}
            href={"#" + offerings[0].key} onClick={(e) => { e.preventDefault(); onNav(offerings[0].key); }}>
            <div className="o2-figure"><img src={offerings[0].image} alt={offerings[0].alt} loading="lazy" /></div>
            <div className="o2-copy">
              <Eyebrow onDark>{offerings[0].eyebrow}</Eyebrow>
              <h3 className="o2-title">{offerings[0].title}</h3>
              <OfferLine line={offerings[0].line} className="o2-line" />
              <span className="o2-more">Learn more →</span>
            </div>
          </a>

          <div className="o2-side">
            {offerings.slice(1).map((o, i) => (
              <a className="o2-card o2-card--side" key={o.key} style={{ "--i": i + 1 }}
                href={"#" + o.key} onClick={(e) => { e.preventDefault(); onNav(o.key); }}>
                <div className="o2-figure"><img src={o.image} alt={o.alt} loading="lazy" /></div>
                <div className="o2-copy">
                  <Eyebrow onDark>{o.eyebrow}</Eyebrow>
                  <h3 className="o2-title">{o.title}</h3>
                  <OfferLine line={o.line} className="o2-line" />
                  <span className="o2-more">Learn more →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* One voice, held on a photograph — see home.css for why this is an
          image band rather than a panel. */}
      <section className="home-quote">
        <img src="public/gib/final.jpg" alt="Feet bound in a woven scarf, resting on the grass beside a frame drum" loading="lazy" />
        <div className="home-quote-scrim" />
        <div className="home-quote-inner">
          <blockquote className="home-quote-line">
            {"\u201CA moment of pure surrender. Esther took me on a deep journey inwards. I received so much gentleness, joy, and love from Esther, it allowed my body to "}
            <span className="home-quote-hl">fully let go</span>
            {"... it's hard to put into words how deeply this "}
            <span className="home-quote-hl">{"\u2018holding\u2019"}</span>
            {" has supported me through a difficult time of change.\u201D"}
          </blockquote>
          <span className="home-quote-name">Anita</span>
          <a className="home-quote-source" href="#offerings"
            onClick={(e) => { e.preventDefault(); onNav("offerings"); }}>
            on Graceful Ignited Bodies →
          </a>
        </div>
      </section>

      </div>
    </section>
  );
}

Object.assign(window, { Home });