// sections-mid.jsx — Stories, Ethos preview

// ---------- helper: reveal-on-scroll wrapper ----------
const Reveal = ({ children, delay = 0, className = "", as = "div", ...rest }) => {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setVis(true); io.disconnect(); }
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  const style = delay ? { transitionDelay: `${delay}ms` } : undefined;
  return (
    <Tag ref={ref} style={style} className={["reveal", vis ? "is-in" : "", className].filter(Boolean).join(" ")} {...rest}>
      {children}
    </Tag>
  );
};

// ---------- Featured Stories / Refined ----------
// The feature pulls its copy from refined-data.js so it always describes
// the episode actually shown in the photograph (S01E05, the Sonoma firepit).
const STORIES_FEATURE_IMAGE = "assets/images/photo-patio-firepit.jpg";

const storiesFeature = () => {
  const ep = (window.REFINED_EPISODES || []).find(
    e => e.thumbnail === STORIES_FEATURE_IMAGE || e.heroImage === STORIES_FEATURE_IMAGE
  );
  if (!ep) {
    return {
      eyebrow: "From the series",
      meta:    "Sonoma — twilight",
      title:   "fire, threshold, gathering.",
      image:   STORIES_FEATURE_IMAGE,
    };
  }
  const pad = (n) => String(n).padStart(2, "0");
  return {
    eyebrow: `Refined · S${pad(ep.season)} · E${pad(ep.episode)}`,
    meta:    `${ep.location} — ${ep.duration}`,
    title:   ep.title.toLowerCase() + ".",
    image:   STORIES_FEATURE_IMAGE,
  };
};

const STORIES_PAIR = [
  {
    n: "II",
    eyebrow: "Interior — 125 Camille Court",
    title: "the rooms we return to.",
    dek: "Three sunlit interiors and the long quiet of a Sunday — a study on how light learns the architecture of a house.",
    image: "assets/images/photo-dining-light.jpg",
  },
  {
    n: "III",
    eyebrow: "Craft — Napa Valley",
    title: "intention, not ornament.",
    dek: "A marble kitchen, photographed without ceremony. On choosing the single beautiful object over the room full of them.",
    image: "assets/images/photo-kitchen-marble.jpg",
  },
];

const KayaStories = () => {
  const STORIES_FEATURE = storiesFeature();
  return (
  <section className="section section--ivory" id="refined" data-screen-label="03 Refined">
    <div className="section__inner">
      <Reveal as="div" className="stories-header">
        <span className="stories-header__num">— 03</span>
        <h2><span className="hl">Refined.</span><br/>A slow library of cinematic work.</h2>
        <a className="stories-header__link btn-quiet btn-quiet--burgundy" href="/refined">
          View the series
          <svg width="14" height="10" viewBox="0 0 24 14" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="0" y1="7" x2="22" y2="7"/><polyline points="16 1 22 7 16 13"/>
          </svg>
        </a>
      </Reveal>

      <Reveal className="story-feature">
        <div className="story-feature__media">
          <img src={STORIES_FEATURE.image} alt="" />
        </div>
        <div className="story-feature__caption">
          <span className="eyebrow eyebrow--ivory">{STORIES_FEATURE.eyebrow}</span>
          <h3 className="story-feature__title">{STORIES_FEATURE.title}</h3>
          <span className="story-feature__meta">{STORIES_FEATURE.meta}</span>
        </div>
      </Reveal>

      <div className="story-pair">
        {STORIES_PAIR.map((s, i) => (
          <Reveal key={s.n} className={"story" + (i % 2 ? " story--alt" : "")} delay={i * 120}>
            <div className="story__media">
              <img src={s.image} alt="" />
              <span className="story__index">{s.n}</span>
            </div>
            <div className="story__meta">
              <span className="story__eyebrow">{s.eyebrow}</span>
              <h3 className="story__title">{s.title}</h3>
              <p className="story__dek">{s.dek}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
  );
};

// ---------- Our Ethos preview ----------
const KayaEthos = () => (
  <section className="section section--ink ethos" id="ethos" data-screen-label="04 Ethos">
    <div className="ethos__inner">
      <Reveal className="ethos__media">
        <img src="assets/images/photo-human-arches.jpg" alt="" />
      </Reveal>
      <div className="ethos__body">
        <Reveal as="span" className="ethos__chapter">04 · Our Ethos</Reveal>
        <Reveal as="h2" className="ethos__title" delay={120}>
          <span className="hl">Refined, not timid.</span> <em>Quiet confidence over loud declarations.</em>
        </Reveal>
        <Reveal as="p" delay={220}>
          We don&rsquo;t sensationalize. We don&rsquo;t dramatize. We honor nuance,
          quiet power, and presence — the kind of storytelling that listens as
          deeply as it speaks.
        </Reveal>
        <Reveal as="p" delay={300}>
          Every image, every narrative, every frame is crafted with clarity and
          intention. We aren&rsquo;t here to catalogue beautiful rooms. We reveal the
          tension, ambition, and humanity behind them.
        </Reveal>
        <Reveal as="a" className="ethos__cta" delay={420} href="/ethos">
          Read our ethos
          <svg width="14" height="10" viewBox="0 0 24 14" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="0" y1="7" x2="22" y2="7"/><polyline points="16 1 22 7 16 13"/>
          </svg>
        </Reveal>
      </div>
    </div>
  </section>
);

window.KayaStories = KayaStories;
window.KayaEthos = KayaEthos;
window.KayaReveal = Reveal;