/* ============================================================
   FRUTA FRESCA — Subscriptions
   ============================================================ */
function SubsScreen() {
  const { go, toast } = useApp();
  const [freq, setFreq] = useState("weekly");
  const [selected, setSelected] = useState("weekly");

  return (
    <div data-screen-label="Subscriptions">
      <section style={{ background: "var(--green)", color: "#fff" }}>
        <div className="container text-center" style={{ paddingBlock: 56, maxWidth: 680 }}>
          <p className="eyebrow" style={{ color: "var(--citrus)" }}>Fruta Fresca Membership</p>
          <h1 className="h1" style={{ color: "#fff" }}>Fresh fruit, on repeat.</h1>
          <p className="lead" style={{ color: "rgba(255,255,255,.88)", marginTop: 14 }}>
            Choose a rhythm, customise your fruit, and let us handle the rest. Pause, skip or cancel anytime —
            no lock-in, ever.</p>
          <div className="row" style={{ gap: 18, justifyContent: "center", marginTop: 22, flexWrap: "wrap" }}>
            {[["check", "Free delivery"], ["check", "Member pricing"], ["check", "Pause anytime"]].map(([ic, t]) => (
              <span key={t} className="row small" style={{ gap: 7 }}><Icon name={ic} size={15} style={{ color: "var(--citrus)" }} /> {t}</span>
            ))}
          </div>
        </div>
      </section>

      <section className="section container">
        <div className="pgrid--3" style={{ alignItems: "stretch" }}>
          {FF.subscriptions.map((s) => {
            const on = selected === s.id;
            return (
              <article key={s.id} className="surface-card" style={{ overflow: "hidden", display: "flex", flexDirection: "column",
                border: `2px solid ${on ? "var(--green)" : "var(--line)"}`, position: "relative" }}>
                {s.popular && <span className="badge" style={{ position: "absolute", top: 14, right: 14, zIndex: 2,
                  background: "var(--citrus)", color: "var(--ink)" }}>Most popular</span>}
                <div style={{ aspectRatio: "16/10" }}><img src={FF.img(s.img, 500)} alt={s.name} className="fill" /></div>
                <div style={{ padding: 20, display: "flex", flexDirection: "column", flex: 1 }}>
                  <h3 className="h3">{s.name}</h3>
                  <p className="muted small" style={{ margin: "8px 0 14px", flex: 1 }}>{s.blurb}</p>
                  <div style={{ display: "grid", gap: 8, marginBottom: 16 }}>
                    {s.perks.map((perk) => (
                      <div key={perk} className="row small" style={{ gap: 8 }}>
                        <Icon name="check" size={15} style={{ color: "var(--leaf)" }} /> {perk}</div>
                    ))}
                  </div>
                  <div className="between" style={{ marginBottom: 14 }}>
                    <span><span className="serif" style={{ fontSize: 26, fontWeight: 600 }}>{FF.rupee(s.price)}</span>
                      <span className="small muted"> {s.cadence}</span></span>
                  </div>
                  <button className={`btn ${on ? "btn--primary" : "btn--outline"} btn--block`} onClick={() => setSelected(s.id)}>
                    {on ? "Selected" : "Choose plan"}</button>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      {/* Customise */}
      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container split">
          <div>
            <p className="eyebrow">Make it yours</p>
            <h2 className="h2">Customise every box</h2>
            <p className="lead" style={{ marginTop: 12 }}>
              Set your delivery frequency, swap out fruits you'd rather skip, and tell us your ripeness preference.
              Travelling? Pause with one tap.</p>
            <div style={{ marginTop: 22 }}>
              <span className="label" style={{ display: "block", marginBottom: 10 }}>Delivery frequency</span>
              <div className="pilltabs">
                {[["daily", "Daily"], ["weekly", "Weekly"], ["fortnightly", "Fortnightly"], ["monthly", "Monthly"]].map(([v, t]) => (
                  <button key={v} className={freq === v ? "on" : ""} onClick={() => setFreq(v)}>{t}</button>
                ))}
              </div>
            </div>
            <div style={{ display: "grid", gap: 12, marginTop: 22 }}>
              {[["calendar", "Flexible scheduling", "Choose your days; change them anytime"],
                ["pause", "Pause & skip", "Going away? Pause without losing your plan"],
                ["sparkle", "Seasonal surprises", "Our buyers add peak-season finds"]].map(([ic, h, s]) => (
                <div key={h} className="row" style={{ gap: 12, alignItems: "flex-start" }}>
                  <span style={{ width: 40, height: 40, borderRadius: 11, background: "var(--paper)", color: "var(--green)",
                    display: "grid", placeItems: "center", flex: "none" }}><Icon name={ic} size={20} /></span>
                  <div><div style={{ fontWeight: 600 }}>{h}</div><div className="small muted">{s}</div></div>
                </div>
              ))}
            </div>
            <button className="btn btn--primary btn--lg" style={{ marginTop: 24 }}
              onClick={() => { toast("Subscription started — first box on its way!"); go("account"); }}>
              Start my subscription</button>
          </div>
          <div style={{ borderRadius: 18, overflow: "hidden", aspectRatio: "4/5" }}>
            <img src={FF.img(FF.PH.slicedBowl, 800)} alt="A daily fresh fruit bowl" className="fill" />
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   FRUTA FRESCA — Occasion / Gifting
   ============================================================ */
function GiftingScreen() {
  const { go } = useApp();
  const [occ, setOcc] = useState("birthday");
  const occText = {
    birthday: "Make their day with a basket of colour and sweetness.",
    wedding: "Generous, elegant hampers for the season's celebrations.",
    getwell: "Light, nourishing fruit with a thoughtful, handwritten note.",
    festive: "Premium festive hampers — the gift everyone remembers.",
  };
  return (
    <div data-screen-label="Gifting">
      <section style={{ position: "relative", minHeight: 360, display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <BgVideo src="video/pineapple.mp4" poster={FF.img(FF.PH.plateFruit, 1400)} alt="Gift hampers"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(28,42,33,.2),rgba(28,42,33,.78))" }}></div>
        <div className="container" style={{ position: "relative", paddingBlock: 44 }}>
          <p className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Gifting</p>
          <h1 className="h1" style={{ color: "#fff", maxWidth: 560 }}>A gift as fresh as the thought.</h1>
          <p className="lead" style={{ color: "rgba(255,255,255,.9)", maxWidth: 460, marginTop: 12 }}>
            Curated hampers and bespoke boxes for every occasion — delivered on the date you choose.</p>
        </div>
      </section>

      {/* Occasion selector */}
      <section className="section container">
        <SectionHead eyebrow="Shop by moment" title="Find the perfect occasion" />
        <div className="cat-grid" style={{ display: "grid", gap: 14, gridTemplateColumns: "repeat(2,1fr)" }}>
          {FF.occasions.map((o) => (
            <button key={o.key} onClick={() => setOcc(o.key)} className="cat-card" style={{ position: "relative",
              border: `2px solid ${occ === o.key ? "var(--green)" : "transparent"}`, borderRadius: 14, overflow: "hidden",
              aspectRatio: "4/3", padding: 0, cursor: "pointer" }}>
              <img src={FF.img(o.img, 400)} alt={o.label} className="fill" />
              <span style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(28,42,33,0) 45%,rgba(28,42,33,.7))" }}></span>
              <span style={{ position: "absolute", left: 14, bottom: 12, color: "#fff", fontFamily: "var(--display)",
                fontWeight: 600, fontSize: 19 }}>{o.label}</span>
            </button>
          ))}
        </div>
        <p className="lead text-center" style={{ marginTop: 22, maxWidth: 520, marginInline: "auto" }}>{occText[occ]}</p>
      </section>

      {/* Hamper grid */}
      <section className="section" style={{ background: "var(--paper)", borderBlock: "1px solid var(--line)" }}>
        <div className="container">
          <SectionHead eyebrow="Ready to gift" title="Signature hampers"
            action="Build your own" onAction={() => go("hampers")} />
          <div className="pgrid--3">
            {FF.hampers.map((h) => (
              <article key={h.id} className="surface-card" style={{ overflow: "hidden", cursor: "pointer" }} onClick={() => go("hampers")}>
                <div style={{ position: "relative", aspectRatio: "4/3" }}>
                  <img src={FF.img(h.img, 500)} 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: 20 }}>{h.name}</h3>
                  <p className="muted small" style={{ margin: "6px 0 12px" }}>{h.desc}</p>
                  <div className="row wrap" style={{ gap: 6, marginBottom: 14 }}>
                    {h.items.slice(0, 3).map((it) => <span key={it} className="badge">{it}</span>)}
                    {h.items.length > 3 && <span className="badge">+{h.items.length - 3}</span>}
                  </div>
                  <div className="between">
                    <span style={{ fontWeight: 600 }}>{FF.rupee(h.price)}</span>
                    <span className="btn btn--primary btn--sm">Gift this <Icon name="gift" size={15} /></span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Pre-order band */}
      <section className="section container">
        <div className="surface-card split" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ minHeight: 280 }}><img src={FF.img(FF.PH.mangoBasket, 800)} alt="Pre-order Alphonso" className="fill" style={{ minHeight: 280 }} /></div>
          <div style={{ padding: "32px 28px" }}>
            <span className="badge badge--preorder" style={{ marginBottom: 12 }}>Pre-order</span>
            <h2 className="h2">Reserve the first harvest</h2>
            <p className="lead" style={{ marginTop: 12 }}>
              Festive and wedding orders sell out fast. Reserve your hampers now, pick a delivery date, and
              pay only when they ship — fresh from the season's first pick.</p>
            <div className="row wrap" style={{ gap: 12, marginTop: 22 }}>
              <button className="btn btn--primary btn--lg" onClick={() => go("hampers")}>Pre-order hampers</button>
              <span className="row small muted" style={{ gap: 7 }}><Icon name="calendar" size={16} style={{ color: "var(--green)" }} /> Scheduled delivery</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { SubsScreen, GiftingScreen });