/* ============================================================
   Farbodfilms — Home page (hero variants per direction)
   ============================================================ */

function Hero({ go, theme }) {
  const featured = PRODUCTS[2]; // bundle / collection
  const kind = THEMES[theme].hero;

  if (kind === "editorial") {
    const dd = PRODUCTS.find((p) => p.id === "daydream");
    return (
      <section className="hero hero-editorial">
        <div className="hero-ed-grid">
          <div className="hero-ed-left">
            <span className="eyebrow mono">SS26 · Colour Grading LUTs</span>
            <h1 className="hero-ed-title">
              Turning ordinary<br />
              moments into <em>cinematic</em><br />
              stories.
            </h1>
            <p className="hero-ed-sub">
              Drag-and-drop film looks for Premiere, DaVinci & Final Cut.
              One click from your footage to a feeling.
            </p>
            <div className="hero-ctas">
              <Btn onClick={() => go("shop")}>Shop the SS26 looks</Btn>
              <Btn variant="ghost" onClick={() => go("product:ss26-bundle")}>View the collection</Btn>
            </div>
          </div>
          <div className="hero-ed-right">
            <BeforeAfter sceneKey="goldenField" grade="daydream" label="Daydream" photo={dd.pairs[0]} />
          </div>
        </div>
      </section>
    );
  }

  if (kind === "analog") {
    return (
      <section className="hero hero-analog">
        <div className="filmstrip" aria-hidden="true">
          {Object.keys(SCENES).map((s, i) => (
            <div className="filmstrip-cell" key={s}>
              <Scene sceneKey={s} grade={i % 2 ? "daydream" : "afterlight"} grain />
            </div>
          ))}
        </div>
        <div className="hero-analog-mid">
          <span className="eyebrow mono">Farbodfilms · SS26</span>
          <h1 className="hero-analog-title">
            Cinematic looks,<br />pulled straight from feeling.
          </h1>
          <p className="hero-analog-sub">
            Hand-built LUTs that turn ordinary moments into something you remember.
            Two looks this season — more every drop.
          </p>
          <div className="hero-ctas">
            <Btn onClick={() => go("shop")}>Shop SS26</Btn>
            <Btn variant="ghost" onClick={() => go("faq")}>How it works</Btn>
          </div>
        </div>
      </section>
    );
  }

  // minimal / "reel"
  const ddm = PRODUCTS.find((p) => p.id === "daydream");
  return (
    <section className="hero hero-minimal">
      <div className="hero-min-bg">
        <Scene sceneKey="coast" grade="daydream" photo={ddm.pairs[0]} />
      </div>
      <div className="hero-letterbox hero-letterbox-top" />
      <div className="hero-letterbox hero-letterbox-bottom" />
      <div className="hero-min-inner">
        <span className="eyebrow mono">SS26 — Now available</span>
        <h1 className="hero-min-title">Turning ordinary moments<br />into <span className="script-accent">cinematic</span> stories.</h1>
        <p className="hero-min-sub">
          Film-grade colour LUTs by Farbodfilms. Drop them on your footage and go.
        </p>
        <div className="hero-ctas">
          <Btn onClick={() => go("shop")}>Shop the looks</Btn>
          <Btn variant="ghost" onClick={() => go("product:ss26-bundle")}>Get the collection</Btn>
        </div>
      </div>
      <div className="hero-min-meta mono">
        <span>EST. 2026</span>
        <span>·</span>
        <span>{PRODUCTS.length - 1} LUTs · SS26</span>
        <span>·</span>
        <span>.CUBE / PREMIERE / DAVINCI / FCP</span>
      </div>
    </section>
  );
}

function ValueRow() {
  const items = [
    { k: "01", t: "One-click looks", d: "Drag the .cube onto any clip. No plugins, no node trees." },
    { k: "02", t: "Built on real footage", d: "Graded and tested on actual shoots, not test charts." },
    { k: "03", t: "Works everywhere", d: "Premiere, DaVinci Resolve, Final Cut & more. LOG + Rec709." },
    { k: "04", t: "Yours forever", d: "Instant download. Free updates within the season you buy." },
  ];
  return (
    <section className="values">
      {items.map((i) => (
        <div className="value" key={i.k}>
          <span className="value-k mono">{i.k}</span>
          <h3>{i.t}</h3>
          <p>{i.d}</p>
        </div>
      ))}
    </section>
  );
}

function FeaturedLooks({ go, addToCart, theme }) {
  return (
    <section className="featured">
      <div className="section-head">
        <span className="eyebrow mono">The SS26 looks</span>
        <h2 className="section-title">Two films in a folder.</h2>
      </div>
      <div className="featured-grid">
        {PRODUCTS.filter((p) => !p.bundle).map((p) => (
          <ProductCard key={p.id} p={p} go={go} addToCart={addToCart} theme={theme} large />
        ))}
      </div>
    </section>
  );
}

function BundleBanner({ go }) {
  const b = PRODUCTS.find((p) => p.bundle);
  return (
    <section className="bundle-banner" onClick={() => go("product:" + b.id)}>
      <div className="bundle-bg">
        <Scene sceneKey="goldenField" grade="daydream" />
      </div>
      <div className="bundle-content">
        <span className="eyebrow mono">Best value · save 14%</span>
        <h2 className="bundle-title">The complete SS26 Collection.</h2>
        <p className="bundle-sub">
          Both looks together — plus every new SS26 LUT delivered free as it drops.
        </p>
        <div className="bundle-foot">
          <span className="bundle-price"><s>€28</s> €{b.price}</span>
          <Btn onClick={(e) => { e.stopPropagation(); go("product:" + b.id); }}>View the collection →</Btn>
        </div>
      </div>
    </section>
  );
}

function Home({ go, addToCart, theme }) {
  return (
    <div className="page page-home">
      <Hero go={go} theme={theme} />
      <ValueRow />
      <FeaturedLooks go={go} addToCart={addToCart} theme={theme} />
      <BundleBanner go={go} />
    </div>
  );
}

Object.assign(window, { Home, Hero, ProductCardHost: true });