const { Button } = window.VoxAwenDesignSystem_e48818;

// In-page contents, offered from the nav while this page is showing.
const ccSections = [
  { id: "cc-what",  label: "What this is" },
  { id: "cc-next",  label: "Get in touch", flush: true },
];

function Consultancy({ onNav }) {
  return (
    <section id="consultancy" style={{ scrollMarginTop: 76 }}>

      {/* Hero — same pinned reveal as the other offering pages */}
      <ScrollReveal
        image="public/creative-consultancy.jpg"
        alt="Three shells resting on a wooden board in low light"
        mark={["Marketing", "Consultancy"]}
        layout="quiet"
        /* Held, like the other two offering pages; the chapter plate below
           carries the handover. Ignition and its supporting line used to resolve
           here — both are kept in the copy document as unplaced. */
        still
      />

      <div className="rise rise--compact">

      {/* PLACEHOLDER IMAGE: this page has only the one photograph, so the plate
          repeats the hero's. It reads as the same picture twice until a second
          one exists. */}
      <ChapterPlate
        image="public/creative-consultancy.jpg"
        alt=""
        left="What"
        right="this is"
      />

      <SectionStrip sections={ccSections} startId="cc-what" />

      {/* What this is.

          The other two offering pages open on a band with a photograph running
          off the left edge. This page has only the one picture — the shell,
          which the hero takes — so this reads as a lede band instead. A second
          photograph would let it take the same shape as the others. */}
      <div className="cc-section" id="cc-what">
        <div className="cc-inner cc-lede">
          <h2 className="cc-heading">What this is</h2>
          <p>
            Strategic brand storytelling that connects and converts. I help creative entrepreneurs and conscious businesses craft authentic marketing that resonates with their audience and drives meaningful growth.
          </p>
        </div>
      </div>

      {/* Closing */}
      <div className="cc-section" id="cc-next">
        <div className="cc-close">
          <p>
            Full session details are coming soon. Get in touch in the meantime — I'm happy to talk through what this could look like for you.
          </p>
          <Button variant="primary" onClick={() => onNav("contact")}>Book a conversation</Button>
        </div>
      </div>

      </div>
    </section>
  );
}

window.pageSections = Object.assign(window.pageSections || {}, { consultancy: ccSections });
Object.assign(window, { Consultancy, ccSections });