/* ============================================================
   VALUE STRIP + FEATURE PILLARS
   ============================================================ */

/* ----- Value strip: 4 stat-style cards ----- */
function ValueStrip() {
  const items = [
  { icon: Icon.Sliders, title: "Tailored to your brand & industry", proof: "Tuned on your catalog, tone, and policies in days, not quarters." },
  { icon: Icon.Eye, title: "Deep customer behavior insights", proof: "Every conversation surfaces intent, friction, and demand signals." },
  { icon: Icon.TrendUp, title: "Higher AOV via smart upsell", proof: "Bundles and cross-sells appear when they actually fit the basket." },
  { icon: Icon.Languages, title: "Multilingual reach", proof: "Fluent in 30+ languages — your one storefront speaks them all." }];

  return (
    <section className="bg-paper border-b hairline">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 py-14 lg:py-20">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-[var(--rule)] rounded-2xl overflow-hidden border hairline">
          {items.map((it, i) =>
          <div key={i} className="group bg-paper p-7 lg:p-8 flex flex-col gap-6 min-h-[220px]">
              <div className="flex items-center justify-between">
                <span className="w-10 h-10 rounded-xl bg-ink text-paper grid place-items-center">
                  <it.icon size={18} />
                </span>
                <span className="font-mono text-[11px] text-ink/40 num">0{i + 1}</span>
              </div>
              <div className="mt-auto">
                <h3 className="font-display text-[26px] lg:text-[28px] leading-[1.05] tracking-tight2 u-hover inline">
                  {it.title}
                </h3>
                <p className="mt-3 text-[13.5px] leading-[1.55] text-ink/65 max-w-[34ch]">
                  {it.proof}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   FEATURE PILLARS
   ============================================================ */

/* ----- Tiny mini-mockups for each feature card (inline SVG/HTML) ----- */

function MiniIntelligentSearch() {
  return (
    <div className="rounded-xl bg-ink-900 text-paper p-3 h-[150px] overflow-hidden">
      <div className="flex items-center gap-2 px-3 h-9 rounded-lg bg-white/[.06] border border-white/10 text-[12px]">
        <Icon.Search size={14} className="text-teal" />
        <span className="text-white/85">something cozy for a rainy reading nook<span className="caret text-teal/80" /></span>
      </div>
      <div className="mt-2 text-[10.5px] uppercase tracking-[.16em] text-white/45 font-mono">intent</div>
      <div className="mt-1 flex flex-wrap gap-1.5">
        {["mood: cozy", "use: reading", "texture: soft", "light-need: high"].map((t) =>
        <span key={t} className="text-[11px] px-2 py-0.5 rounded-full bg-teal/12 text-teal border border-teal/25">{t}</span>
        )}
      </div>
    </div>);

}

function MiniGuidedExploration() {
  const qs = ["Indoors or outdoors?", "Sun or shade?", "Pet-safe needed?"];
  return (
    <div className="rounded-xl bg-paper p-3 border hairline h-[150px]">
      <div className="text-[10.5px] uppercase tracking-[.16em] text-ink/45 font-mono">guided q&a</div>
      <div className="mt-1.5 space-y-1.5">
        {qs.map((q, i) =>
        <div key={i} className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-sand-100/70 text-[12px]">
            <span className="w-4 h-4 rounded-full border hairline grid place-items-center text-[10px] num">{i + 1}</span>
            <span className="flex-1 truncate">{q}</span>
            {i < 2 ? <Icon.Check size={13} className="text-teal-700" /> : <Icon.ChevronRight size={13} className="text-ink/40" />}
          </div>
        )}
      </div>
    </div>);

}

function MiniNavigation() {
  return (
    <div className="rounded-xl bg-paper p-3 border hairline h-[150px] relative overflow-hidden">
      {/* faux page wireframe */}
      <div className="grid grid-cols-3 gap-1.5 h-full">
        {Array.from({ length: 9 }).map((_, i) =>
        <div key={i} className={"rounded-md " + (i === 4 ? "bg-teal/20 outline outline-2 outline-teal" : "bg-ink/[.06]")} />
        )}
      </div>
      {/* cursor path */}
      <svg className="absolute inset-3 pointer-events-none" viewBox="0 0 200 120" fill="none">
        <path d="M10 12 C 70 24, 120 14, 188 86" stroke="#22D3EE" strokeWidth="1.6" strokeDasharray="3 3" strokeLinecap="round" />
        <circle cx="188" cy="86" r="3" fill="#22D3EE" />
      </svg>
      <span className="absolute right-2 bottom-2 text-[10.5px] text-ink/55 font-mono">"show me sale items"</span>
    </div>);

}

function MiniInquiry() {
  return (
    <div className="rounded-xl bg-ink-900 text-paper p-3 h-[150px]">
      <div className="flex justify-end mb-1.5">
        <div className="text-[11px] px-2.5 py-1 rounded-xl rounded-tr-sm bg-white/10 max-w-[80%]">Is this oven gas-compatible?</div>
      </div>
      <div className="flex">
        <div className="text-[11px] px-2.5 py-1.5 rounded-xl rounded-tl-sm bg-teal/12 border border-teal/25 text-teal max-w-[88%]">
          Yes — natural gas & LPG with adapter. Installation ≤ 45 min. <span className="underline">See manual ↗</span>
        </div>
      </div>
      <div className="mt-2.5 text-[10px] font-mono uppercase tracking-[.16em] text-white/40">resolved in 1.4s · cited</div>
    </div>);

}

function MiniCompare() {
  const rows = [
  { name: "Halden 2-Seat", price: "$1,099", pri: ["+ stain-shield", "+ delivery 6d"], con: ["– no recline"] },
  { name: "Marlow Compact", price: "$1,149", pri: ["+ modular", "+ pet-friendly"], con: ["– delivery 14d"] }];

  return (
    <div className="rounded-xl bg-paper p-3 border hairline h-[150px] overflow-hidden">
      <div className="grid grid-cols-2 gap-2 h-full">
        {rows.map((r) =>
        <div key={r.name} className="rounded-lg border hairline p-2 flex flex-col">
            <div className="flex items-center justify-between">
              <span className="text-[11.5px] font-medium truncate">{r.name}</span>
              <span className="text-[11px] num text-ink/60">{r.price}</span>
            </div>
            <div className="mt-1 space-y-0.5">
              {r.pri.map((p) => <div key={p} className="text-[10.5px] text-teal-700 leading-tight">{p}</div>)}
              {r.con.map((p) => <div key={p} className="text-[10.5px] text-slate-500 leading-tight">{p}</div>)}
            </div>
          </div>
        )}
      </div>
    </div>);

}

function MiniKnowledge() {
  return (
    <div className="rounded-xl bg-paper p-3 border hairline h-[150px]">
      <div className="text-[10.5px] uppercase tracking-[.16em] text-ink/45 font-mono">policy</div>
      <div className="mt-1 text-[12px] leading-snug">
        Free returns within 30 days, full refund within 14. Mattresses use a 100-night trial.
      </div>
      <div className="mt-2 flex items-center gap-2">
        <span className="text-[10.5px] font-mono px-1.5 py-0.5 rounded bg-sand-100 border hairline">SRC · returns.md</span>
        <span className="text-[10.5px] font-mono px-1.5 py-0.5 rounded bg-sand-100 border hairline">SRC · mattress.md</span>
      </div>
      <div className="mt-2 text-[10.5px] text-ink/55">+ Expert tip: bedframes need 14-inch clearance for the trial.</div>
    </div>);

}

function MiniHandover() {
  return (
    <div className="rounded-xl bg-ink-900 text-paper p-3 h-[150px]">
      <div className="flex items-center gap-2 text-[11px] text-white/60">
        <Icon.Bot size={13} className="text-teal" /> AI · cart $4,210
        <span className="ml-auto flex items-center gap-1.5 text-teal">
          <span className="w-1.5 h-1.5 rounded-full bg-teal animate-pulse" /> handing to Lina ·  Sales
        </span>
      </div>
      <div className="mt-2 px-3 py-2 rounded-lg bg-white/[.05] border border-white/10 text-[11px]">
        <span className="text-white/55">Summary →</span> luxury sectional, AED delivery, needs SLA quote
      </div>
      <div className="mt-2 flex items-center gap-2">
        <span className="w-7 h-7 rounded-full bg-slate-600 grid place-items-center text-[10.5px] font-medium text-white">LK</span>
        <div className="text-[11px]">
          <div className="text-white">Lina K. <span className="text-white/45">is typing…</span></div>
          <div className="text-white/45 text-[10.5px]">Account exec · responding in 11s</div>
        </div>
      </div>
    </div>);

}

function MiniMultilingual() {
  const langs = [
  { code: "EN", text: "How can I help you today?", flag: "🇬🇧" },
  { code: "AR", text: "كيف يمكنني مساعدتك اليوم؟", flag: "🇦🇪", dir: "rtl" },
  { code: "FR", text: "Comment puis-je vous aider ?", flag: "🇫🇷" },
  { code: "ES", text: "¿Cómo puedo ayudarte hoy?", flag: "🇪🇸" },
  { code: "HI", text: "मैं आज आपकी कैसे मदद कर सकता हूँ?", flag: "🇮🇳" }];

  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % langs.length), 1700);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="rounded-xl bg-paper p-3 border hairline h-[150px] relative overflow-hidden">
      <div className="flex items-center gap-1.5 flex-wrap">
        {langs.map((l, idx) =>
        <button key={l.code}
        className={"text-[11px] px-2 py-0.5 rounded-full border transition " + (
        idx === i ? "bg-ink text-paper border-ink" : "bg-paper text-ink/65 hairline hover:text-ink")}
        onClick={() => setI(idx)} aria-pressed={idx === i}>
            {l.code}
          </button>
        )}
      </div>
      <div className="mt-3 h-[58px] grid place-items-start">
        <div key={i} dir={langs[i].dir || "ltr"}
        className="text-[15px] leading-snug text-ink font-display tracking-tight2"
        style={{ animation: "fadeUp .35s ease both" }}>
          {langs[i].text}
        </div>
      </div>
      <div className="absolute bottom-2 right-3 text-[10.5px] font-mono text-ink/45">tone preserved · idioms localized</div>
      <style>{`@keyframes fadeUp{ from { opacity:0; transform: translateY(4px);} to { opacity:1; transform:none;} }`}</style>
    </div>);

}

/* ----- A single feature card ----- */
function FeatureCard({ icon: Ic, title, body, mock, accent = "ink" }) {
  return (
    <article className="group rounded-2xl bg-paper border hairline p-5 lg:p-6 hover:shadow-soft transition-shadow min-w-0 overflow-hidden">
      <div className="flex items-start gap-3 min-w-0">
        <span className={"shrink-0 w-9 h-9 grid place-items-center rounded-lg " + (accent === "teal" ? "bg-teal/15 text-teal-700" : "bg-ink text-paper")}>
          <Ic size={17} />
        </span>
        <div className="flex-1 min-w-0">
          <h4 className="font-display text-[22px] leading-[1.1] tracking-tight2 break-words">{title}</h4>
          <p className="mt-1.5 text-[13.5px] text-ink/65 leading-[1.5] break-words">{body}</p>
        </div>
      </div>
      <div className="mt-4 min-w-0">{mock}</div>
    </article>);

}

/* ----- Pillar wrapper: heading on its own row, cards in a row below ----- */
function Pillar({ num, kicker, title, blurb, cards }) {
  const cols = cards.length >= 3 ? "md:grid-cols-3" : "md:grid-cols-2";
  return (
    <div className="py-16 lg:py-24 border-t hairline">
      {/* Heading row — full width */}
      <div className="max-w-[820px]">
        <div className="flex items-center gap-3 text-ink/55">
          <span className="font-mono text-[11.5px] tracking-[.18em] uppercase">Pillar {num}</span>
          <span className="h-px w-24 bg-[var(--rule)]" />
        </div>
        <div className="mt-3 font-mono text-[12px] tracking-[.18em] uppercase text-teal-700">{kicker}</div>
        <h3 className="font-display text-[40px] sm:text-[48px] lg:text-[56px] leading-[0.95] tracking-tight3 mt-3" style={{ fontFamily: "Tahoma" }}>{title}</h3>
        <p className="mt-4 max-w-[58ch] text-[15.5px] leading-[1.55] text-ink/65">{blurb}</p>
        <a href="#" className="mt-5 inline-flex items-center gap-1.5 text-[13px] u-hover">
          See it in action <Icon.ArrowUpRight size={14} />
        </a>
      </div>

      {/* Cards row — separated, below */}
      <div className={"mt-10 lg:mt-14 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-5 " + cols}>
        {cards.map((c, i) => <FeatureCard key={i} {...c} />)}
      </div>
    </div>);

}

/* ----- Feature pillars block ----- */
function FeaturePillars() {
  return (
    <section id="features" className="bg-paper">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        {/* Section intro */}
        <div className="pt-20 lg:pt-28 max-w-[820px]">
          <div className="font-mono text-[12px] tracking-[.18em] uppercase text-ink/55">What CogniVend does</div>
          <h2 className="font-display text-[52px] lg:text-[78px] leading-[0.95] tracking-tight3 mt-3">
            The pieces of a conversation<br /> that <span className="italic">closes the sale.</span>
          </h2>
          <p className="mt-5 text-[16.5px] leading-[1.55] text-ink/65 max-w-[58ch]">
            Three pillars, one assistant. Each capability is independently configurable — switch on what
            your storefront needs, leave the rest off until it earns its keep.
          </p>
        </div>

        <Pillar
          num="01" kicker="Product discoverability" title={<>Help shoppers find what they didn't know<br /> how to <span className="italic">ask for.</span></>}
          blurb="Drop the keyword-matching mindset. CogniVend infers intent from context, asks better follow-ups, and walks customers through your catalog like a knowledgeable concierge."
          cards={[
          { icon: Icon.Search, title: "Intelligent Search", body: "Understands intent, not just keywords — including budget, use-case, and constraints in one query.", mock: <MiniIntelligentSearch />, accent: "teal" },
          { icon: Icon.Compass, title: "Guided Exploration", body: "Asks the right two or three questions when shoppers are unsure, then narrows the path.", mock: <MiniGuidedExploration /> },
          { icon: Icon.Route, title: "Website Navigation", body: "A personal in-store guide for the web — deep-links to the right page, filter, or PDP.", mock: <MiniNavigation /> }]
          } />
        

        <Pillar
          num="02" kicker="Decision-making support" title={<>Answer the question before the<br /> shopper <span className="italic">closes the tab.</span></>}
          blurb="When a buyer hesitates, the difference between a sale and a bounce is the next sentence. CogniVend has that sentence ready — sourced, scoped, and on-brand."
          reverse
          cards={[
          { icon: Icon.MessageCircle, title: "Inquiry Resolution", body: "Instant, cited answers to product, policy, and fitment questions — across thousands of SKUs.", mock: <MiniInquiry />, accent: "teal" },
          { icon: Icon.Scale, title: "Product Comparison", body: "Weighs pros and cons against the shopper's stated priorities, not a static spec table.", mock: <MiniCompare /> },
          { icon: Icon.Book, title: "Contextual Knowledge Base", body: "Usage, care, policies, and expert tips — pulled from your own documents, never hallucinated.", mock: <MiniKnowledge /> }]
          } />
        

        <Pillar
          num="03" kicker="Versatile communication" title={<>Talk to every customer<br /> in <span className="italic">their</span> language — literally.</>}
          blurb="Cross the line from 'AI deflection' to commerce. CogniVend hands off to humans the moment value is on the table, and speaks fluently with the rest of the world."
          cards={[
          { icon: Icon.Users, title: "Human Handover", body: "Seamless transfer to your sales team with full context, summary, and customer history attached.", mock: <MiniHandover />, accent: "teal" },
          { icon: Icon.Languages, title: "Multilingual Support", body: "Fluent in 30+ languages, RTL-ready, and respectful of cultural idioms and tone.", mock: <MiniMultilingual /> }]
          } />
        
      </div>
    </section>);

}