/* story.jsx — split layout: framed portrait + history, credentials, hospitality notes */
function Story() {
  const s = window.RIAD.story;
  const riad = window.RIAD.riad;
  return (
    <section className="section" id="story" data-screen-label="The House">
      <div className="wrap">
        <div className="story-grid">
          <Reveal className="story-frame">
            <div className="img" style={{ backgroundImage: "url(" + window.PX(s.portrait, 1100) + ")" }}></div>
          </Reveal>
          <div className="story-body">
            <Reveal as="p" className="eyebrow">The House</Reveal>
            <Reveal as="h2" delay="1">A home first, a riad second.</Reveal>
            {s.paras.map((p, k) => (
              <Reveal as="p" key={k} delay={k + 1}>{p}</Reveal>
            ))}
            <Reveal className="creds" delay="2">
              {s.creds.map((c, k) => (
                <div className="c" key={k}>
                  <span className="n">{c.n}</span>
                  <span className="l">{c.l}</span>
                </div>
              ))}
            </Reveal>
            <Reveal as="p" delay="3" className="sub" style={{ color: "var(--muted)", fontSize: "13.5px" }}>
              <strong style={{ color: "var(--ink)", fontWeight: 600 }}>Looking after you — </strong>{s.notes}.
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Story = Story;