/* ════════════════════════════════════════════════════════════════
   GREEN HARVEST — Home page (Hero · Capabilities · Catalogue · Story · Contact)
   ════════════════════════════════════════════════════════════════ */

const HERO_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4";
const CAP_VIDEO  = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4";

/* ─────────── HERO ─────────── */
function Hero() {
  return (
    <section id="home" className="relative w-full h-screen overflow-hidden bg-black">
      <FadingVideo
        src={HERO_VIDEO}
        className="absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0"
        style={{ width: "120%", height: "120%" }}
      />
      <div className="absolute inset-0 z-10 flex flex-col">
        <NavbarRoot active="home" />

        <div className="flex-1 flex flex-col items-center justify-center pt-24 px-4 text-center">
          {/* Badge */}
          <motion.div
            initial={{ filter: "blur(10px)", opacity: 0, y: 20 }}
            animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.4, ease: "easeOut" }}
            className="liquid-glass inline-flex items-center gap-2"
            style={{ borderRadius: 9999, padding: 4 }}
          >
            <span className="bg-white text-black px-3 py-1 text-xs font-semibold font-body" style={{ borderRadius: 9999 }}>
              New
            </span>
            <span className="text-sm text-white/90 pr-3 font-body">
              Harvest 2026 · Now Shipping Worldwide
            </span>
          </motion.div>

          {/* Headline */}
          <div className="mt-8">
            <BlurText
              text="From The Nigerian Earth To The World."
              className="text-5xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] max-w-3xl mx-auto tight-4"
              stagger={100}
            />
          </div>

          {/* Subheading */}
          <motion.p
            initial={{ filter: "blur(10px)", opacity: 0, y: 20 }}
            animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.8, ease: "easeOut" }}
            className="mt-6 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight"
          >
            Sesame, hibiscus, cashew, cocoa, ginger, shea, soybeans, palm kernel.
            Sourced direct from Nigerian farms. Quality assayed. Documents in order. Shipped with conviction.
          </motion.p>

          {/* CTAs */}
          <motion.div
            initial={{ filter: "blur(10px)", opacity: 0, y: 20 }}
            animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 1.1, ease: "easeOut" }}
            className="flex items-center gap-6 mt-8"
          >
            <a href="#products" className="liquid-glass-strong inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white" style={{ borderRadius: 9999 }}>
              Explore Products <ArrowUpRight className="h-5 w-5"/>
            </a>
            <a href="#harvest" className="inline-flex items-center gap-2 text-sm text-white font-body">
              Watch The Harvest <PlayIcon className="h-4 w-4"/>
            </a>
          </motion.div>

          {/* Stats */}
          <motion.div
            initial={{ filter: "blur(10px)", opacity: 0, y: 20 }}
            animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 1.3, ease: "easeOut" }}
            className="flex items-stretch gap-4 mt-10 flex-wrap justify-center"
          >
            <div className="liquid-glass p-5 w-[220px]" style={{ borderRadius: "1.25rem" }}>
              <ClockIcon className="h-7 w-7 text-white"/>
              <div className="font-heading italic text-white text-4xl tracking-[-1px] leading-none mt-4">12 Days</div>
              <div className="text-xs text-white font-body font-light mt-2">From Farm to Vessel</div>
            </div>
            <div className="liquid-glass p-5 w-[220px]" style={{ borderRadius: "1.25rem" }}>
              <GlobeIcon className="h-7 w-7 text-white"/>
              <div className="font-heading italic text-white text-4xl tracking-[-1px] leading-none mt-4">38+</div>
              <div className="text-xs text-white font-body font-light mt-2">Countries Served</div>
            </div>
            <div className="liquid-glass p-5 w-[220px]" style={{ borderRadius: "1.25rem" }}>
              <LeafIcon className="h-7 w-7 text-white"/>
              <div className="font-heading italic text-white text-4xl tracking-[-1px] leading-none mt-4">8</div>
              <div className="text-xs text-white font-body font-light mt-2">Verified Commodities</div>
            </div>
          </motion.div>
        </div>

        {/* Partners */}
        <motion.div
          initial={{ filter: "blur(10px)", opacity: 0, y: 20 }}
          animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 1.4, ease: "easeOut" }}
          className="flex flex-col items-center gap-4 pb-8 px-4"
        >
          <div className="liquid-glass px-3.5 py-1 text-xs font-medium text-white" style={{ borderRadius: 9999 }}>
            Trusted by buyers in Asia, the Gulf, Europe and Africa
          </div>
          <div className="flex flex-wrap items-center justify-center gap-8 md:gap-16 font-heading italic text-white text-2xl md:text-3xl tracking-tight">
            <span>Marina</span><span>Sahel</span><span>Niger</span><span>Atlantic</span><span>Apex</span>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

/* ─────────── CAPABILITIES (Harvest section) ─────────── */
function Capabilities() {
  const cards = [
    {
      title: "Sourced At Origin",
      body: "We work directly with cooperatives in Kano, Jigawa, Ogun and Cross River — buying at the gate, never through middlemen. Every lot is traceable to a name and a region.",
      tags: ["Cooperative-Direct", "Regional Traceability", "Farm-Gate Pricing", "Long-Term Relationships"],
      icon: (
        <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6 text-white">
          <path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.85-1.83C8.16 19.5 12.21 18.13 14 16c1.31-1.57 1.83-3.84 3-8z"/>
        </svg>
      ),
    },
    {
      title: "Quality Assayed",
      body: "Every shipment is inspected at loading by SGS or Bureau Veritas. Moisture, purity, admixture, defects — all certified before any wire moves. No surprises at the destination port.",
      tags: ["SGS / Bureau Veritas", "Pre-Shipment Inspection", "Mill Test Certificates", "Origin Documents"],
      icon: (
        <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6 text-white">
          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
        </svg>
      ),
    },
    {
      title: "Shipped With Conviction",
      body: "FOB or CIF from Apapa or Tin Can Island. Insured, sealed, full chain-of-custody documentation. We stay in the room until the cargo is in your custody at the destination port.",
      tags: ["FOB · CIF · CNF", "Apapa / Tin Can", "Insured Containers", "Letters of Credit"],
      icon: (
        <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6 text-white">
          <path d="M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99a8.13 8.13 0 0 0 8 0c1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l1.89-6.68a1 1 0 0 0-.66-1.28L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42a1.007 1.007 0 0 0-.66 1.28L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"/>
        </svg>
      ),
    },
  ];

  return (
    <section id="harvest" className="relative min-h-screen overflow-hidden bg-black">
      <FadingVideo
        src={CAP_VIDEO}
        className="absolute inset-0 w-full h-full object-cover z-0"
      />
      <div className="relative z-10 px-4 sm:px-8 md:px-16 lg:px-20 pt-24 pb-16 flex flex-col min-h-screen">
        <div className="mb-auto">
          <div className="text-sm font-body text-white/80 mb-6">// The Harvest</div>
          <h2 className="font-heading italic text-white text-5xl md:text-7xl lg:text-[6rem] leading-[0.9] tight-3">
            The earth,<br/>refined.
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
          {cards.map((c, i) => (
            <motion.div
              key={i}
              initial={{ filter: "blur(10px)", opacity: 0, y: 30 }}
              whileInView={{ filter: "blur(0px)", opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.2 }}
              transition={{ duration: 0.7, delay: i * 0.15, ease: "easeOut" }}
              className="liquid-glass p-6 min-h-[360px] flex flex-col"
              style={{ borderRadius: "1.25rem" }}
            >
              <div className="flex items-start justify-between gap-4">
                <div className="liquid-glass shrink-0" style={{ width: 44, height: 44, borderRadius: "0.75rem" }}>
                  <div className="w-full h-full flex items-center justify-center">{c.icon}</div>
                </div>
                <div className="flex flex-wrap justify-end gap-1.5 max-w-[70%]">
                  {c.tags.map((t,j) => (
                    <span key={j} className="liquid-glass px-3 py-1 text-[11px] text-white/90 font-body whitespace-nowrap" style={{ borderRadius: 9999 }}>{t}</span>
                  ))}
                </div>
              </div>
              <div className="flex-1"/>
              <div className="mt-6">
                <h3 className="font-heading italic text-white text-3xl md:text-4xl tight-1 leading-none">{c.title}</h3>
                <p className="mt-3 text-sm text-white/90 font-body font-light leading-snug max-w-[32ch]">{c.body}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── PRODUCT CATALOGUE ─────────── */
const PRODUCTS = [
  { slug: "sesame", no: "01", name: "Sesame Seeds", latin: "Sesamum indicum", tag: "98%+ purity · 25/50kg PP", img: "assets/products/sesame.jpg" },
  { slug: "hibiscus", no: "02", name: "Dried Hibiscus Flower", latin: "Hibiscus sabdariffa", tag: "Dark red · 20–25kg bags", img: "assets/products/hibiscus.jpg" },
  { slug: "cashew", no: "03", name: "Raw Cashew Nuts", latin: "Anacardium occidentale", tag: "180–220 ct/kg · jute", img: "assets/products/cashew.jpg" },
  { slug: "cocoa", no: "04", name: "Cocoa Beans", latin: "Theobroma cacao", tag: "Fermented · 64kg jute", img: "assets/products/cocoa.jpg" },
  { slug: "ginger", no: "05", name: "Dried Split Ginger", latin: "Zingiber officinale", tag: "Sun-dried · low admixture", img: "assets/products/ginger.jpg" },
  { slug: "shea", no: "06", name: "Natural Shea Butter", latin: "Vitellaria paradoxa", tag: "Ivory · cosmetic grade", img: "assets/products/shea.jpg" },
  { slug: "soybeans", no: "07", name: "Soybeans", latin: "Glycine max", tag: "98%+ purity · 50kg PP", img: "assets/products/soybeans.jpg" },
  { slug: "palm-kernel", no: "08", name: "Palm Kernel Shell", latin: "Elaeis guineensis", tag: "Biomass · 3800–4500 kcal/kg", img: "assets/products/palm-kernel.jpg" },
];

function ProductsSection() {
  return (
    <section id="products" className="relative bg-black py-24 px-4 sm:px-8 md:px-16 lg:px-20">
      <div className="starfield"></div>
      <div className="relative z-10 max-w-7xl mx-auto">
        <div className="flex items-end justify-between mb-12 gap-6 flex-wrap">
          <div>
            <div className="text-sm font-body text-white/80 mb-3">// The Catalogue</div>
            <h2 className="font-heading italic text-white text-5xl md:text-7xl lg:text-[6rem] leading-[0.88] tight-3">
              Eight commodities.<br/>One promise.
            </h2>
          </div>
          <div className="liquid-glass px-3.5 py-1.5 text-xs font-medium text-white whitespace-nowrap" style={{ borderRadius: 9999 }}>
            01 / 08 — 08 / 08
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
          {PRODUCTS.map((p, i) => (
            <motion.a
              key={p.slug}
              href={`products/${p.slug}.html`}
              initial={{ opacity: 0, filter: "blur(10px)", y: 30 }}
              whileInView={{ opacity: 1, filter: "blur(0)", y: 0 }}
              viewport={{ once: true, amount: 0.1 }}
              transition={{ duration: 0.65, delay: (i % 4) * 0.08, ease: "easeOut" }}
              className="group block relative overflow-hidden liquid-glass"
              style={{ borderRadius: "1.25rem", aspectRatio: "3/4" }}
            >
              <img src={p.img} alt={p.name} className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" style={{ filter: "brightness(0.6) saturate(0.85)" }} />
              <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, rgba(0,0,0,0.85) 100%)" }}/>
              <div className="absolute inset-0 p-5 flex flex-col justify-between">
                <div className="flex items-start justify-between">
                  <span className="text-xs font-body tracking-[0.3em] text-white/80">N° {p.no}</span>
                  <span className="liquid-glass px-2 py-1 text-[10px] text-white font-body" style={{ borderRadius: 9999 }}>View →</span>
                </div>
                <div>
                  <div className="font-heading italic text-white/70 text-sm mb-1">{p.latin}</div>
                  <h3 className="font-heading italic text-white text-3xl md:text-4xl tight-1 leading-none">{p.name}</h3>
                  <div className="mt-2 text-[11px] font-body tracking-[0.18em] uppercase text-white/70">{p.tag}</div>
                </div>
              </div>
            </motion.a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── STORY / ORIGIN ─────────── */
function Story() {
  return (
    <section id="origin" className="relative bg-black py-24 px-4 sm:px-8 md:px-16 lg:px-20 overflow-hidden">
      <div className="starfield"></div>
      <div className="relative z-10 max-w-6xl mx-auto">
        <motion.div
          initial={{ opacity: 0, filter: "blur(10px)" }}
          whileInView={{ opacity: 1, filter: "blur(0)" }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.9 }}
          className="text-center"
        >
          <div className="text-sm font-body text-white/80 mb-6">// The Origin Story</div>
          <h2 className="font-heading italic text-white text-5xl md:text-7xl lg:text-[6rem] leading-[0.88] tight-3 mb-12">
            Built around <em className="text-white/90">one conviction.</em>
          </h2>
          <p className="text-lg md:text-xl text-white/80 font-body font-light leading-relaxed max-w-3xl mx-auto">
            That an exporter's only product is <span className="font-heading italic text-white">their word</span>. Everything else is logistics. GreenHarvest exists to bridge the Nigerian smallholder and the global buyer — without dilution, without games. We pick what the soil gives, we test what we ship, and we sign what we mean.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.2 }}
          transition={{ duration: 0.8, delay: 0.3 }}
          className="grid grid-cols-2 md:grid-cols-4 gap-px mt-20 border border-white/10"
        >
          {[
            { label: "Founded", value: "2021" },
            { label: "Country", value: "Nigeria" },
            { label: "Port", value: "Lagos" },
            { label: "Lines", value: "08" },
          ].map((s, i) => (
            <div key={i} className="bg-black p-8 text-center">
              <div className="text-[10px] tracking-[0.3em] uppercase text-white/50 font-body mb-3">{s.label}</div>
              <div className="font-heading italic text-white text-3xl md:text-5xl tight-1">{s.value}</div>
            </div>
          ))}
        </motion.div>

        {/* Founder card */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.2 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="mt-20 liquid-glass p-8 md:p-12 grid grid-cols-1 md:grid-cols-3 gap-10 items-center"
          style={{ borderRadius: "1.5rem" }}
        >
          <div className="md:col-span-1">
            <div className="liquid-glass-strong flex items-center justify-center font-heading italic text-white" style={{ width: "100%", aspectRatio: "1/1", fontSize: 96, borderRadius: "1rem" }}>AJ</div>
          </div>
          <div className="md:col-span-2">
            <div className="text-xs font-body tracking-[0.3em] uppercase text-white/60 mb-3">◆ Founder & Managing Director</div>
            <h3 className="font-heading italic text-white text-4xl md:text-5xl tight-1 mb-4">Adewale Johnson</h3>
            <p className="text-base text-white/80 font-body font-light leading-relaxed">
              Built GreenHarvest from a single sesame shipment in 2021 — a relationship business, scaled deliberately. Today the company moves between 18 and 25 containers a month across eight commodity lines, every one tied to a farmer he knows by name.
            </p>
            <div className="mt-6 inline-flex items-center gap-2 text-sm text-white/90 font-body">
              <PhoneIcon className="h-4 w-4 text-white/60"/> +234 801 234 5678
              <span className="mx-3 text-white/30">·</span>
              <MailIcon className="h-4 w-4 text-white/60"/> info@greenharvestagroexport.com
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

/* ─────────── CONTACT (RFQ) ─────────── */
function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ company: "", name: "", email: "", country: "", product: "Sesame Seeds", qty: "", incoterm: "FOB", port: "", notes: "" });
  const update = k => e => setForm({ ...form, [k]: e.target.value });
  const submit = e => { e.preventDefault(); setSubmitted(true); };

  return (
    <section id="contact" className="relative bg-black py-24 px-4 sm:px-8 md:px-16 lg:px-20 overflow-hidden">
      <div className="starfield"></div>
      <div className="relative z-10 max-w-5xl mx-auto">
        <div className="text-center mb-16">
          <div className="text-sm font-body text-white/80 mb-6">// Request a Quote</div>
          <h2 className="font-heading italic text-white text-5xl md:text-7xl lg:text-[6rem] leading-[0.9] tight-3">
            Tell us what<br/>you <em>need.</em>
          </h2>
          <p className="mt-6 text-base md:text-lg text-white/70 font-body font-light max-w-2xl mx-auto">
            Most serious inquiries come back with a verified Full Corporate Offer within one business day.
          </p>
        </div>

        {submitted ? (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}
            className="liquid-glass-strong p-12 text-center" style={{ borderRadius: "1.5rem" }}>
            <div className="text-xs font-body tracking-[0.3em] uppercase text-white/70 mb-4">◆ Inquiry Received</div>
            <div className="font-heading italic text-white text-5xl md:text-6xl tight-1 mb-6">Thank you.</div>
            <p className="text-white/80 font-body">We'll reach you at <span className="font-heading italic text-white">{form.email || "your email"}</span> within 24 hours.</p>
            <button onClick={() => setSubmitted(false)} className="mt-8 text-sm text-white/70 hover:text-white font-body underline">Send another</button>
          </motion.div>
        ) : (
          <motion.form
            onSubmit={submit}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.2 }}
            transition={{ duration: 0.7 }}
            className="liquid-glass p-8 md:p-10 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6"
            style={{ borderRadius: "1.5rem" }}
          >
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Company</label>
              <input required value={form.company} onChange={update("company")} placeholder="Acme Imports Ltd." className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2"/>
            </div>
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Contact name</label>
              <input required value={form.name} onChange={update("name")} placeholder="Full name" className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2"/>
            </div>
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Email</label>
              <input required type="email" value={form.email} onChange={update("email")} placeholder="you@company.com" className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2"/>
            </div>
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Country</label>
              <input required value={form.country} onChange={update("country")} placeholder="e.g. Country" className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2"/>
            </div>
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Product</label>
              <select value={form.product} onChange={update("product")} className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2">
                {PRODUCTS.map(p => <option key={p.slug} value={p.name} className="bg-black">{p.name}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Quantity / month</label>
              <input value={form.qty} onChange={update("qty")} placeholder="e.g. 100 MT" className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2"/>
            </div>
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Incoterm</label>
              <select value={form.incoterm} onChange={update("incoterm")} className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2">
                {["FOB","CIF","CNF","CFR","DAP"].map(t => <option key={t} className="bg-black">{t}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Destination port</label>
              <input value={form.port} onChange={update("port")} placeholder="e.g. Port name" className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2"/>
            </div>
            <div className="md:col-span-2">
              <label className="block text-[10px] font-body tracking-[0.25em] uppercase text-white/60 mb-2">Notes</label>
              <textarea value={form.notes} onChange={update("notes")} rows="3" placeholder="Specifications, packaging, delivery timeline…" className="w-full bg-transparent border-b border-white/20 focus:border-white/60 outline-none text-white font-body py-2 resize-none"/>
            </div>
            <div className="md:col-span-2 flex justify-end pt-6">
              <button type="submit" className="liquid-glass-strong inline-flex items-center gap-2 px-6 py-3 text-sm font-medium text-white" style={{ borderRadius: 9999 }}>
                Send Inquiry <ArrowUpRight className="h-5 w-5"/>
              </button>
            </div>
          </motion.form>
        )}
      </div>
    </section>
  );
}

/* ─────────── App root ─────────── */
function App() {
  return (
    <>
      <Hero />
      <Capabilities />
      <ProductsSection />
      <Story />
      <Contact />
      <Footer />
      <CallButton callEndpoint="call.php" bookEndpoint="book.php" slotsEndpoint="slots.php" />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);