// Brown Ocean — pages

const { useState: useStP, useEffect: useEfP } = React;

// ============== HOME PAGE ==============
function HomePage({ tweaks, onQuote }) {
  return (
    <main>
      <Hero variant={tweaks.heroVariant} showLeaves={tweaks.showLeaves} onQuote={onQuote} />
      <BrandStory />
      <Differentiation />
      <FlavourGrid onQuote={onQuote} />
      <Categories onQuote={onQuote} />
      <Ingredients />
      <NutritionTable />
      <ProcessTimeline />
      <Certifications />
      <ExportMap />
      <Testimonials />
      <FinalCTA onQuote={onQuote} />
    </main>
  );
}

// ============== PRODUCTS PAGE ==============
function ProductsPage({ onQuote }) {
  return (
    <main>
      <PageHero
        eyebrow="THE RANGE"
        title="Eleven flavours,"
        italic="two formats."
        body="Trade-grade raw kernels for distributors and processors. Retail-ready roasted packs across eleven flavour profiles. Private-label welcomed."
      />
      <Categories onQuote={onQuote} />
      <FlavourGrid onQuote={onQuote} />
      <Ingredients />
      <NutritionTable />
      <FinalCTA onQuote={onQuote} />
    </main>
  );
}

// ============== PROCESS PAGE ==============
function ProcessPage({ onQuote }) {
  return (
    <main>
      <PageHero
        eyebrow="THE LINE"
        title="Pond"
        italic="to port."
        body="A vertically-integrated, single-facility process. Hand-graded, batch-roasted, nitrogen-flushed and stuffed into containers — under one roof, in Bihar."
      />
      <ProcessTimeline />
      <Certifications />
      <Differentiation />
      <FinalCTA onQuote={onQuote} />
    </main>
  );
}

// ============== EXPORTS PAGE ==============
function ExportsPage({ onQuote }) {
  return (
    <main>
      <PageHero
        eyebrow="GLOBAL TRADE"
        title="Twelve markets,"
        italic="one origin."
        body="From Mundra, JNPT and Kolkata. FCL and LCL, with in-house documentation and phytosanitary clearance — no third-party hand-offs."
      />
      <ExportMap />
      <Testimonials />
      <Certifications />
      <FinalCTA onQuote={onQuote} />
    </main>
  );
}

// ============== CONTACT PAGE ==============
function ContactPage({ onQuote }) {
  const [data, setData] = useStP({
    name: "", company: "", email: "", phone: "",
    country: "", product: "", quantity: "", notes: ""
  });
  const [sent, setSent] = useStP(false);
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  return (
    <main>
      <PageHero
        eyebrow="GET IN TOUCH"
        title="Request an"
        italic="export quote."
        body="One business day to a written response, with pricing, sample shipping and a sailing schedule. We'll reach you the way you ask."
      />
      <section style={{ padding: "80px 0 140px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>HEAD OFFICE</div>
              <div className="display" style={{ fontSize: 28, color: "var(--brown-900)", marginBottom: 8 }}>
                Ascendance Agro Pvt Ltd
              </div>
              <p style={{ color: "var(--ink-soft)", fontSize: 15, lineHeight: 1.6 }}>
                201, Balakrishna Centre<br/>
                N.G. Acarya Marg, Chembur<br/>
                Mumbai 400071, India
              </p>

              <div style={{ marginTop: 36 }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>EXPORT DESK</div>
                <div style={{ fontSize: 16, color: "var(--brown-900)", lineHeight: 1.7 }}>
                  +91 91364 79617<br/>
                  vishal@ascendanceagro.com
                </div>
              </div>

              <div style={{ marginTop: 36 }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>HOURS</div>
                <div style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.7 }}>
                  Mon – Sat · 09:00 – 19:00 IST<br/>
                  Quotes returned within 1 business day.
                </div>
              </div>

              <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>CERTIFIED</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {CERTIFICATIONS.map(c => (
                    <span key={c.code} className="display" style={{
                      padding: "8px 14px", borderRadius: 999,
                      background: "var(--sand-100)",
                      fontSize: 14, color: "var(--brown-800)",
                      boxShadow: "var(--shadow-sm)"
                    }}>{c.code}</span>
                  ))}
                </div>
              </div>
            </div>

            <div className="card" style={{ background: "var(--sand-100)", padding: 48 }}>
              {sent ? (
                <div style={{ textAlign: "center", padding: "64px 0" }}>
                  <div style={{
                    width: 64, height: 64, margin: "0 auto 24px",
                    borderRadius: "50%", background: "var(--leaf)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "white", fontSize: 28
                  }}>✓</div>
                  <h3 className="display" style={{ fontSize: 36, margin: 0, color: "var(--brown-900)" }}>
                    Quote received.
                  </h3>
                  <p style={{ marginTop: 16, color: "var(--ink-soft)" }}>
                    We'll reach you at <strong>{data.email}</strong> within one business day.
                  </p>
                  <button className="btn btn-ghost" onClick={() => { setSent(false); setData({ name:"",company:"",email:"",phone:"",country:"",product:"",quantity:"",notes:""}); }} style={{ marginTop: 32 }}>
                    Send another →
                  </button>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); if (window.gtag) window.gtag("event", "contact_form_submit", { product: data.product, country: data.country, quantity: data.quantity }); }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                    <div><label>Full name *</label><input required value={data.name} onChange={e => set("name", e.target.value)} /></div>
                    <div><label>Company *</label><input required value={data.company} onChange={e => set("company", e.target.value)} /></div>
                    <div><label>Email *</label><input type="email" required value={data.email} onChange={e => set("email", e.target.value)} /></div>
                    <div><label>Phone</label><input type="tel" value={data.phone} onChange={e => set("phone", e.target.value)} /></div>
                    <div><label>Destination country *</label><input required placeholder="e.g. United Arab Emirates" value={data.country} onChange={e => set("country", e.target.value)} /></div>
                    <div>
                      <label>Estimated quantity *</label>
                      <select required value={data.quantity} onChange={e => set("quantity", e.target.value)}>
                        <option value="">Select volume</option>
                        <option>Trial — 1 ton / 500 cartons</option>
                        <option>Small — 1–5 tons / month</option>
                        <option>Medium — 5–20 tons / month</option>
                        <option>FCL — 20+ tons / month</option>
                      </select>
                    </div>
                    <div style={{ gridColumn: "1 / -1" }}>
                      <label>Product *</label>
                      <select required value={data.product} onChange={e => set("product", e.target.value)}>
                        <option value="">Select a product</option>
                        <optgroup label="Categories">
                          <option value="raw">Raw &amp; Bulk Supply</option>
                          <option value="roasted">Roasted &amp; Flavoured (full range)</option>
                        </optgroup>
                        <optgroup label="Flavours">
                          {FLAVOURS.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
                        </optgroup>
                        <option value="private-label">Private-label programme</option>
                      </select>
                    </div>
                    <div style={{ gridColumn: "1 / -1" }}>
                      <label>Notes</label>
                      <textarea rows="4" value={data.notes} onChange={e => set("notes", e.target.value)}
                        placeholder="Lead time, packaging, certifications required…" />
                    </div>
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ marginTop: 32, width: "100%", justifyContent: "center" }}>
                    Submit quote request →
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============== PAGE HERO (smaller than home hero) ==============
function PageHero({ eyebrow, title, italic, body }) {
  return (
    <section style={{
      position: "relative",
      minHeight: 480,
      display: "flex", alignItems: "center",
      overflow: "hidden",
      borderBottomLeftRadius: 32, borderBottomRightRadius: 32,
      marginTop: -88, paddingTop: 140, paddingBottom: 80
    }} className="hero-gradient">
      <FloatingLeaves show={true} density={3} />
      <div className="container" style={{ position: "relative", zIndex: 3, width: "100%" }}>
        <div className="eyebrow" style={{ color: "var(--gold)", marginBottom: 28 }}>{eyebrow}</div>
        <h1 className="display" style={{
          fontSize: "clamp(48px, 7vw, 96px)",
          lineHeight: 1.05,
          color: "var(--sand-100)", margin: 0, maxWidth: 980,
          paddingBottom: "0.08em"
        }}>
          {title} <span className="display-italic" style={{ color: "var(--gold)" }}>{italic}</span>
        </h1>
        {body && (
          <p style={{ marginTop: 40, maxWidth: 600, fontSize: 17, color: "var(--sand-300)", lineHeight: 1.6 }}>
            {body}
          </p>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { HomePage, ProductsPage, ProcessPage, ExportsPage, ContactPage, PageHero });