/* ============================================================
   FRUTA FRESCA — Homepage
   ============================================================ */
function HeroA() {
  // Cinematic full-bleed "video" hero with static fallback
  const { go, tweaks } = useApp();
  const variant = (tweaks && tweaks.hero) || "cinematic";
  if (variant === "split") return <HeroSplit />;
  if (variant === "editorial") return <HeroEditorial />;
  return (
    <section style={{ position: "relative", minHeight: "min(86vh, 760px)", overflow: "hidden",
      display: "flex", alignItems: "flex-end", background: "var(--ink)" }}>
      <div className="hero-media" style={{ position: "absolute", inset: 0 }}>
        <BgVideo src="video/mango.mp4" poster={FF.img(FF.PH.mangoTree, 1400)}
          alt="Fresh fruit in motion" style={{ width: "100%", height: "100%" }} />
        <div style={{ position: "absolute", inset: 0, background:
          "linear-gradient(180deg, rgba(28,42,33,.35) 0%, rgba(28,42,33,.05) 35%, rgba(28,42,33,.78) 100%)" }}></div>
      </div>
      <div style={{ position: "absolute", top: 18, right: 18, zIndex: 3 }}>
        <span className="badge" style={{ background: "rgba(255,255,255,.16)", color: "#fff", backdropFilter: "blur(6px)" }}>
          <Icon name="play" size={12} fill="#fff" stroke={0} /> Film · fruit in motion
        </span>
      </div>
      <div className="container" style={{ position: "relative", zIndex: 2, paddingBottom: 56, paddingTop: 40 }}>
        <Reveal>
          <p className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Purveyors of fine fruits</p>
          <h1 className="h1" style={{ color: "#fff", maxWidth: 720 }}>
            The season's finest,<br /><span style={{ fontStyle: "italic", color: "var(--citrus)" }}>picked at its peak.</span>
          </h1>
          <p className="lead" style={{ color: "rgba(255,255,255,.9)", maxWidth: 480, marginTop: 16 }}>
            Class 1, export-grade fruit from named farms — cold-chain delivered across India.
          </p>
          <div className="row wrap" style={{ gap: 12, marginTop: 26 }}>
            <button className="btn btn--primary btn--lg" onClick={() => go("shop")}>Shop the harvest</button>
            <button className="btn btn--lg" onClick={() => go("subs")}
              style={{ background: "rgba(255,255,255,.14)", color: "#fff", border: "1.5px solid rgba(255,255,255,.4)" }}>
              Start a subscription</button>
          </div>
          <div style={{ marginTop: 24, maxWidth: 340 }} className="hero-pin"><Pincode compact /></div>
        </Reveal>
      </div>
    </section>
  );
}

function HeroSplit() {
  const { go } = useApp();
  return (
    <section style={{ background: "var(--canvas)" }}>
      <div className="container" style={{ paddingTop: 36, paddingBottom: 12 }}>
        <div className="split" style={{ alignItems: "center" }}>
          <Reveal>
            <p className="eyebrow">Purveyors of fine fruits</p>
            <h1 className="h1" style={{ maxWidth: 540 }}>
              Fruit worth<br /><span style={{ fontStyle: "italic", color: "var(--green)" }}>making a fuss</span> over.
            </h1>
            <p className="lead" style={{ marginTop: 16, maxWidth: 440 }}>
              Hand-graded, naturally ripened and cold-chain delivered. From the Ratnagiri coast to your kitchen.
            </p>
            <div className="row wrap" style={{ gap: 12, marginTop: 24 }}>
              <button className="btn btn--primary btn--lg" onClick={() => go("shop")}>Shop the harvest</button>
              <button className="btn btn--outline btn--lg" onClick={() => go("hampers")}>Explore gifting</button>
            </div>
            <div style={{ marginTop: 22, maxWidth: 340 }}><Pincode compact /></div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ position: "relative", borderRadius: 20, overflow: "hidden", aspectRatio: "4/5" }}>
              <img src={FF.img(FF.PH.mango, 900)} alt="Alphonso mangoes" className="fill"
                style={{ animation: "kenburns 20s ease-in-out infinite alternate" }} />
              <span className="badge badge--origin" style={{ position: "absolute", bottom: 14, left: 14 }}>
                <Icon name="mappin" size={13} style={{ color: "var(--green)" }} /> Ratnagiri · In season</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial() {
  const { go } = useApp();
  return (
    <section style={{ background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
      <div className="container text-center" style={{ paddingTop: 52, paddingBottom: 0 }}>
        <Reveal>
          <p className="eyebrow">Purveyors of fine fruits</p>
          <h1 className="h1" style={{ margin: "0 auto", maxWidth: 760 }}>
            A quieter, fresher way<br />to buy <span style={{ fontStyle: "italic", color: "var(--green)" }}>extraordinary fruit.</span>
          </h1>
          <p className="lead" style={{ margin: "16px auto 0", maxWidth: 500 }}>
            Class 1, export-grade harvests — sourced from named farms, delivered cold across India.
          </p>
          <div className="row wrap" style={{ gap: 12, marginTop: 24, justifyContent: "center" }}>
            <button className="btn btn--primary btn--lg" onClick={() => go("shop")}>Shop the harvest</button>
            <button className="btn btn--outline btn--lg" onClick={() => go("subs")}>Subscriptions</button>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ position: "relative", borderRadius: "20px 20px 0 0", overflow: "hidden",
            marginTop: 36, aspectRatio: "16/7", maxWidth: 1000, marginInline: "auto" }}>
            <BgVideo src="video/dragonfruit.mp4" poster={FF.img("img/dragon.jpg", 1400)} alt="Fresh fruit harvest" />
            <span className="badge" style={{ position: "absolute", top: 14, right: 14,
              background: "rgba(255,255,255,.18)", color: "#fff", backdropFilter: "blur(6px)" }}>
              <Icon name="play" size={12} fill="#fff" stroke={0} /> Film</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CategoryStrip() {
  const { go } = useApp();
  return (
    <section className="section container">
      <SectionHead eyebrow="Find your favourites" title="Shop by collection" />
      <div className="cat-grid" style={{ display: "grid", gap: 14,
        gridTemplateColumns: "repeat(2,1fr)" }}>
        {FF.categories.map((c, i) => (
          <Reveal key={c.key} delay={i * 60}>
            <button onClick={() => go("shop", { cat: c.key })} style={{
              position: "relative", width: "100%", border: "none", borderRadius: 14, overflow: "hidden",
              aspectRatio: i === 0 ? "1/1" : "1/1", cursor: "pointer", padding: 0, display: "block" }}
              className="cat-card">
              <img src={FF.img(c.img, 500)} alt={c.label} className="fill" />
              <span style={{ position: "absolute", inset: 0, background:
                "linear-gradient(180deg, rgba(28,42,33,0) 40%, rgba(28,42,33,.72) 100%)" }}></span>
              <span style={{ position: "absolute", left: 14, bottom: 12, textAlign: "left" }}>
                <span style={{ display: "block", fontFamily: "var(--display)", fontWeight: 600, fontSize: 19, color: "#fff" }}>{c.label}</span>
                <span style={{ fontSize: 12.5, color: "rgba(255,255,255,.85)" }}>{c.desc}</span>
              </span>
            </button>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function ReelsRail() {
  const { go, addToCart } = useApp();
  const reels = [
    { vid: "video/reel-1.mp4", poster: FF.PH.mango, handle: "alphonso", caption: "Welcome to Fruta Fresca 🌿", tag: "New" },
    { vid: "video/reel-8.mp4", poster: FF.PH.mango, handle: "alphonso", caption: "Ratnagiri Alphonso, cut & ready 🥭", tag: "In season" },
    { vid: "video/reel-2.mp4", poster: "img/exotice11.jpg", handle: "grapefruit", caption: "Ruby grapefruit, freshly halved", tag: "Limited" },
    { vid: "video/reel-3.mp4", poster: "img/dragon.jpg", handle: "dragon", caption: "Dragon fruit just landed 🐉", tag: "Exotic" },
    { vid: "video/reel-5.mp4", poster: "img/pomegranates.jpg", handle: "pomegranate", caption: "This week's harvest platter", tag: "Fresh" },
    { vid: "video/reel-7.mp4", poster: "img/hamper2.jpg", handle: "orange", caption: "Gift baskets, made to order", tag: "Gifting" },
    { vid: "video/reel-6.mp4", poster: "img/exotic_1.jpg", handle: "alphonso", caption: "Festive hampers, hand-packed", tag: "Gifting" },
    { vid: "video/reel-4.mp4", poster: FF.PH.slicedBowl, handle: "kiwi", caption: "Fresh to your door, weekly", tag: "Subscription" },
    { vid: "video/reel-9.mp4", poster: "img/litchi.jpg", handle: "litchi", caption: "Shahi litchi — reserve now", tag: "Pre-order" },
  ];
  return (
    <section className="section container">
      <SectionHead eyebrow="Watch & shop" title="Fruta Fresca reels"
        action="@frutafresca" onAction={() => {}} />
      <div className="reel-rail">
        <div className="reel-track">
          {[...reels, ...reels].map((r, i) => {
            const p = FF.byId(r.handle);
            return <ReelCard key={i} reel={r} product={p} go={go} addToCart={addToCart} />;
          })}
        </div>
      </div>
    </section>
  );
}

function ReelCard({ reel, product, go, addToCart }) {
  const ref = useRef(null);
  const vidRef = useRef(null);
  const [muted, setMuted] = useState(true);
  const [added, setAdded] = useState(false);
  useEffect(() => {
    const v = vidRef.current, host = ref.current;
    if (!v || !host) return;
    v.muted = true;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting) {
          if (v.preload === "none") { v.preload = "auto"; v.load(); }
          const pr = v.play(); if (pr && pr.catch) pr.catch(() => {});
        } else { v.pause(); }
      });
    }, { threshold: 0.6 });
    io.observe(host);
    return () => io.disconnect();
  }, []);
  const toggleSound = (e) => {
    e.stopPropagation();
    const v = vidRef.current; if (!v) return;
    // mute every other reel video first
    document.querySelectorAll(".reel-card video").forEach((o) => { if (o !== v) o.muted = true; });
    v.muted = !v.muted;
    setMuted(v.muted);
    if (!v.muted) { const pr = v.play(); if (pr && pr.catch) pr.catch(() => {}); }
  };
  const quickAdd = (e) => {
    e.stopPropagation();
    addToCart(product, 1);
    setAdded(true);
    setTimeout(() => setAdded(false), 1100);
  };
  return (
    <article className="reel-card" ref={ref} onClick={() => go("pdp", { id: product.id })}
      tabIndex={0} role="button" aria-label={`${reel.caption} — shop ${product.name}`}
      onKeyDown={(e) => e.key === "Enter" && go("pdp", { id: product.id })}>
      <video ref={vidRef} className="reel-video" loop muted playsInline preload="none"
        poster={FF.img(reel.poster, 500)} aria-hidden="true">
        <source src={reel.vid} type="video/mp4" />
      </video>
      <span className="reel-shade reel-shade--top"></span>
      <span className="reel-shade reel-shade--bot"></span>

      {/* top row */}
      <div className="reel-top">
        <span className="reel-handle">
          <span className="reel-dot"></span> @frutafresca
        </span>
        <button className="reel-mute" onClick={toggleSound} aria-label={muted ? "Unmute" : "Mute"}>
          <Icon name={muted ? "mute" : "sound"} size={15} style={{ color: "#fff" }} />
        </button>
      </div>
      <span className="reel-tag badge">{reel.tag}</span>

      {/* bottom: caption + shoppable chip */}
      <div className="reel-bot">
        <p className="reel-caption">{reel.caption}</p>
        <div className="reel-shop">
          <img src={FF.img(product.img, 120)} alt="" />
          <div className="reel-shop-info">
            <span className="reel-shop-name">{product.name}</span>
            <span className="reel-shop-price tabnum">{product.priceFrom ? "From " : ""}{FF.rupee(product.price)} <span className="muted">· {product.unit}</span></span>
          </div>
          <button className={`reel-shop-add${added ? " added" : ""}`} onClick={quickAdd} aria-label={`Add ${product.name}`}>
            <Icon name={added ? "check" : "plus"} size={16} stroke={2.6} />
          </button>
        </div>
      </div>
    </article>
  );
}

function BestSellers() {
  const { go } = useApp();
  const items = FF.products.slice(0, 6);
  return (
    <section className="section" style={{ background: "var(--paper)", borderBlock: "1px solid var(--line)" }}>
      <div className="container">
        <SectionHead eyebrow="Loved by our members" title="This week's best-sellers"
          action="Shop all" onAction={() => go("shop")} />
        <div className="carousel">
          {items.map((p) => <ProductCard key={p.id} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function GiftsModule() {
  const { go } = useApp();
  return (
    <section className="section container">
      <SectionHead eyebrow="Gifting, beautifully done" title="Hampers & gift crates"
        action="All hampers" onAction={() => go("hampers")} />
      <div className="pgrid--3">
        {FF.hampers.map((h, i) => (
          <Reveal key={h.id} delay={i * 70}>
            <article className="surface-card" style={{ overflow: "hidden", cursor: "pointer", height: "100%" }}
              onClick={() => go("hampers")}>
              <div style={{ position: "relative", aspectRatio: "4/3" }}>
                <img src={FF.img(h.img, 600)} alt={h.name} className="fill" />
                {h.tag && <span className="badge badge--limited" style={{ position: "absolute", top: 12, left: 12 }}>{h.tag}</span>}
              </div>
              <div style={{ padding: 18 }}>
                <h3 className="h3" style={{ fontSize: 21 }}>{h.name}</h3>
                <p className="muted small" style={{ marginTop: 6, marginBottom: 14 }}>{h.desc}</p>
                <div className="between">
                  <span style={{ fontWeight: 600 }}>{FF.rupee(h.price)}</span>
                  <span className="btn btn--outline btn--sm">Personalise <Icon name="arrowR" size={15} /></span>
                </div>
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function SubscriptionTeaser() {
  const { go } = useApp();
  return (
    <section className="section" style={{ background: "var(--green)", color: "#fff" }}>
      <div className="container split">
        <Reveal>
          <p className="eyebrow" style={{ color: "var(--citrus)" }}>Never run out of fresh</p>
          <h2 className="h2" style={{ color: "#fff" }}>Fruit on a rhythm that suits you.</h2>
          <p className="lead" style={{ color: "rgba(255,255,255,.88)", marginTop: 14, maxWidth: 460 }}>
            From a daily cut-fruit bowl to a monthly exotic discovery box. Customise, skip or pause anytime —
            with member pricing and free delivery.
          </p>
          <div className="row wrap" style={{ gap: 12, marginTop: 24 }}>
            <button className="btn btn--primary btn--lg" onClick={() => go("subs")}>See plans</button>
            <span className="row" style={{ gap: 8, fontSize: 14 }}>
              <Icon name="check" size={16} style={{ color: "var(--citrus)" }} /> Pause anytime</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="sub-cards" style={{ display: "grid", gap: 12 }}>
            {FF.subscriptions.map((s) => (
              <div key={s.id} className="row" style={{ gap: 14, background: "rgba(255,255,255,.08)",
                border: "1px solid rgba(255,255,255,.16)", borderRadius: 14, padding: 12 }}>
                <img src={FF.img(s.img, 200)} alt="" style={{ width: 64, height: 64, borderRadius: 10, objectFit: "cover", flex: "none" }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 15.5 }}>{s.name}</div>
                  <div style={{ fontSize: 13, color: "rgba(255,255,255,.75)" }}>{FF.rupee(s.price)} {s.cadence}</div>
                </div>
                {s.popular && <span className="badge" style={{ background: "var(--citrus)", color: "var(--ink)" }}>Popular</span>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function SourcingStrip() {
  const { go } = useApp();
  return (
    <section className="section container">
      <div className="split">
        <Reveal>
          <div style={{ position: "relative", borderRadius: 18, overflow: "hidden", aspectRatio: "5/4" }}>
            <img src={FF.img(FF.PH.mangoOnTree, 900)} alt="A farmer inspecting ripening mangoes" className="fill" />
          </div>
        </Reveal>
        <Reveal delay={100}>
          <p className="eyebrow">Our sourcing</p>
          <h2 className="h2">We know the farm,<br />the grower, the grove.</h2>
          <p className="lead" style={{ marginTop: 14 }}>
            Every box is traceable to a named orchard. We buy at peak ripeness, grade to Class 1, and move
            it cold — so what lands at your door tastes the way the grower intended.
          </p>
          <div className="row wrap" style={{ gap: 26, marginTop: 22 }}>
            {[["120+", "Partner farms"], ["48 hrs", "Farm to door"], ["100%", "Traceable"]].map(([n, l]) => (
              <div key={l}>
                <div className="serif" style={{ fontSize: 30, fontWeight: 600, color: "var(--green)" }}>{n}</div>
                <div className="small muted">{l}</div>
              </div>
            ))}
          </div>
          <button className="btn btn--outline" style={{ marginTop: 24 }} onClick={() => go("about")}>
            Read our sourcing stories <Icon name="arrowR" size={16} /></button>
        </Reveal>
      </div>
    </section>
  );
}

function GuaranteeBand() {
  return (
    <section style={{ background: "var(--citrus-tint)" }}>
      <div className="container text-center" style={{ paddingBlock: 56, maxWidth: 720 }}>
        <Reveal>
          <span style={{ width: 56, height: 56, borderRadius: 16, background: "var(--paper)", margin: "0 auto 18px",
            display: "grid", placeItems: "center", color: "var(--green)" }}><Icon name="shield" size={28} /></span>
          <h2 className="h2">The freshness guarantee</h2>
          <p className="lead" style={{ marginTop: 12 }}>
            “Class 1, export-grade. Cold-chain delivered. <strong style={{ color: "var(--ink)" }}>100% freshness
            guarantee</strong> or we replace it.” No questions, no fuss — just fruit you can trust.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function InstaTestimonials() {
  const shots = [FF.PH.slicedBowl, FF.PH.mangoBasket, FF.PH.plateFruit, FF.PH.citrus, FF.PH.mangoPile, FF.PH.groupYellow];
  return (
    <section className="section container">
      <div className="split--sticky" style={{ alignItems: "start" }}>
        <div>
          <SectionHead eyebrow="@frutafresca" title="From our community" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8 }}>
            {shots.map((s, i) => (
              <a key={i} href="#" onClick={(e) => e.preventDefault()} style={{ position: "relative",
                aspectRatio: "1/1", borderRadius: 10, overflow: "hidden", display: "block" }}>
                <img src={FF.img(s, 300)} alt="Customer photo" className="fill" />
              </a>
            ))}
          </div>
        </div>
        <div>
          <SectionHead eyebrow="Reviews" title="Loved across Mumbai" />
          <div style={{ display: "grid", gap: 14 }}>
            {FF.testimonials.map((t, i) => (
              <Reveal key={i} delay={i * 60}>
                <figure className="surface-card" style={{ padding: 20, margin: 0 }}>
                  <Stars value={5} />
                  <blockquote className="serif" style={{ fontSize: 19, lineHeight: 1.4, margin: "10px 0 14px", fontStyle: "italic" }}>
                    “{t.q}”</blockquote>
                  <figcaption className="small"><strong>{t.a}</strong> <span className="muted">· {t.city}</span></figcaption>
                </figure>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function NewsletterBand() {
  return (
    <section style={{ background: "var(--ink)", color: "#fff" }}>
      <div className="container text-center" style={{ paddingBlock: 56, maxWidth: 620 }}>
        <p className="eyebrow" style={{ color: "var(--citrus)" }}>Stay fresh</p>
        <h2 className="h2" style={{ color: "#fff" }}>Seasonal drops, in your inbox</h2>
        <p className="lead" style={{ color: "rgba(255,255,255,.82)", marginTop: 10, marginBottom: 22 }}>
          Be first to know when Alphonso season opens and exotics land.</p>
        <form className="row" style={{ gap: 10, maxWidth: 440, margin: "0 auto" }} onSubmit={(e) => e.preventDefault()}>
          <input className="input input--pill" placeholder="Email address"
            style={{ background: "rgba(255,255,255,.1)", border: "1.5px solid rgba(255,255,255,.24)", color: "#fff" }} />
          <button className="btn btn--primary" type="submit" style={{ flex: "none" }}>Subscribe</button>
        </form>
      </div>
    </section>
  );
}

function HomeScreen() {
  return (
    <div data-screen-label="Home">
      <HeroA />
      <TrustBand />
      <ReelsRail />
      <BestSellers />
      <CategoryStrip />
      <GiftsModule />
      <SubscriptionTeaser />
      <SourcingStrip />
      <GuaranteeBand />
      <InstaTestimonials />
      <NewsletterBand />
    </div>
  );
}

Object.assign(window, { HomeScreen });