/* ============================================================
   NAV + HERO + LOGO MARQUEE
   ============================================================ */

/* ----- Sticky nav with glassmorphism on scroll ----- */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [ind, setInd] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f();window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  const industries = [
  { name: 'Real Estate', icon: Icon.HomeBuilding, blurb: 'Qualify buyers, guide tours' },
  { name: 'Retail', icon: Icon.ShoppingBag, blurb: 'Discovery → checkout' },
  { name: 'Travel', icon: Icon.Plane, blurb: 'Itineraries that convert' }];

  return (
    <header className={"sticky top-0 z-50 transition-colors " + (scrolled ? "nav-glass" : "bg-transparent")}>
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 h-[72px] flex items-center justify-between">
        {/* Wordmark */}
        <a href="#top" className="flex items-center gap-2.5 group" aria-label="CogniVend home">
          <Logo className="h-7 w-auto" />
        </a>

        {/* Center nav */}
        <nav className="hidden lg:flex items-center gap-1 text-[14px] text-ink/80">
          <div className="relative"
          onMouseEnter={() => setInd(true)} onMouseLeave={() => setInd(false)}>
            <button className="px-3 py-2 rounded-md hover:text-ink inline-flex items-center gap-1"
            aria-expanded={ind} aria-haspopup="menu"
            onClick={() => setInd((v) => !v)}>
              Industries <Icon.ChevronDown size={14} />
            </button>
            <div className={"absolute left-0 top-full pt-2 transition " + (ind ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 -translate-y-1 pointer-events-none")}>
              <div className="w-[320px] rounded-2xl border hairline bg-paper shadow-lift p-2" role="menu">
                {industries.map((it) =>
                <a key={it.name} href="#industries" role="menuitem"
                className="flex items-start gap-3 p-3 rounded-xl hover:bg-sand-100/70">
                    <span className="w-9 h-9 grid place-items-center rounded-lg bg-sand-100 text-ink">
                      <it.icon size={18} />
                    </span>
                    <span className="flex-1">
                      <span className="block text-[14px] font-medium text-ink">{it.name}</span>
                      <span className="block text-[12.5px] text-ink/60">{it.blurb}</span>
                    </span>
                    <Icon.ArrowUpRight size={14} className="mt-1 text-ink/40" />
                  </a>
                )}
              </div>
            </div>
          </div>
          <a href="#features" className="px-3 py-2 rounded-md hover:text-ink">Features</a>
          <a href="#blog" className="px-3 py-2 rounded-md hover:text-ink">Blog</a>
          <a href="#climate" className="px-3 py-2 rounded-md hover:text-ink">Climate</a>
        </nav>

        {/* Right CTAs */}
        <div className="hidden md:flex items-center gap-2">
          <a href="#contact" className="px-4 py-2.5 text-[13.5px] rounded-full text-ink/80 hover:text-ink hover:bg-ink/5">
            Talk to Sales
          </a>
          <a href="#demo" className="group px-4 py-2.5 text-[13.5px] rounded-full bg-ink text-paper hover:bg-ink-700 inline-flex items-center gap-1.5">
            Book a Demo
            <Icon.ArrowRight size={14} className="transition group-hover:translate-x-0.5" />
          </a>
        </div>

        {/* Mobile burger */}
        <button className="md:hidden p-2 -mr-2" onClick={() => setOpen((v) => !v)} aria-label="Menu" aria-expanded={open}>
          {open ? <Icon.X size={22} /> : <Icon.Menu size={22} />}
        </button>
      </div>

      {/* Mobile menu */}
      {open &&
      <div className="md:hidden border-t hairline nav-glass">
          <div className="px-6 py-4 grid gap-1 text-[15px]">
            <a href="#industries" className="py-2.5">Industries</a>
            <a href="#features" className="py-2.5">Features</a>
            <a href="#blog" className="py-2.5">Blog</a>
            <a href="#climate" className="py-2.5">Climate</a>
            <div className="pt-3 grid grid-cols-2 gap-2">
              <a href="#contact" className="text-center py-2.5 rounded-full border hairline">Talk to Sales</a>
              <a href="#demo" className="text-center py-2.5 rounded-full bg-ink text-paper">Book a Demo</a>
            </div>
          </div>
        </div>
      }
    </header>);

}

/* ----- Animated typing chat mockup ----- */
function HeroChat() {
  /* Sequence:
     0. User typing the question (caret + chars appear)
     1. User bubble settles, AI 'thinking' (3 dots)
     2. AI text streams in
     3. Product card grid appears in a stagger
     4. AI follow-up question streams in
     5. Loop pauses for ~3.5s, then resets
  */
  const userMsg = "I need a sofa for a small apartment, under $1200. Easy to clean — we have a toddler.";
  const aiMsg = "Got it. For ~96 sq ft living rooms with kids, I'd lean to compact sectionals in performance fabric. Three matches under $1,200:";
  const aiQ = "Want me to filter by delivery in <2 weeks, or expand the budget to $1,500?";

  const [phase, setPhase] = React.useState(0); // 0..5
  const [tyU, setTyU] = React.useState("");
  const [tyA, setTyA] = React.useState("");
  const [tyQ, setTyQ] = React.useState("");
  const [cards, setCards] = React.useState(0);

  // simple driver
  React.useEffect(() => {
    let alive = true;let timers = [];
    const wait = (ms) => new Promise((r) => {const t = setTimeout(r, ms);timers.push(t);});
    const typeInto = async (text, setFn, perChar = 22) => {
      for (let i = 1; i <= text.length; i++) {
        if (!alive) return;
        setFn(text.slice(0, i));
        // small pause on punctuation
        const c = text[i - 1];
        await wait(perChar + (",.?".includes(c) ? 80 : 0));
      }
    };
    (async () => {
      while (alive) {
        setTyU("");setTyA("");setTyQ("");setCards(0);setPhase(0);
        await wait(700);
        setPhase(1);
        await typeInto(userMsg, setTyU, 24);
        await wait(550);
        setPhase(2); // ai thinking
        await wait(1100);
        setPhase(3); // ai answer streaming
        await typeInto(aiMsg, setTyA, 14);
        await wait(280);
        setPhase(4); // product cards stagger
        for (let i = 1; i <= 3; i++) {setCards(i);await wait(220);}
        await wait(420);
        setPhase(5); // follow-up question
        await typeInto(aiQ, setTyQ, 16);
        await wait(3600);
      }
    })();
    return () => {alive = false;timers.forEach(clearTimeout);};
  }, []);

  const products = [
  { name: "Halden 2-Seat", price: "$1,099", tag: "Performance weave", swatch: "#7C8B95" },
  { name: "Marlow Compact", price: "$1,149", tag: "Stain-shield", swatch: "#8A95A3" },
  { name: "Orta Slim", price: "$ 989", tag: "Pet-friendly", swatch: "#4F5A66" }];

  return (
    <div className="relative">
      {/* faux window chrome */}
      <div className="rounded-[22px] overflow-hidden border border-white/10 shadow-[0_30px_80px_-30px_rgba(0,0,0,.6)] bg-gradient-to-b from-[#0E2236] to-[#0B1B2B]">
        <div className="flex items-center justify-between px-4 h-10 border-b border-white/5">
          <div className="flex items-center gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-white/15" />
            <span className="w-2.5 h-2.5 rounded-full bg-white/15" />
            <span className="w-2.5 h-2.5 rounded-full bg-white/15" />
          </div>
          <div className="flex items-center gap-1.5 text-[11px] text-white/50 font-mono">
            <span className="w-1.5 h-1.5 rounded-full bg-teal animate-pulse" />
            live · northwind.shop
          </div>
          <div className="text-[11px] text-white/30 font-mono">EN</div>
        </div>

        {/* assistant header */}
        <div className="px-5 pt-5 pb-3 flex items-center gap-3">
          <span className="w-9 h-9 rounded-md grid place-items-center bg-paper px-1.5">
            <Logo className="h-5 w-auto" />
          </span>
          <div>
            <div className="text-[13.5px] text-white font-medium leading-tight">CogniVend Assistant</div>
            <div className="text-[11.5px] text-white/50 leading-tight">Furniture · Online showroom</div>
          </div>
          <div className="ml-auto text-[11px] text-white/40 font-mono">12:08</div>
        </div>

        {/* messages */}
        <div className="px-5 pb-5 space-y-3 text-[13.5px] leading-relaxed min-h-[460px]">
          {/* user */}
          {phase >= 1 &&
          <div className="flex justify-end">
              <div className="bubble-user rounded-2xl rounded-tr-md px-4 py-3 max-w-[78%] text-white/90">
                <span>{tyU}</span>
                {phase === 1 && <span className="caret text-white/70" />}
              </div>
            </div>
          }

          {/* AI thinking */}
          {phase === 2 &&
          <div className="flex">
              <div className="bubble-ai rounded-2xl rounded-tl-md px-4 py-3 text-teal/90">
                <span className="dot" />&nbsp;<span className="dot" />&nbsp;<span className="dot" />
              </div>
            </div>
          }

          {/* AI reply */}
          {phase >= 3 &&
          <div className="flex">
              <div className="bubble-ai rounded-2xl rounded-tl-md px-4 py-3 max-w-[88%] text-white/90">
                <span>{tyA}</span>
                {phase === 3 && <span className="caret text-teal/80" />}
              </div>
            </div>
          }

          {/* product cards */}
          {phase >= 4 &&
          <div className="grid grid-cols-3 gap-2 pt-1">
              {products.map((p, i) =>
            <div key={p.name}
            style={{
              opacity: cards > i ? 1 : 0,
              transform: cards > i ? 'translateY(0)' : 'translateY(6px)',
              transition: 'opacity .35s ease, transform .35s ease'
            }}
            className="prodcard rounded-xl p-2.5">
                  <div className="aspect-[5/4] rounded-md mb-2 relative overflow-hidden"
              style={{ background: p.swatch }}>
                    {/* tiny isometric sofa silhouette */}
                    <svg viewBox="0 0 100 80" className="absolute inset-0 w-full h-full text-white/85" fill="currentColor">
                      <path opacity=".18" d="M10 60h80v6H10z" />
                      <path d="M14 38c0-5 4-8 8-8h56c4 0 8 3 8 8v4c3 1 5 4 5 8v6H9v-6c0-4 2-7 5-8z" />
                      <path opacity=".25" d="M22 42h56v6H22z" />
                    </svg>
                  </div>
                  <div className="text-[11px] text-white/90 font-medium leading-tight truncate">{p.name}</div>
                  <div className="flex items-center justify-between mt-0.5">
                    <span className="text-[10.5px] text-white/55 truncate">{p.tag}</span>
                    <span className="text-[11px] text-teal num">{p.price}</span>
                  </div>
                </div>
            )}
            </div>
          }

          {/* AI follow-up */}
          {phase >= 5 &&
          <div className="flex">
              <div className="bubble-ai rounded-2xl rounded-tl-md px-4 py-3 max-w-[88%] text-white/90">
                <span>{tyQ}</span><span className="caret text-teal/80" />
              </div>
            </div>
          }
        </div>

        {/* composer */}
        <div className="border-t border-white/5 px-4 py-3 flex items-center gap-2">
          <div className="flex-1 h-9 rounded-full bg-white/5 border border-white/10 flex items-center px-3 text-[12.5px] text-white/40">
            Ask anything about our store…
          </div>
          <button className="w-9 h-9 rounded-full bg-teal text-ink grid place-items-center" aria-label="Send">
            <Icon.Send size={15} />
          </button>
        </div>
      </div>

      {/* floating context badges */}
      <div className="hidden md:flex absolute -left-4 top-16 bg-paper text-ink rounded-full px-3 py-1.5 text-[11.5px] shadow-lift items-center gap-1.5 border hairline">
        <Icon.Eye size={13} /> intent detected: <span className="font-medium">budget · space · stain-resistant</span>
      </div>
      <div className="hidden md:flex absolute -right-4 bottom-28 bg-ink text-paper rounded-full px-3 py-1.5 text-[11.5px] shadow-lift items-center gap-1.5">
        <Icon.TrendUp size={13} className="text-teal" /> AOV <span className="num text-teal">+18%</span>
      </div>
    </div>);

}

/* ----- Hero ----- */
function Hero() {
  return (
    <section id="top" className="relative mesh-hero text-paper grain overflow-hidden">
      {/* faint grid */}
      <svg className="absolute inset-0 w-full h-full opacity-[.06] pointer-events-none" aria-hidden="true">
        <defs>
          <pattern id="grid" width="56" height="56" patternUnits="userSpaceOnUse">
            <path d="M56 0H0V56" fill="none" stroke="currentColor" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>

      <div className="relative max-w-[1320px] mx-auto px-6 lg:px-10 pt-10 lg:pt-16 pb-20 lg:pb-28 grid lg:grid-cols-[1.05fr_1fr] gap-12 lg:gap-16 items-center">
        {/* Left copy */}
        <div className="reveal in">
          {/* eyebrow */}
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/15 bg-white/[.04] text-[12px] text-white/75 backdrop-blur-sm">
            <span className="w-1.5 h-1.5 rounded-full bg-teal" />
            GenAI <span className="text-white/35">·</span> Conversational Commerce
          </div>

          <h1 className="font-display text-[64px] sm:text-[84px] lg:text-[108px] leading-[0.92] tracking-tight3 mt-6 text-paper" style={{ fontFamily: "Quicksand" }}>
            GenAI that<br />
            <span className="italic">actually</span> sells.
          </h1>

          <p className="mt-7 max-w-[34ch] text-[17.5px] leading-[1.55] text-white/72">
            We simplify customer journeys, lift conversions, and upsell intelligently — in any language, on any storefront.
          </p>

          <div className="mt-9 flex flex-wrap items-center gap-3">
            <a href="#demo" className="group 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={16} className="transition group-hover:translate-x-0.5" />
            </a>
            <a href="#live" className="inline-flex items-center gap-2 px-5 py-3.5 rounded-full border border-white/15 bg-white/[.03] text-[14.5px] text-white hover:bg-white/[.06]">
              <Icon.Play size={14} />
              See it live
            </a>
          </div>

          {/* hero footnote */}
          <div className="mt-10 flex items-center gap-5 text-[12px] text-white/55">
            <div className="flex items-center gap-2"><Icon.Shield size={13} /> SOC 2-aligned · PII redaction</div>
            <span className="w-1 h-1 rounded-full bg-white/25" />
            <div className="flex items-center gap-2"><Icon.Globe size={13} /> 30+ languages, day one</div>
          </div>
        </div>

        {/* Right: chat mockup */}
        <div className="reveal in lg:pl-4">
          <HeroChat />
        </div>
      </div>

      {/* Logo marquee */}
      <LogoMarquee />
    </section>);

}

/* ----- Logo marquee ----- */
function LogoMarquee() {
  const logos = [
  "NORTHWIND", "Atlasvera", "HOUSE OF KARIM", "peregrin", "Solène", "ARCO×", "Olema Travel"];

  const row =
  <div className="flex items-center gap-14 px-7 shrink-0">
      {logos.map((l, i) =>
    <div key={i} className="font-display italic text-[22px] tracking-tight2 text-white/55 whitespace-nowrap">
          {l}
        </div>
    )}
    </div>;

  return (
    <div className="relative border-t border-white/8 bg-white/[.02]">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 py-6 flex items-center gap-8">
        <div className="text-[11.5px] font-mono uppercase tracking-[.18em] text-white/40 shrink-0">
          Selling now on
        </div>
        <div className="relative flex-1 overflow-hidden mask-fade">
          <div className="flex marquee-track w-max">
            {row}{row}
          </div>
        </div>
      </div>
      <style>{`.mask-fade{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}`}</style>
    </div>);

}