/* ============================================================
   FRUTA FRESCA — About / Our Story / Sourcing
   ============================================================ */
function AboutScreen() {
  const { go } = useApp();
  const stories = [
    { img: FF.PH.mangoTree, tag: "Ratnagiri", h: "Chasing the perfect Alphonso", read: "6 min read" },
    { img: FF.PH.greenTree, tag: "Michoacán", h: "How Hass avocados travel the world and arrive ready", read: "4 min read" },
    { img: FF.PH.mangoOnTree, tag: "Nashik", h: "Inside a pomegranate orchard at harvest", read: "5 min read" },
  ];
  const process = [
    { n: "01", h: "Source from named farms", s: "We partner directly with 120+ growers, choosing by terroir and variety — not by the lowest bid." },
    { n: "02", h: "Pick at peak ripeness", s: "Our buyers harvest at the exact moment of flavour, never early. Naturally ripened, never carbide-treated." },
    { n: "03", h: "Grade to Class 1", s: "Every fruit is hand-inspected. Only export-grade, unblemished fruit makes the cut." },
    { n: "04", h: "Move it cold", s: "An unbroken cold-chain from orchard to your door keeps every box farm-fresh." },
  ];
  return (
    <div data-screen-label="About">
      {/* Hero */}
      <section style={{ position: "relative", minHeight: 440, display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <BgVideo src="video/basket-3.mp4" poster={FF.img(FF.PH.fruitTree, 1400)} alt="Our orchards"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(28,42,33,.15),rgba(28,42,33,.8))" }}></div>
        <div className="container" style={{ position: "relative", paddingBlock: 52, maxWidth: 720 }}>
          <p className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>Our story</p>
          <h1 className="h1" style={{ color: "#fff" }}>Fruit, taken seriously.</h1>
          <p className="lead" style={{ color: "rgba(255,255,255,.92)", marginTop: 14, maxWidth: 520 }}>
            Fruta Fresca began with a simple frustration: why was it so hard to buy genuinely great fruit in the city?
            So we built the supply chain we wished existed.</p>
        </div>
      </section>

      {/* Founder note */}
      <section className="section container">
        <div className="split">
          <div style={{ borderRadius: 18, overflow: "hidden", aspectRatio: "4/5" }}>
            <img src={FF.img(FF.PH.mangoBasket, 800)} alt="Founder at the market" className="fill" />
          </div>
          <div>
            <p className="eyebrow">A note from our founder</p>
            <h2 className="h2">“Great fruit deserves to be enjoyed the way nature intended.”</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              At Fruta Fresca, we partner directly with trusted growers and source fruits from the best growing regions
              across India and beyond. Our mission is simple: to bring exceptional quality, freshness, and authenticity to your doorstep.</p>
            <p style={{ marginTop: 14, color: "var(--muted)", lineHeight: 1.7 }}>
              Every fruit we deliver reflects our commitment to quality, transparency, and the people who grow it.</p>
            <div className="row" style={{ gap: 12, marginTop: 22 }}>
              <span style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--green-tint)", color: "var(--green)",
                display: "grid", placeItems: "center", fontFamily: "var(--display)", fontWeight: 600, fontSize: 18 }}>AU</span>
              <div><div style={{ fontWeight: 600 }}>Anuj Upadhyay</div><div className="small muted">Founder, FrutaFresca</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="section" style={{ background: "var(--green)", color: "#fff" }}>
        <div className="container">
          <div className="text-center" style={{ maxWidth: 560, margin: "0 auto 36px" }}>
            <p className="eyebrow" style={{ color: "var(--citrus)" }}>Sourcing & quality</p>
            <h2 className="h2" style={{ color: "#fff" }}>From grove to your door</h2>
          </div>
          <div className="proc-grid" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 20 }}>
            {process.map((p) => (
              <div key={p.n} style={{ borderTop: "2px solid var(--citrus)", paddingTop: 16 }}>
                <div className="serif" style={{ fontSize: 32, fontWeight: 600, color: "var(--citrus)" }}>{p.n}</div>
                <h3 style={{ fontFamily: "var(--display)", fontSize: 19, fontWeight: 600, margin: "8px 0 8px", color: "#fff" }}>{p.h}</h3>
                <p style={{ fontSize: 14, color: "rgba(255,255,255,.82)", lineHeight: 1.6 }}>{p.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stories grid (Natoora-style editorial) */}
      <section className="section container">
        <SectionHead eyebrow="Sourcing stories" title="From the field" action="All stories" onAction={() => {}} />
        <div className="pgrid--3">
          {stories.map((s, i) => (
            <article key={i} style={{ cursor: "pointer" }}>
              <div style={{ borderRadius: 16, overflow: "hidden", aspectRatio: "4/5", position: "relative" }} className="cat-card">
                <img src={FF.img(s.img, 600)} alt={s.h} className="fill" />
                <span className="badge badge--origin" style={{ position: "absolute", top: 12, left: 12 }}>{s.tag}</span>
              </div>
              <h3 className="h3" style={{ fontSize: 21, marginTop: 14 }}>{s.h}</h3>
              <p className="small muted" style={{ marginTop: 6 }}>{s.read} <span className="divider-dot"></span> Read story →</p>
            </article>
          ))}
        </div>
      </section>

      <TrustBand />
      <section className="section container text-center">
        <h2 className="h2" style={{ maxWidth: 520, margin: "0 auto 18px" }}>Taste the difference for yourself.</h2>
        <button className="btn btn--primary btn--lg" onClick={() => go("shop")}>Shop the harvest</button>
      </section>
    </div>
  );
}

/* ============================================================
   FRUTA FRESCA — Contact
   ============================================================ */
function ContactScreen() {
  const { toast } = useApp();
  const [sent, setSent] = useState(false);
  return (
    <div data-screen-label="Contact" className="container" style={{ paddingBlock: 32 }}>
      <div className="text-center" style={{ maxWidth: 560, margin: "0 auto 32px" }}>
        <p className="eyebrow">We're here to help</p>
        <h1 className="h2">Get in touch</h1>
        <p className="muted" style={{ marginTop: 8 }}>Questions about an order, a gift, or a bulk enquiry? We usually reply within the hour.</p>
      </div>

      <div className="split--sticky" style={{ alignItems: "start" }}>
        {/* Form */}
        <div className="surface-card" style={{ padding: 24 }}>
          {sent ? (
            <div className="text-center" style={{ paddingBlock: 30 }}>
              <span style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--green-tint)", color: "var(--green)",
                margin: "0 auto 16px", display: "grid", placeItems: "center" }}><Icon name="check" size={28} stroke={3} /></span>
              <h3 className="h3">Message sent</h3>
              <p className="muted" style={{ marginTop: 8 }}>Thanks for reaching out — we'll be in touch shortly.</p>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); toast("Message sent!"); }} style={{ display: "grid", gap: 14 }}>
              <div className="row" style={{ gap: 12 }}>
                <label className="field" style={{ flex: 1 }}><span className="label">Name</span><input className="input" placeholder="Your name" required /></label>
                <label className="field" style={{ flex: 1 }}><span className="label">Phone</span><input className="input" placeholder="+91" /></label>
              </div>
              <label className="field"><span className="label">Email</span><input className="input" type="email" placeholder="you@email.com" required /></label>
              <label className="field"><span className="label">Topic</span>
                <select className="select"><option>Order support</option><option>Gifting & hampers</option><option>Bulk / corporate</option><option>Partnership</option><option>Something else</option></select></label>
              <label className="field"><span className="label">Message</span><textarea className="textarea" rows={4} placeholder="How can we help?" required /></label>
              <button className="btn btn--primary btn--lg btn--block" type="submit">Send message</button>
            </form>
          )}
        </div>

        {/* Details */}
        <div style={{ display: "grid", gap: 16 }}>
          <div className="surface-card" style={{ overflow: "hidden" }}>
            <div style={{ height: 200, position: "relative", background:
              "repeating-linear-gradient(45deg, var(--surface), var(--surface) 14px, var(--green-tint) 14px, var(--green-tint) 28px)" }}>
              <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                <span className="badge badge--origin"><Icon name="mappin" size={15} style={{ color: "var(--green)" }} /> Govandi East, Mumbai</span>
              </div>
            </div>
            <div style={{ padding: 20, display: "grid", gap: 16 }}>
              {[["mappin", "Visit us", "Gala No. 2, Ground Floor, Vikrant Industrial Estate,\nDeonar Village Road, Govandi East,\nMumbai – 400088"],
                ["phone", "Call", "+91 91671 98515\nMon–Sun, 8:00 AM – 8:00 PM"],
                ["whatsapp", "WhatsApp", "+91 91671 98515\nFastest way to reach us"],
                ["mail", "Email", "care@frutafresca.in"]].map(([ic, h, d]) => (
                <div key={h} className="row" style={{ gap: 12, alignItems: "flex-start" }}>
                  <span style={{ width: 40, height: 40, borderRadius: 11, background: "var(--green-tint)", color: "var(--green)",
                    display: "grid", placeItems: "center", flex: "none" }}><Icon name={ic} size={19} /></span>
                  <div><div style={{ fontWeight: 600, fontSize: 14.5 }}>{h}</div>
                    <div className="small muted" style={{ whiteSpace: "pre-line", marginTop: 2 }}>{d}</div></div>
                </div>
              ))}
            </div>
          </div>
          <a href="#" onClick={(e) => e.preventDefault()} className="surface-card row" style={{ padding: 18, gap: 14, background: "#25D366", color: "#fff" }}>
            <Icon name="whatsapp" size={26} fill="#fff" stroke={0} />
            <div style={{ flex: 1 }}><div style={{ fontWeight: 600 }}>Chat on WhatsApp</div>
              <div style={{ fontSize: 13, opacity: .9 }}>Get instant answers from our team</div></div>
            <Icon name="chevronR" size={20} />
          </a>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { AboutScreen, ContactScreen });