// New v3 sections: founder, retail strip, contact form

const V3Founder = () => (
  <section className="v3-founder" id="about">
    <div className="shell">
      <div className="v3-founder-grid">
        <div className="v3-founder-mark">
          <div className="v3-founder-quote">
            <span className="q open">"</span>
            <p>We pick brands we'd actually buy ourselves.</p>
            <span className="q close">"</span>
            <span className="sig">— Tuleen Co.</span>
          </div>
          <div className="v3-founder-tag">Est. 2021 · Kuwait City</div>
        </div>
        <div className="v3-founder-copy">
          <span className="v3-founder-eyebrow"><span className="bar"/>The team behind</span>
          <h2>
            We're a small team<br/>
            <span className="it">obsessed</span> with what<br/>
            ends up on the shelf.
          </h2>
          <p>
            Tuleen Co. was founded in Kuwait in 2021 to bring genuinely good snacks and confectionary to the GCC and Levant — without the markup, the compromise, or the lazy distribution. We work directly with manufacturers, ship our own warehouse, and pick brands we'd actually buy ourselves.
          </p>
          <div className="v3-founder-meta">
            <div className="v3-founder-stat">
              <span className="n">5</span>
              <span className="l">Years operating</span>
            </div>
            <div className="v3-founder-stat">
              <span className="n">40+</span>
              <span className="l">SKUs distributed</span>
            </div>
            <div className="v3-founder-stat">
              <span className="n">6</span>
              <span className="l">Markets served</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const V3RetailStrip = () => {
  const retailers = ["Carrefour", "Lulu", "Spinneys", "Tamimi", "Sultan Center", "Géant", "Monoprix", "Choithrams"];
  return (
    <section className="v3-retail">
      <div className="shell">
        <div className="v3-retail-head">
          <span className="kicker"><span className="dot"/>On shelves at</span>
          <h3>Stocked across the region's<br/><span className="it">leading retailers.</span></h3>
        </div>
        <div className="v3-retail-grid">
          {retailers.map((r, i) => (
            <div key={r} className="v3-retail-tile">
              <span className="num">{String(i+1).padStart(2,'0')}</span>
              <span className="name">{r}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const V3Contact = () => {
  const [form, setForm] = React.useState({ name: "", company: "", market: "Kuwait", role: "Distributor", message: "" });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError("");
    try {
      const r = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!r.ok) throw new Error("Submit failed");
      setSent(true);
      setForm({ name: "", company: "", market: "Kuwait", role: "Distributor", message: "" });
      setTimeout(() => setSent(false), 6000);
    } catch (err) {
      setError("Couldn't send — please email info@tuleenco.com directly.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="v3-contact" id="contact">
      <div className="shell">
        <div className="v3-contact-grid">
          <div className="v3-contact-left">
            <span className="v3-contact-eyebrow"><span className="bar"/>Talk to us</span>
            <h2>
              Let's get<br/>
              your shelves<br/>
              <span className="it">stocked.</span>
            </h2>
            <p>Distributors, retailers, brand owners — drop us a line. We answer within 48 hours.</p>
            <div className="v3-contact-meta">
              <a href="mailto:info@tuleenco.com" className="v3-contact-link">
                <span className="l">Email</span>
                <span className="v">info@tuleenco.com</span>
              </a>
              <a href="tel:+96522000000" className="v3-contact-link">
                <span className="l">Phone</span>
                <span className="v">+965 2200 0000</span>
              </a>
              <a href="https://wa.me/96599000000" className="v3-contact-link">
                <span className="l">WhatsApp</span>
                <span className="v">+965 9900 0000</span>
              </a>
              <div className="v3-contact-link static">
                <span className="l">Office</span>
                <span className="v">Salmiya · Kuwait City</span>
              </div>
            </div>
          </div>
          <form className="v3-contact-form" onSubmit={submit}>
            <div className="v3-form-row">
              <label className="v3-field">
                <span>Your name</span>
                <input type="text" required value={form.name} onChange={update("name")} placeholder="Sarah Al-Sabah"/>
              </label>
              <label className="v3-field">
                <span>Company</span>
                <input type="text" required value={form.company} onChange={update("company")} placeholder="Carrefour KW"/>
              </label>
            </div>
            <div className="v3-form-row">
              <label className="v3-field">
                <span>Market</span>
                <select value={form.market} onChange={update("market")}>
                  <option>Kuwait</option><option>Saudi Arabia</option><option>UAE</option>
                  <option>Bahrain</option><option>Qatar</option><option>Oman</option><option>Other</option>
                </select>
              </label>
              <label className="v3-field">
                <span>I'm a…</span>
                <select value={form.role} onChange={update("role")}>
                  <option>Distributor</option><option>Retailer</option><option>Brand owner</option><option>Press</option><option>Other</option>
                </select>
              </label>
            </div>
            <label className="v3-field">
              <span>What can we help with?</span>
              <textarea rows="4" value={form.message} onChange={update("message")} placeholder="Tell us about your shelves, your market, your timing…"/>
            </label>
            <button type="submit" disabled={sending} className={`v3-form-submit ${sent ? "sent" : ""}`}>
              {sent ? "✓ Got it — we'll be in touch" : sending ? "Sending…" : "Send it →"}
            </button>
            {error && <p className="v3-form-fine" style={{color:"#F05A4A"}}>{error}</p>}
            <p className="v3-form-fine">By submitting you agree we may email you about this enquiry. No marketing spam — promise.</p>
          </form>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { V3Founder, V3RetailStrip, V3Contact });