// REWIND website — OUR STORY. One continuous narrative: The Vision → pull →
// The Experience walk-through → The Team → Between Sips → Founding Story.
// `space` (0.4–1, from the Tweaks panel) scales the vertical rhythm.
function OurStoryView({ go, space }) {
  const D = window.RW_DATA;
  const C = window.RW_CONTENT;
  const OS = C.ourStory;
  const U = C.ui.story;
  const M = C.media || {};
  const media = (value, fallback) => value ? (/^(data:|https?:|\/)/.test(value) ? value : RWA(value)) : fallback;
  const bs = (D.events || []).find((e) => e.id === "between-sips") || {};

  const sc = typeof space === "number" ? space : 1;
  const px = (n) => Math.round(n * sc) + "px";
  const sp5 = px(64);   // title → body gap
  const sp6 = px(104);  // inter-block gap
  const secY = { paddingTop: px(72), paddingBottom: px(72) };
  return (
    <div>
      {/* image-led hero */}
      <section className="phero phero--sm">
        <RWVideo className="pimg" src={RWA("v-rewind-intro-720")} poster={media(M.storyHeroImage, RWA("c-rewind2308"))} style={{ opacity: 0.72 }} />
        <div className="pscrim"></div>
      </section>

      {/* 01 — The Vision */}
      <section className="sec" style={secY}>
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: sp5 }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.vision}</h2>
          </div>
          <div className="prose">
            {OS.vision.map((p, i) => <p key={i} data-rw-field={i === 0 ? "storyVisionOne" : "storyVisionTwo"}>{p}</p>)}
          </div>

          {/* pull quote */}
          <p className="pull" data-rw-field="storyPull" style={{ margin: sp6 + " auto 0" }}>{OS.pull}</p>

          {/* The Experience — text-led walk-through */}
          <div className="sec-head" style={{ margin: sp6 + " 0 " + sp5 }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.experience}</h2>
          </div>
          <div className="prose">
            {C.experience.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="figinset" style={{ marginTop: sp5 }}>
            <img src={media(M.storyEntranceImage, RWA("speakeasy-vault"))} alt="The speakeasy entrance at Rewind" loading="lazy" />
          </div>
        </div>
      </section>

      {/* The Team — the bar and the kitchen */}
      <section className="sec" style={secY}>
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: sp5 }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.team}</h2>
          </div>
          {/* Ken Chen — Beverage Director */}
          <div className="bio" data-rw-field="beverageDirectorData">
            <div className="frame bioframe"><img src={M.kenPortraitImage || window.RW_IMG.kenBar} alt="Beverage Director Ken Chen" /></div>
            <div>
              <span className="eyebrow" style={{ color: "var(--ink-subtle)", display: "block", marginBottom: "14px" }}>{C.cocktailProgram.ken.role}</span>
              <h3 className="bioname">{C.cocktailProgram.ken.name}</h3>
              <p className="bio-lead" style={{ marginTop: "18px" }}>{C.cocktailProgram.ken.lead}</p>
              <div className="prose left">{C.cocktailProgram.ken.paras.map((t, i) => <p key={i}>{t}</p>)}</div>
            </div>
          </div>
          {/* Alexander Lee — Chef Partner */}
          <div className="bio" data-rw-field="chefPartnerData" style={{ marginTop: sp6 }}>
            <div className="frame bioframe"><img src={media(M.chefPortraitImage, RWA("alexander-lee-portrait"))} alt="Chef Partner Alexander Lee" /></div>
            <div>
              <span className="eyebrow" style={{ color: "var(--ink-subtle)", display: "block", marginBottom: "14px" }}>{C.foodProgram.chef.role}</span>
              <h3 className="bioname">{C.foodProgram.chef.name}</h3>
              <p className="bio-lead" style={{ marginTop: "18px" }}>{C.foodProgram.chef.lead}</p>
              <div className="prose left">{C.foodProgram.chef.paras.map((t, i) => <p key={i}>{t}</p>)}</div>
            </div>
          </div>
        </div>
      </section>

      {/* 02 — Between Sips, the signature series */}
      <section className="sec" style={secY}>
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: sp5 }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{bs.title || U.eventFallback}</h2>
            <p className="lead" style={{ textAlign: "center", margin: "0 auto", maxWidth: "58ch" }}>{bs.blurb}</p>
          </div>

          <div className="lgrid">
            <div className="frame ar45"><img src={media(M.storyEventImage, RWA("c-rewind2341"))} alt={bs.title} /></div>
            <div>
              <span className="eyebrow" style={{ color: "var(--ink-subtle)" }}>{bs.cadence} · {bs.room}</span>
              <div className="prose left" style={{ marginTop: "var(--vs-3)" }}>
                {(bs.body || []).map((p, i) => <p key={i}>{p}</p>)}
              </div>
              <span className="eyebrow" style={{ color: "var(--champagne)", display: "block", marginTop: "var(--vs-3)" }}>{bs.curator}</span>
              <div className="cta-row">
                <a className="btn btn--champ" href={D.reservations.base} target="_blank" rel="noopener">{U.reserve}</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 03 — Founding Story */}
      <section className="sec" style={secY}>
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: sp5 }}>
            <h2 className="rw-marquee title title--lg" style={{ margin: 0 }}>{U.founding}</h2>
          </div>
          <div className="prose">
            {OS.founding.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </section>
    </div>
  );
}
window.OurStoryView = OurStoryView;