/* ============================================================
   INDUSTRIES · DEMO · CLIMATE · BLOG · NEWSLETTER · FOOTER
   ============================================================ */

/* ----- Industries showcase ----- */
const INDUSTRIES = {
  retail: {
    icon: Icon.ShoppingBag,
    label: "Retail",
    blurb: "From browse to basket — across thousands of SKUs.",
    chat: [
    { who: "user", text: "Looking for a gift for my dad — he likes hiking and reads a lot. Budget around $200." },
    { who: "ai", text: "Great brief. Two angles: a packable jacket (he'll use it) or a hardcover atlas + reading light combo. Want me to lean utility or memorable?" },
    { who: "user", text: "Memorable." },
    { who: "ai", text: "Here's a curated trio under $200, all giftable today:", products: [
      { n: "Trail Atlas, Vol II", p: "$ 64", t: "Hardcover", img: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&w=300&h=240&q=70" },
      { n: "Cordless Reader", p: "$ 89", t: "Warm-light", img: "https://images.unsplash.com/photo-1532153975070-2e9ab71f1b14?auto=format&fit=crop&w=300&h=240&q=70" },
      { n: "Field Notebook Set", p: "$ 42", t: "Leather", img: "https://images.unsplash.com/photo-1531346878377-a5be20888e57?auto=format&fit=crop&w=300&h=240&q=70" }]
    }],

    kpis: [
    { v: "+34%", l: "qualified leads on PDPs", i: Icon.TrendUp },
    { v: "−41%", l: "bounce on category pages", i: Icon.Eye }]

  },
  realestate: {
    icon: Icon.HomeBuilding,
    label: "Real Estate",
    blurb: "Qualify buyers, schedule tours, close faster.",
    chat: [
    { who: "user", text: "Hi — 2 bed, in Dubai Marina, walking distance to metro, AED 1.6–1.9M, ready by Q4." },
    { who: "ai", text: "Tight brief — well done. I'm seeing 7 listings that match. The closest three are below 500m from a metro entrance and handover-ready before December." },
    { who: "user", text: "Family-friendly building, gym would be nice." },
    { who: "ai", text: "Filtering for family amenities + gym brings it to two. Want me to book a viewing with Lina this Saturday morning?", products: [
      { n: "Marina 88, T2", p: "AED 1.78M", t: "Handover Nov", img: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=300&h=240&q=70" },
      { n: "Bayview Court 4", p: "AED 1.85M", t: "Family wing", img: "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&w=300&h=240&q=70" }]
    }],

    kpis: [
    { v: "3.2×", l: "viewings booked per chat", i: Icon.Users },
    { v: "−58%", l: "unqualified inquiries to brokers", i: Icon.Shield }]

  },
  travel: {
    icon: Icon.Plane,
    label: "Travel",
    blurb: "Inspiration → itinerary → confirmation, in one thread.",
    chat: [
    { who: "user", text: "4 nights, end of October, somewhere warm, beach + interesting food, not Bali. We're two adults." },
    { who: "ai", text: "Three angles by vibe — relaxed (Lefkada), foodie (Lisbon coast), bold (Zanzibar). Flights from your last booking origin are all under 8h. Pick a vibe?" },
    { who: "user", text: "Foodie." },
    { who: "ai", text: "Lisbon coast it is. Here are 3 stays with great food access. Shall I lock the dates?", products: [
      { n: "Belém Boutique", p: "€ 248/n", t: "Sea view", img: "https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&w=300&h=240&q=70" },
      { n: "Cascais Loft", p: "€ 215/n", t: "Pool", img: "https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=300&h=240&q=70" },
      { n: "Sintra Villa 4", p: "€ 312/n", t: "Garden", img: "https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=300&h=240&q=70" }]
    }],

    kpis: [
    { v: "+22%", l: "avg. booking value", i: Icon.TrendUp },
    { v: "19m", l: "shorter time-to-book", i: Icon.TrendUp }]

  }
};

function IndustryChat({ data }) {
  return (
    <div className="rounded-2xl bg-ink-900 text-paper p-4 sm:p-5 shadow-lift border border-white/5">
      <div className="flex items-center gap-2.5 pb-3 border-b border-white/8">
        <span className="w-8 h-8 rounded-md grid place-items-center bg-paper px-1.5"><Logo className="h-4 w-auto"/></span>
        <div className="text-[12.5px]">
          <div className="text-white">CogniVend Assistant</div>
          <div className="text-white/45 text-[11px]">{data.label.toLowerCase()}.cognivend.ai</div>
        </div>
        <span className="ml-auto text-[10.5px] text-white/40 font-mono">illustrative</span>
      </div>

      <div className="pt-4 space-y-2.5 text-[13px] leading-relaxed">
        {data.chat.map((m, i) =>
        <React.Fragment key={i}>
            <div className={"flex " + (m.who === "user" ? "justify-end" : "justify-start")}>
              <div className={"max-w-[82%] px-3.5 py-2.5 rounded-2xl " + (m.who === "user" ?
            "bubble-user text-white/90 rounded-tr-md" :
            "bubble-ai text-white/90 rounded-tl-md")}>
                {m.text}
              </div>
            </div>
            {m.products &&
          <div className="grid grid-cols-3 gap-2 pt-1">
                {m.products.map((p) =>
            <div key={p.n} className="prodcard rounded-xl p-2.5">
                    <div className="aspect-[5/4] rounded-md mb-2 overflow-hidden border border-white/[.06] bg-white/[.04]">
                      {p.img && <img src={p.img} alt={p.n} loading="lazy" className="w-full h-full object-cover" />}
                    </div>
                    <div className="text-[11px] text-white/90 font-medium truncate">{p.n}</div>
                    <div className="flex items-center justify-between mt-0.5">
                      <span className="text-[10.5px] text-white/55 truncate">{p.t}</span>
                      <span className="text-[11px] num text-teal">{p.p}</span>
                    </div>
                  </div>
            )}
              </div>
          }
          </React.Fragment>
        )}
      </div>
    </div>);

}

function Industries() {
  const keys = ["retail", "realestate", "travel"];
  const [k, setK] = React.useState("retail");
  const data = INDUSTRIES[k];

  return (
    <section id="industries" className="bg-sand-50 border-t hairline">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 py-20 lg:py-28">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div className="max-w-[680px]">
            <div className="font-mono text-[12px] tracking-[.18em] uppercase text-ink/55">Built for these conversations</div>
            <h2 className="font-display text-[44px] lg:text-[64px] leading-[0.95] tracking-tight3 mt-3">
              Three industries, one assistant — <span className="italic">three very different jobs.</span>
            </h2>
          </div>
          <p className="text-[14.5px] text-ink/60 max-w-[36ch]">
            Sample threads from live deployments. Numbers are illustrative — your mileage will vary by catalog and traffic.
          </p>
        </div>

        {/* tab bar */}
        <div role="tablist" aria-label="Industries"
        className="mt-10 flex items-center gap-1 border-b hairline overflow-x-auto">
          {keys.map((key) => {
            const D = INDUSTRIES[key];
            const active = key === k;
            return (
              <button key={key} role="tab" aria-selected={active}
              onClick={() => setK(key)}
              className={"relative flex items-center gap-2 px-4 sm:px-5 py-3.5 text-[14px] whitespace-nowrap " + (active ? "tab-active" : "text-ink/55 hover:text-ink/80")}>
                <D.icon size={16} />
                {D.label}
                <span className={"absolute left-3 right-3 -bottom-px h-[2px] bg-ink tab-bar " + (active ? "scale-x-100" : "")}
                style={{ transformOrigin: 'left', transform: active ? 'scaleX(1)' : 'scaleX(0)' }} />
              </button>);

          })}
        </div>

        <div className="mt-8 grid lg:grid-cols-[1.1fr_1fr] gap-8 lg:gap-12 items-start" key={k}>
          {/* Left: chat */}
          <div className="reveal in">
            <IndustryChat data={data} />
          </div>
          {/* Right: KPIs + blurb */}
          <div className="reveal in">
            <div className="font-mono text-[12px] tracking-[.18em] uppercase text-ink/55 flex items-center gap-2">
              <data.icon size={14} /> {data.label}
            </div>
            <h3 className="font-display text-[36px] lg:text-[44px] leading-[1.02] tracking-tight3 mt-2">
              {data.blurb}
            </h3>

            <div className="grid grid-cols-2 gap-3 mt-7">
              {data.kpis.map((kpi, i) =>
              <div key={i} className="rounded-2xl bg-paper border hairline p-5 shadow-soft">
                  <div className="flex items-center justify-between text-ink/50">
                    <kpi.i size={16} />
                    <span className="text-[10.5px] font-mono uppercase tracking-[.16em]">illustrative</span>
                  </div>
                  <div className="font-display text-[56px] lg:text-[64px] leading-none tracking-tight3 num mt-3">{kpi.v}</div>
                  <div className="text-[12.5px] text-ink/65 mt-2 leading-snug">{kpi.l}</div>
                </div>
              )}
            </div>

            <a href="#demo" className="mt-8 inline-flex items-center gap-2 text-[13.5px] u-hover">
              See a tailored {data.label.toLowerCase()} deployment <Icon.ArrowUpRight size={14} />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   INTERACTIVE DEMO STRIP — working stub chat
   ============================================================ */

function DemoStrip() {
  const [msgs, setMsgs] = React.useState([
  { who: "ai", text: "Hi! I'm a stubbed CogniVend agent — try a real prompt or pick a suggestion below." }]
  );
  const [val, setVal] = React.useState("");
  const [thinking, setThinking] = React.useState(false);
  const scrollRef = React.useRef(null);
  const mountedRef = React.useRef(false);

  React.useEffect(() => {
    // Skip first paint — only auto-scroll once there's been an exchange.
    if (!mountedRef.current) {mountedRef.current = true;return;}
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [msgs, thinking]);

  const suggestions = [
  "What's your return policy?",
  "Compare your two best-selling sofas.",
  "Find me a winter coat under $300.",
  "I want to speak to a person."];


  const reply = (q) => {
    const lower = q.toLowerCase();
    if (lower.includes("return") || lower.includes("refund"))
    return "30-day free returns, 14-day full refund. Mattresses get a 100-night trial. Want the policy link?";
    if (lower.includes("compare"))
    return "The Halden 2-Seat ($1,099) wins on stain-shield and 6-day delivery. The Marlow Compact ($1,149) wins on modularity. Which matters more — speed or flexibility?";
    if (lower.includes("coat") || lower.includes("jacket"))
    return "Two strong options under $300: the Northwind Down Parka ($268, −20°C rated) and the Atlas Wool Topcoat ($289, smart-casual). Are you styling for the office or the outdoors?";
    if (lower.includes("person") || lower.includes("human") || lower.includes("sales") || lower.includes("agent"))
    return "Of course — I'll hand you to Lina with the context of this thread. She typically responds within ~60 seconds. Shall I bring her in?";
    if (lower.includes("language") || lower.includes("arabic") || lower.includes("hindi"))
    return "نعم — يمكنني التحدث بالعربية. أو الفرنسية أو الإسبانية أو الهندية. أيهما تفضّل؟";
    return "Good question. In a real deployment I'd answer from your catalog and knowledge base. For this demo: try 'returns', 'compare', 'coat under $300', or 'speak to a person'.";
  };

  const send = (text) => {
    const t = (text ?? val).trim();
    if (!t) return;
    setMsgs((m) => [...m, { who: "user", text: t }]);
    setVal("");
    setThinking(true);
    setTimeout(() => {
      setThinking(false);
      setMsgs((m) => [...m, { who: "ai", text: reply(t) }]);
    }, 700 + Math.random() * 500);
  };

  return (
    <section id="demo" className="bg-paper border-t hairline">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 py-20 lg:py-28">
        <div className="grid lg:grid-cols-[1fr_1.2fr] gap-10 lg:gap-16 items-start">
          <div className="lg:sticky lg:top-28">
            <div className="font-mono text-[12px] tracking-[.18em] uppercase text-ink/55">Try it</div>
            <h2 className="font-display text-[44px] lg:text-[64px] leading-[0.95] tracking-tight3 mt-3">
              Skip the deck.<br />Have the <span className="italic">conversation.</span>
            </h2>
            <p className="mt-4 text-[15.5px] leading-[1.55] text-ink/65 max-w-[42ch]">
              A miniature CogniVend you can poke at — no signup. Stubbed for this demo: responses are local,
              not from a real catalog. Production grounds every answer in your data.
            </p>
            <ul className="mt-6 space-y-2 text-[13.5px] text-ink/70">
              {["No data leaves the page", "No tracking, no email collection", "Test prompts pre-seeded below"].map((t) =>
              <li key={t} className="flex items-center gap-2"><Icon.Check size={14} className="text-teal-700" /> {t}</li>
              )}
            </ul>
          </div>

          {/* widget */}
          <div className="rounded-3xl bg-ink-900 text-paper border border-white/8 shadow-lift overflow-hidden">
            <div className="flex items-center justify-between px-5 h-12 border-b border-white/8">
              <div className="flex items-center gap-2.5">
                <span className="w-7 h-7 rounded-md grid place-items-center bg-paper px-1"><Logo className="h-4 w-auto"/></span>
                <div className="text-[12.5px]">
                  <div className="text-white leading-none">CogniVend · live sandbox</div>
                  <div className="text-white/45 text-[10.5px] leading-tight mt-0.5">stubbed responses</div>
                </div>
              </div>
              <div className="text-[10.5px] text-white/40 font-mono">v 2026.05</div>
            </div>

            <div ref={scrollRef} className="px-5 py-5 max-h-[420px] min-h-[380px] overflow-y-auto space-y-2.5 text-[13.5px]">
              {msgs.map((m, i) =>
              <div key={i} className={"flex " + (m.who === "user" ? "justify-end" : "justify-start")}>
                  <div className={"max-w-[80%] px-3.5 py-2.5 rounded-2xl " + (m.who === "user" ?
                "bubble-user text-white/90 rounded-tr-md" :
                "bubble-ai text-white/90 rounded-tl-md")}>
                    {m.text}
                  </div>
                </div>
              )}
              {thinking &&
              <div className="flex">
                  <div className="bubble-ai rounded-2xl rounded-tl-md px-3.5 py-2.5 text-teal/90">
                    <span className="dot" />&nbsp;<span className="dot" />&nbsp;<span className="dot" />
                  </div>
                </div>
              }
            </div>

            {/* suggestions */}
            <div className="px-5 pb-3 flex flex-wrap gap-1.5">
              {suggestions.map((s) =>
              <button key={s} onClick={() => send(s)}
              className="text-[11.5px] px-2.5 py-1 rounded-full bg-white/[.05] border border-white/10 text-white/75 hover:bg-white/[.10]">
                  {s}
                </button>
              )}
            </div>

            {/* composer */}
            <div className="border-t border-white/8 px-3 py-3 flex items-center gap-2">
              <input
                aria-label="Message"
                value={val}
                onChange={(e) => setVal(e.target.value)}
                onKeyDown={(e) => {if (e.key === 'Enter') send();}}
                placeholder="Ask CogniVend anything…"
                className="flex-1 h-10 rounded-full bg-white/[.05] border border-white/10 px-4 text-[13.5px] text-white placeholder:text-white/35 focus:outline-none focus:border-teal/50" />
              
              <button onClick={() => send()} className="h-10 px-4 rounded-full bg-teal text-ink-900 inline-flex items-center gap-1.5 text-[13px] font-medium hover:bg-teal-400" aria-label="Send">
                Send <Icon.Send size={13} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   CLIMATE
   ============================================================ */

function Climate() {
  return (
    <section id="climate" className="relative mesh-climate overflow-hidden border-t hairline">
      <div className="relative max-w-[1320px] mx-auto px-6 lg:px-10 py-20 lg:py-28 grid lg:grid-cols-[1.05fr_1fr] gap-10 lg:gap-16 items-center">
        <div>
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#1F6B3E]/12 border border-[#1F6B3E]/30 text-[#0E4D2C] text-[12px]">
            <Icon.Leaf size={13} /> Climate Programme
          </div>
          <h2 className="font-display text-[52px] lg:text-[80px] leading-[0.92] tracking-tight3 mt-5 text-ink">
            Profit & Planet:<br />
            a partnership <span className="italic">we fund.</span>
          </h2>
          <p className="mt-6 text-[17px] leading-[1.55] text-ink/70 max-w-[48ch]">
            For businesses serious about sustainability, we offer CogniVend at cost. We absorb the margin —
            you reinvest the savings in your own climate work.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <a href="https://arit.co/climate-action" target="_blank" rel="noreferrer"
            className="group inline-flex items-center gap-2 px-5 py-3.5 rounded-full bg-ink text-paper text-[14.5px] hover:bg-ink-700">
              Apply for the Climate Programme
              <Icon.ArrowUpRight size={15} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </a>
            <a href="#" className="px-5 py-3.5 rounded-full border border-ink/15 text-[14.5px] hover:bg-ink/[.04]">
              Read the methodology
            </a>
          </div>

          <div className="mt-10 grid grid-cols-3 gap-3 max-w-[520px]">
            {[
            { v: "At cost", l: "pricing for qualifying brands" },
            { v: "100%", l: "of our margin reinvested" },
            { v: "2026", l: "climate cohort now open" }].
            map((s, i) =>
            <div key={i} className="rounded-2xl bg-white border border-ink/8 p-4">
                <div className="font-display text-[28px] tracking-tight2 leading-none">{s.v}</div>
                <div className="text-[12px] text-ink/60 mt-2 leading-snug">{s.l}</div>
              </div>
            )}
          </div>
        </div>

        <div className="relative">
          <img
            src="assets/climate-robot-planet.png"
            alt="A robotic hand cradling Earth, with forests growing on its surface — illustrating CogniVend's climate programme."
            className="relative w-full h-auto select-none"
          />
        </div>
      </div>
    </section>);

}

/* ============================================================
   BLOG TEASER (with skeleton)
   ============================================================ */

const POSTS = [
{
  cat: "Privacy & Data",
  title: "Conversations leave fingerprints. Here's how we keep yours clean.",
  excerpt: "Why we redact PII at the edge, scope every retrieval to your account, and never train shared models on customer chats.",
  read: "6 min", date: "May 11, 2026",
  accent: "teal"
},
{
  cat: "Field Notes",
  title: "Navigating the AI jungle, without becoming part of the wildlife.",
  excerpt: "A buyer's guide for CX leaders drowning in 'AI-powered' RFPs — the four questions that separate substance from spectacle.",
  read: "9 min", date: "Apr 28, 2026",
  accent: "ink"
},
{
  cat: "Sustainability",
  title: "What 'climate-positive' actually means in B2B software.",
  excerpt: "The numbers, the math, and why we publish the spreadsheet that calculates our pricing for climate-aligned partners.",
  read: "7 min", date: "Apr 14, 2026",
  accent: "slate"
}];


function PostCard({ p }) {
  const accent = p.accent === "teal" ? "bg-teal/15 text-teal-700 border-teal/30" :
  p.accent === "slate" ? "bg-slate-500/15 text-slate-700 border-slate-500/30" :
  "bg-ink/[.06] text-ink/75 border-ink/15";
  const thumbBg = p.accent === "teal" ? "#0B1B2B" :
                  p.accent === "slate" ? "#475569" : "#14283C";
  return (
    <a href="#" className="group block">
      <div className="aspect-[16/10] rounded-2xl overflow-hidden relative p-6 flex flex-col justify-between" style={{ background: thumbBg }}>
        <div className="font-mono text-[10.5px] tracking-[.18em] uppercase text-white/55">{p.cat}</div>
        <div className="font-display italic text-[44px] leading-[0.95] tracking-tight3 text-white/90 max-w-[80%]">
          {p.title.split(' ').slice(0, 3).join(' ')}…
        </div>
      </div>
      <div className="mt-4 flex items-center gap-2">
        <span className={"text-[11px] px-2 py-0.5 rounded-full border " + accent}>{p.cat}</span>
        <span className="text-[11.5px] text-ink/45">·</span>
        <span className="text-[11.5px] text-ink/55">{p.read} read</span>
        <span className="ml-auto text-[11.5px] text-ink/45">{p.date}</span>
      </div>
      <h3 className="mt-3 font-display text-[28px] leading-[1.05] tracking-tight2 text-ink group-hover:underline decoration-1 underline-offset-4">
        {p.title}
      </h3>
      <p className="mt-2 text-[14px] text-ink/65 leading-[1.55] line-clamp-2">{p.excerpt}</p>
    </a>);

}

function PostSkeleton() {
  return (
    <div>
      <div className="aspect-[16/10] rounded-2xl skeleton" />
      <div className="mt-4 h-3 w-28 rounded skeleton" />
      <div className="mt-3 h-6 w-[90%] rounded skeleton" />
      <div className="mt-2 h-6 w-[60%] rounded skeleton" />
      <div className="mt-3 h-3 w-full rounded skeleton" />
      <div className="mt-2 h-3 w-[80%] rounded skeleton" />
    </div>);

}

function BlogTeaser() {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 900);
    return () => clearTimeout(t);
  }, []);
  return (
    <section id="blog" className="bg-paper border-t hairline">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 py-20 lg:py-28">
        <div className="flex flex-wrap items-end justify-between gap-6 mb-10">
          <div>
            <div className="font-mono text-[12px] tracking-[.18em] uppercase text-ink/55">Field notes</div>
            <h2 className="font-display text-[44px] lg:text-[64px] leading-[0.95] tracking-tight3 mt-3">
              What we're <span className="italic">thinking</span> about.
            </h2>
          </div>
          <a href="#" className="text-[14px] inline-flex items-center gap-1.5 u-hover">All writing <Icon.ArrowUpRight size={14} /></a>
        </div>

        <div className="grid md:grid-cols-3 gap-7 lg:gap-9">
          {loaded ?
          POSTS.map((p, i) => <PostCard key={i} p={p} />) :
          Array.from({ length: 3 }).map((_, i) => <PostSkeleton key={i} />)}
        </div>
      </div>
    </section>);

}

/* ============================================================
   NEWSLETTER + CTA BAND
   ============================================================ */

function NewsletterBand() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setSent(true);
  };
  return (
    <section id="contact" className="bg-paper border-t hairline">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 py-20 lg:py-28 grid lg:grid-cols-[1.05fr_1fr] gap-8">
        {/* Newsletter */}
        <div className="rounded-3xl bg-sand-100 border hairline p-8 lg:p-12">
          <div className="font-mono text-[12px] tracking-[.18em] uppercase text-ink/55">Newsletter</div>
          <h3 className="font-display text-[40px] lg:text-[52px] leading-[0.98] tracking-tight3 mt-3">
            Be the first <span className="italic">to know.</span>
          </h3>
          <p className="mt-4 text-[14.5px] text-ink/65 max-w-[44ch]">
            A monthly dispatch on conversational commerce, the AI buyer's market, and our climate programme.
            Roughly 600 words. No fluff.
          </p>
          <form onSubmit={submit} className="mt-7 flex flex-col sm:flex-row gap-2 max-w-[480px]">
            <label className="flex-1 relative">
              <span className="sr-only">Email</span>
              <Icon.Mail size={15} className="absolute left-4 top-1/2 -translate-y-1/2 text-ink/45" />
              <input
                type="email" required
                value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="you@company.com"
                className="w-full h-12 pl-11 pr-4 rounded-full bg-paper border hairline text-[14px] focus:outline-none focus:border-ink/30" />
              
            </label>
            <button type="submit" className="h-12 px-5 rounded-full bg-ink text-paper text-[14px] inline-flex items-center justify-center gap-1.5 hover:bg-ink-700">
              {sent ? <>Subscribed <Icon.Check size={14} /></> : <>Submit <Icon.ArrowRight size={14} /></>}
            </button>
          </form>
          <div className="mt-3 text-[11.5px] text-ink/50">By subscribing you agree to our privacy policy. Unsubscribe in one click.</div>
        </div>

        {/* Closing CTA card */}
        <div className="rounded-3xl bg-ink-900 text-paper p-8 lg:p-12 relative overflow-hidden">
          <div className="relative">
            <div className="font-mono text-[12px] tracking-[.18em] uppercase text-white/55">20-minute demo</div>
            <h3 className="font-display text-[36px] lg:text-[44px] leading-[1.0] tracking-tight3 mt-3">
              See CogniVend on <span className="italic">your own</span> site.
            </h3>
            <p className="mt-4 text-[14.5px] text-white/65 max-w-[42ch]">
              Send us a URL. We'll show you the assistant grounded in your real catalog, in your tone — in 20 minutes flat.
            </p>
            <a href="#" className="mt-7 inline-flex items-center gap-2 px-5 py-3.5 rounded-full bg-teal text-ink-900 text-[14.5px] font-medium hover:bg-teal-400">
              Book a Demo <Icon.ArrowRight size={15} />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   FOOTER
   ============================================================ */

function Footer() {
  const cols = [
  { h: "Product", items: ["Features", "Industries", "Pricing", "Security"] },
  { h: "Company", items: ["About", "Careers", "Why CogniVend", "Climate"] },
  { h: "Resources", items: ["Blog", "Docs", "Case Studies", "Changelog"] }];

  const [locale, setLocale] = React.useState("EN");
  return (
    <footer className="bg-ink-900 text-paper">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 pt-20 pb-10">
        {/* Top: wordmark + columns */}
        <div className="grid lg:grid-cols-[1.4fr_1fr_1fr_1fr_1.1fr] gap-10">
          <div>
            <a href="#top" className="flex items-center gap-2.5">
              <span className="grid place-items-center bg-paper rounded-[10px] px-2 py-1.5">
                <Logo className="h-6 w-auto" />
              </span>
              <span className="font-display text-[24px] tracking-tight2 leading-none">CogniVend</span>
            </a>
            <p className="mt-5 text-[14px] text-white/55 max-w-[34ch] leading-[1.55]">
              GenAI conversational commerce — designed in Dubai, deployed worldwide.
            </p>

            <div className="mt-6 flex items-center gap-2 text-[11.5px]">
              {["EN", "AR"].map((l) =>
              <button key={l} onClick={() => setLocale(l)}
              className={"px-2.5 py-1 rounded-full border transition " + (
              locale === l ? "bg-paper text-ink border-paper" : "border-white/15 text-white/65 hover:text-white")}>
                  {l}
                </button>
              )}
              <span className="text-white/40">·</span>
              <span className="text-white/45">site is RTL-ready</span>
            </div>
          </div>

          {cols.map((c) =>
          <div key={c.h}>
              <div className="font-mono text-[11px] tracking-[.18em] uppercase text-white/45">{c.h}</div>
              <ul className="mt-4 space-y-2.5 text-[14px]">
                {c.items.map((it) =>
              <li key={it}><a href="#" className="text-white/80 hover:text-white">{it}</a></li>
              )}
              </ul>
            </div>
          )}

          <div>
            <div className="font-mono text-[11px] tracking-[.18em] uppercase text-white/45">Connect</div>
            <ul className="mt-4 space-y-2.5 text-[14px] text-white/80">
              <li className="flex items-center gap-2"><Icon.Phone size={14} className="text-teal" /> +971 52 410 0137</li>
              <li className="flex items-center gap-2"><Icon.Mail size={14} className="text-teal" /> info@cognivend.com</li>
              <li className="flex items-start gap-2"><Icon.MapPin size={14} className="text-teal mt-1" />
                <span>DIFC, Dubai, UAE</span></li>
            </ul>
            <div className="mt-5 flex items-center gap-2">
              {[Icon.X_brand, Icon.LinkedIn, Icon.Youtube, Icon.Instagram, Icon.Whatsapp].map((Ic, i) =>
              <a key={i} href="#" className="w-9 h-9 grid place-items-center rounded-full border border-white/15 text-white/75 hover:text-white hover:border-white/30">
                  <Ic size={14} />
                </a>
              )}
            </div>
          </div>
        </div>

        {/* legal */}
        <div className="mt-14 border-t border-white/10 pt-6 flex flex-wrap items-center justify-between gap-4 text-[12px] text-white/50">
          <div>© 2026 ARIT Information Technology. All rights reserved.</div>
          <div className="flex items-center gap-5">
            <a href="#" className="hover:text-white">Terms</a>
            <a href="#" className="hover:text-white">Privacy</a>
            <a href="#" className="hover:text-white">Cookies</a>
            <a href="#" className="hover:text-white">Status</a>
          </div>
        </div>
      </div>
    </footer>);

}