// Section components for Cartlytics landing

const { useState, useEffect, useRef, useMemo } = React;

// ============================================================================
// NAV
// ============================================================================
function Nav({ onGetAccess, ctaCopy }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav " + (scrolled ? "is-scrolled" : "")}>
      <div className="wrap nav-row">
        <a href="#top" className="nav-logo">
          <img src="/assets/logo-cropped.png" alt="Cartlytics" />
        </a>
        <div className="nav-links">
          <a href="#why">Why Cartlytics</a>
          <a href="#features">Features</a>
          <a href="#playground">Snowflake</a>
          <a href="#who">Who it's for</a>
        </div>
        <div className="nav-cta">
          <div style={{display:"flex", alignItems:"center", gap:6, padding:"6px 12px", border:"1px solid var(--line)", borderRadius:8, background:"var(--bg-2)"}}>
            <span style={{fontFamily:'"Geist Mono", monospace', fontSize:11, color:"var(--muted-2)", textTransform:"uppercase", letterSpacing:".06em"}}>Credits</span>
            <span style={{fontFamily:'"Geist Mono", monospace', fontSize:13, fontWeight:600, color:"var(--ink)"}}>0</span>
          </div>
          <button className="btn btn-primary" onClick={onGetAccess}>{ctaCopy}<IconArrow size={16}/></button>
        </div>
      </div>
    </nav>
  );
}

// ============================================================================
// HERO
// ============================================================================
function Hero({ headline, onGetAccess, ctaCopy }) {
  const [activeIdx, setActiveIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setActiveIdx(i => (i+1) % 4), 2400);
    return () => clearInterval(t);
  }, []);

  const profiles = useMemo(() => {
    const overrides = [
      {id:"SAMPLE_001", label:"Profile A"},
      {id:"SAMPLE_002", label:"Profile B"},
      {id:"SAMPLE_003", label:"Profile C"},
      {id:"SAMPLE_004", label:"Profile D"},
    ];
    return [...[0,1,2].map(i => ({...genProfile(i*7+3), ...overrides[i]})), {...CONSENT_ONLY_PROFILE, ...overrides[3]}];
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-bg-grid" />
      <div className="wrap hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>Snowflake-Native Data Product</span>
          <h1 style={{marginTop:24}}>
            {headline.split(".").map((part, i, arr) => part.trim() && (
              <span key={i}>
                {i === arr.length - 2 ? <span className="accent">{part.trim()}.</span> : (i < arr.length - 1 ? part.trim() + "." : part.trim())}
                {i < arr.length - 2 && <br/>}
              </span>
            ))}
          </h1>
          <p className="hero-sub">
            Fully enriched DTC buyer profiles. Snowflake-native. Ready to deploy.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary btn-lg" onClick={onGetAccess}>{ctaCopy}<IconArrow size={16}/></button>
            <a className="btn btn-ghost btn-lg" href="#playground">
              View on Snowflake Marketplace<IconExternal size={15}/>
            </a>
          </div>
          <div className="hero-meta">
            <div className="meta-item"><span className="check"><IconCheck size={12}/></span>Real transaction data</div>
            <div className="meta-item"><span className="check"><IconCheck size={12}/></span>US + EU coverage</div>
            <div className="meta-item"><span className="check"><IconCheck size={12}/></span>SOC 2 Type II</div>
          </div>
        </div>
        <div className="profile-stage">
          <ProfileStack profiles={profiles} activeIdx={activeIdx} setActiveIdx={setActiveIdx} />
        </div>
      </div>
    </section>
  );
}

function ProfileStack({ profiles, activeIdx, setActiveIdx }) {
  return (
    <>
      {profiles.map((p, i) => {
        const offset = i - activeIdx;
        const isActive = i === activeIdx;
        const z = 10 - Math.abs(offset);
        const tx = offset * 28;
        const ty = Math.abs(offset) * 18;
        const scale = 1 - Math.abs(offset) * 0.04;
        const op = Math.abs(offset) > 2 ? 0 : 1 - Math.abs(offset) * 0.18;
        return (
          <div key={p.id}
            onClick={() => setActiveIdx(i)}
            className="pcard"
            style={{
              top: 30, right: 20, width: 380,
              transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
              zIndex: z, opacity: op,
              transition: "transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s",
              cursor: isActive ? "default" : "pointer",
              boxShadow: isActive ? "var(--shadow-lg)" : "var(--shadow-md)",
            }}>
            <ProfileCardBody p={p} active={isActive} />
          </div>
        );
      })}
      <div style={{position:"absolute", bottom: 0, left: 20, display:"flex", gap:6}}>
        {profiles.map((_, i) => (
          <button key={i} onClick={() => setActiveIdx(i)} aria-label={"Profile " + (i+1)}
            style={{
              width: i === activeIdx ? 22 : 8, height: 8, borderRadius: 999,
              background: i === activeIdx ? "var(--blue)" : "var(--line)",
              transition: "all .3s",
            }}/>
        ))}
      </div>
    </>
  );
}

function ProfileCardBody({ p, active }) {
  return (
    <>
      <div className="pcard-head">
        <div style={{display:"flex", alignItems:"center", gap:10}}>
          <div style={{
            width:32, height:32, borderRadius:8,
            background:"linear-gradient(135deg, var(--blue), var(--blue-deep))",
            color:"white", display:"grid", placeItems:"center"
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="8" r="4"/>
              <path d="M4 20c0-4 3.582-7 8-7s8 3 8 7" strokeLinecap="round"/>
            </svg>
          </div>
          <div>
            <div style={{fontSize:13.5, fontWeight:500}}>{p.label}</div>
            <div className="pcard-id">{p.id}</div>
          </div>
        </div>
        <div className="pcard-pill">SCORE {p.score}</div>
      </div>
      <div className="pcard-body">
        <div className="prow"><span className="k">Market</span><span className="v">{p.flag} {p.region} · {p.market}</span></div>
        <div className="prow"><span className="k">Age / HHI</span><span className="v">{p.ageBucket} · {p.income}</span></div>
        <div className="prow"><span className="k">Industry</span>
          <span className="v">{p.industry}</span>
        </div>
        <div className="prow"><span className="k">Platform</span>
          <span className="v">{p.platform}</span>
        </div>
        {p.noPurchaseData ? (
          <div className="prow"><span className="k">LTV</span>
            <span className="v" style={{fontFamily:'"Geist Mono", monospace', color:"var(--muted-2)", fontStyle:"italic", fontSize:11}}>No purchase data</span>
          </div>
        ) : (
          <div className="prow"><span className="k">LTV</span>
            <span className="v" style={{fontFamily:'"Geist Mono", monospace', color:"var(--blue)", fontWeight:500}}>${p.ltv.toLocaleString()}</span>
          </div>
        )}
        <div className="prow"><span className="k">Segments</span>
          <span className="v">{p.segments.map(s => <span key={s} className="chip" style={{background:"var(--blue-tint)", color:"var(--blue)"}}>{s}</span>)}</span>
        </div>
        <div className="prow"><span className="k">Legal Basis</span>
          <span className="v">{p.legalBasis}</span>
        </div>
        <div className="prow"><span className="k">Opt Out</span>
          <span className="v" style={{fontFamily:'"Geist Mono", monospace', color:"var(--green)", fontSize:11, fontWeight:600}}>FALSE</span>
        </div>
      </div>
    </>
  );
}

// ============================================================================
// TICKER
// ============================================================================
function PlatformMark({ name }) {
  const base = { display:"inline-flex", alignItems:"center", gap:4, fontSize:10, fontWeight:700, letterSpacing:".02em" };
  if (name === "Meta") return (
    <span style={base}>
      <svg width="10" height="10" viewBox="0 0 24 24" fill="#1877F2"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/></svg>
      Meta
    </span>
  );
  if (name === "Google") return (
    <span style={base}>
      <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
      Google
    </span>
  );
  if (name === "TikTok") return (
    <span style={base}>
      <svg width="10" height="10" viewBox="0 0 24 24" fill="#010101"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.28 6.28 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.75a4.85 4.85 0 0 1-1.01-.06z"/></svg>
      TikTok
    </span>
  );
  return <span style={base}>{name}</span>;
}

function Ticker() {
  const items = [...TICKER_ITEMS, ...TICKER_ITEMS]; // doubled for seamless scroll
  return (
    <div className="ticker">
      <div className="ticker-row">
        {items.map((it, i) => (
          <div className="ticker-item" key={i}>
            <span className="pulse"/>
            <span>{it.id}</span>
            <span className="geo">{it.flag} {it.region} · {it.market}</span>
            <span>·</span>
            <span>{it.cat}</span>
            <span className="amt">${it.amt}</span>
            <PlatformMark name={it.platform}/>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================================
// STAT STRIP
// ============================================================================
function useCounter(target, duration = 1400, start) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!start) return;
    let raf, t0;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.floor(target * eased));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, start]);
  return val;
}

function StatStrip() {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const check = () => {
      const r = ref.current.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.9 && r.bottom > 0) {
        setVisible(true);
        return true;
      }
      return false;
    };
    if (check()) return;
    const onScroll = () => { if (check()) window.removeEventListener("scroll", onScroll); };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const records = useCounter(1, 1400, visible);
  const points = useCounter(15, 1600, visible);
  const assets = useCounter(30, 1200, visible);
  const signal = useCounter(100, 1000, visible);
  return (
    <div ref={ref} className="stat-strip">
      <div className="stat-cell">
        <div className="stat-num">{records}<span className="unit">M+</span></div>
        <div className="stat-label">Consumer Records</div>
      </div>
      <div className="stat-cell">
        <div className="stat-num">{points}<span className="unit">M+</span></div>
        <div className="stat-label">Enriched Data Points</div>
      </div>
      <div className="stat-cell">
        <div className="stat-num">{assets}<span className="unit">+</span></div>
        <div className="stat-label">Audience Assets</div>
      </div>
      <div className="stat-cell">
        <div className="stat-num">{signal}<span className="unit">%</span></div>
        <div className="stat-label">Commerce-Signal Based</div>
      </div>
    </div>
  );
}

// ============================================================================
// VALUE PROP — Real Data. Real Signal. (compare table)
// ============================================================================
function ValueProp() {
  return (
    <section className="section" id="value">
      <div className="wrap">
        <div className="head-block">
          <span className="eyebrow"><span className="dot"></span>Real Data. Real Signal.</span>
          <h2>Built from the cart, not from a guess.</h2>
          <p>Cartlytics delivers enriched consumer profiles built from real e-commerce transaction data. Not modeled, not surveyed, not scraped. Every record is layered with demographic, behavioral, and geographic intelligence, giving marketers and data teams the signal depth they can't get from traditional list providers.</p>
        </div>
        <div className="compare">
          <div className="compare-col bad">
            <div className="compare-head">
              <span className="tag">TYPICAL LISTS</span>
            </div>
            <h4>Modeled. Surveyed. Scraped.</h4>
            <p className="sub">What you usually get when buying audience data.</p>
            <ul className="compare-list">
              <li><span className="ico"><IconX size={11}/></span>Look-alikes inferred from thin demographic signal</li>
              <li><span className="ico"><IconX size={11}/></span>Self-reported survey data, often months old</li>
              <li><span className="ico"><IconX size={11}/></span>Scraped emails with no purchase context</li>
              <li><span className="ico"><IconX size={11}/></span>Padded record counts, low signal density</li>
              <li><span className="ico"><IconX size={11}/></span>CSV drops, manual ETL, stale by Tuesday</li>
            </ul>
          </div>
          <div className="compare-col good">
            <div className="compare-head">
              <span className="tag">CARTLYTICS</span>
            </div>
            <h4>Real carts. Real buyer intent. Real signals.</h4>
            <p className="sub">What every Cartlytics profile is grounded in.</p>
            <ul className="compare-list">
              <li><span className="ico"><IconCheck size={11}/></span>Actual e-commerce transactions, item-level</li>
              <li><span className="ico"><IconCheck size={11}/></span>Demographic, behavioral, and geographic enrichment</li>
              <li><span className="ico"><IconCheck size={11}/></span>Category affinity, AOV, frequency, predicted LTV</li>
              <li><span className="ico"><IconCheck size={11}/></span>Quality over quantity. Every record earns its row</li>
              <li><span className="ico"><IconCheck size={11}/></span>Snowflake-native share, daily refresh</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// WHY CARTLYTICS — Depth Over Volume
// ============================================================================
function WhyCartlytics() {
  return (
    <section className="section" id="why" style={{background: "var(--white)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
      <div className="wrap depth-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>Why Cartlytics</span>
          <h2 style={{marginTop:14}}>Depth Over Volume.</h2>
          <p style={{marginTop:18, fontSize:18, color:"var(--muted)", lineHeight:1.55, maxWidth:"50ch"}}>
            The market is flooded with shallow lists and surface-level records. Cartlytics takes a different approach, prioritizing signal quality over record count and delivering consumer intelligence that's built to perform, not just fill a table.
          </p>
          <p style={{marginTop:14, fontSize:18, color:"var(--muted)", lineHeight:1.55, maxWidth:"50ch"}}>
            Fewer compromises. Sharper outcomes.
          </p>
          <div style={{marginTop:32, display:"grid", gridTemplateColumns:"1fr 1fr", gap:14, maxWidth:480}}>
            <DepthStat num="6×" label="Higher signal density per record" />
            <DepthStat num="40+" label="Enrichment fields per profile" />
          </div>
        </div>
        <DepthVis />
      </div>
    </section>
  );
}

function DepthStat({ num, label }) {
  return (
    <div style={{padding:"18px 20px", border:"1px solid var(--line)", borderRadius:14, background:"var(--bg)"}}>
      <div style={{fontSize:36, fontWeight:600, letterSpacing:"-0.025em", color:"var(--blue)"}}>{num}</div>
      <div className="mono" style={{fontSize:11.5, textTransform:"uppercase", color:"var(--muted-2)", marginTop:6, letterSpacing:".06em"}}>{label}</div>
    </div>
  );
}

function DepthVis() {
  // Two stacks: shallow (many thin layers) vs deep (few rich layers).
  return (
    <div className="depth-vis">
      <div style={{position:"absolute", inset:32, display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}}>
        {/* Shallow */}
        <div style={{display:"flex", flexDirection:"column", justifyContent:"flex-end", gap:3}}>
          <div className="mono" style={{fontSize:11, color:"var(--muted-2)", marginBottom:10, textTransform:"uppercase", letterSpacing:".06em"}}>Shallow Lists</div>
          {Array.from({length:24}).map((_,i)=>(
            <div key={i} style={{height:6, borderRadius:2, background:`rgba(224,70,58,${0.12 + (i%3)*0.04})`, width: (50+i*1.5)+"%"}}/>
          ))}
          <div className="mono" style={{fontSize:11, color:"var(--muted)", marginTop:10}}>3-5 fields · modeled</div>
        </div>
        {/* Deep */}
        <div style={{display:"flex", flexDirection:"column", justifyContent:"flex-end", gap:6, position:"relative"}}>
          <div className="mono" style={{fontSize:11, color:"var(--blue)", marginBottom:6, textTransform:"uppercase", letterSpacing:".06em"}}>Cartlytics Profiles</div>
          {[
            {l:"Identity", w:"100%"},
            {l:"Demographics", w:"94%"},
            {l:"Geography", w:"88%"},
            {l:"Cart History", w:"96%"},
            {l:"Category Affinity", w:"82%"},
            {l:"AOV / Frequency", w:"78%"},
            {l:"Predicted LTV", w:"74%"},
            {l:"Segments", w:"86%"},
          ].map((row, i) => (
            <div key={i} style={{display:"flex", alignItems:"center", gap:8}}>
              <div className="mono" style={{fontSize:10, color:"var(--ink-2)", width:90, textAlign:"right"}}>{row.l}</div>
              <div style={{
                height: 18, flex: 1, borderRadius: 4,
                background: `linear-gradient(90deg, var(--blue) ${row.w}, var(--bg-2) ${row.w})`,
                opacity: 0.95
              }}/>
            </div>
          ))}
          <div className="mono" style={{fontSize:11, color:"var(--blue)", marginTop:8}}>40+ fields · real</div>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// FEATURES
// ============================================================================
function Features() {
  return (
    <section className="section" id="features">
      <div className="wrap">
        <div className="head-block">
          <span className="eyebrow"><span className="dot"></span>What's Inside</span>
          <h2>What's Inside Every Profile.</h2>
          <p>Forty-plus enrichment fields per record. Refreshed daily. Delivered through a Snowflake share with no pipelines, no CSVs, no waiting.</p>
        </div>
        <div className="features">
          {FEATURES.map(f => <FeatureCard key={f.num} f={f} />)}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ f }) {
  return (
    <div className="feature-card">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start"}}>
        <span className="num mono">F.{f.num}</span>
        <div style={{width:36, height:36, borderRadius:10, background:"var(--blue-tint)", color:"var(--blue)", display:"grid", placeItems:"center"}}>
          {f.icon === "cart" && <IconCart size={18}/>}
          {f.icon === "globe" && <IconGlobe size={18}/>}
          {f.icon === "snowflake" && <IconSnowflake size={18}/>}
          {f.icon === "target" && <IconTarget size={18}/>}
        </div>
      </div>
      <h3>{f.title}</h3>
      <p>{f.desc}</p>
      <div className="visual">
        <FeatureVisual icon={f.icon}/>
      </div>
    </div>
  );
}

function FeatureVisual({ icon }) {
  if (icon === "cart") {
    return (
      <div style={{position:"absolute", inset:0, padding:16, display:"flex", flexDirection:"column", justifyContent:"flex-end", gap:4}}>
        <div className="mono" style={{fontSize:10, color:"var(--muted-2)", textTransform:"uppercase", letterSpacing:".06em"}}>Item-level cart</div>
        {[
          {sku:"BTY_4821", name:"Bio-Collagen Mask (Subscription)", amt:"$48.00"},
          {sku:"WLN_9132", name:"Shilajit Gummie (Subscription)", amt:"$34.00"},
          {sku:"APR_2204", name:"Short Sleeve V Neck (One Time Purchase)", amt:"$62.00"},
        ].map((r,i)=>(
          <div key={i} className="mono" style={{display:"grid", gridTemplateColumns:"60px 1fr auto", gap:8, fontSize:11, color:"var(--ink-2)", padding:"4px 0", borderBottom:"1px dashed var(--line-2)"}}>
            <span style={{color:"var(--muted-2)"}}>{r.sku}</span>
            <span>{r.name}</span>
            <span style={{color:"var(--blue)"}}>{r.amt}</span>
          </div>
        ))}
      </div>
    );
  }
  if (icon === "globe") {
    return (
      <div style={{position:"absolute", inset:0, padding:16, display:"flex", flexDirection:"column", gap:8}}>
        <div className="mono" style={{fontSize:10, color:"var(--muted-2)", textTransform:"uppercase", letterSpacing:".06em"}}>Coverage</div>
        <div style={{display:"flex", flexWrap:"wrap", gap:6}}>
          {["🇺🇸 US","🇨🇦 CA","🇬🇧 UK","🇩🇪 DE","🇫🇷 FR","🇪🇸 ES","🇳🇱 NL","🇸🇪 SE","🇮🇪 IE"].map(c => (
            <span key={c} className="mono" style={{fontSize:11, padding:"4px 8px", background:"white", border:"1px solid var(--line)", borderRadius:6}}>{c}</span>
          ))}
        </div>
      </div>
    );
  }
  if (icon === "snowflake") {
    return (
      <div style={{position:"absolute", inset:0, padding:16, fontFamily:'"Geist Mono", monospace', fontSize:11, color:"var(--ink-2)", display:"flex", flexDirection:"column", justifyContent:"center", gap:6}}>
        <div style={{color:"var(--muted-2)"}}>{">"} CALL cartlytics.share();</div>
        <div><span style={{color:"var(--blue)"}}>+</span> profiles_enriched <span style={{color:"var(--muted-2)"}}>(184M rows)</span></div>
        <div><span style={{color:"var(--blue)"}}>+</span> profiles_meta_ready <span style={{color:"var(--muted-2)"}}>(92M rows)</span></div>
        <div><span style={{color:"var(--blue)"}}>+</span> taxonomy_categories <span style={{color:"var(--muted-2)"}}>(48 rows)</span></div>
        <div style={{color:"var(--green)"}}>✓ Share mounted · 0 ETL</div>
      </div>
    );
  }
  // target
  return (
    <div style={{position:"absolute", inset:0, padding:16, display:"flex", flexDirection:"column", gap:6}}>
      <div className="mono" style={{fontSize:10, color:"var(--muted-2)", textTransform:"uppercase", letterSpacing:".06em"}}>Audience export → Meta</div>
      {[
        {n:"high_ltv_beauty_us", c:"284,012", st:"Synced"},
        {n:"lapsed_30_apparel_eu", c:"118,240", st:"Synced"},
        {n:"premium_outdoor", c:"62,108", st:"Pending"},
      ].map((r,i)=>(
        <div key={i} className="mono" style={{display:"grid", gridTemplateColumns:"1fr auto auto", gap:10, fontSize:11, padding:"5px 8px", background:"white", border:"1px solid var(--line-2)", borderRadius:6}}>
          <span>{r.n}</span>
          <span style={{color:"var(--muted-2)"}}>{r.c}</span>
          <span style={{color: r.st==="Synced" ? "var(--green)" : "var(--amber)"}}>{r.st}</span>
        </div>
      ))}
    </div>
  );
}

// ============================================================================
// SQL PLAYGROUND
// ============================================================================
function SqlPlayground() {
  const [tab, setTab] = useState(0);
  const [running, setRunning] = useState(false);
  const [showResults, setShowResults] = useState(true);
  const [visibleRows, setVisibleRows] = useState(SQL_QUERIES[0].rows.length);
  const q = SQL_QUERIES[tab];

  const runQuery = () => {
    setRunning(true);
    setShowResults(false);
    setVisibleRows(0);
    setTimeout(() => {
      setRunning(false);
      setShowResults(true);
      // animate row reveal
      let n = 0;
      const t = setInterval(() => {
        n++;
        setVisibleRows(n);
        if (n >= q.rows.length) clearInterval(t);
      }, 80);
    }, 700);
  };

  useEffect(() => {
    setVisibleRows(q.rows.length);
    setShowResults(true);
  }, [tab]);

  return (
    <section className="section" id="playground" style={{background:"var(--white)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
      <div className="wrap">
        <div className="head-block">
          <span className="eyebrow"><span className="dot"></span>Snowflake-Native</span>
          <h2>Query it. Don't move it.</h2>
          <p>Mounted as a Snowflake Secure Data Share. Your analysts write SQL against Cartlytics tables exactly the way they write SQL against your own. Try a few queries below.</p>
        </div>
        <div className="sql-box">
          <div className="sql-head">
            <div className="sql-tabs">
              {SQL_QUERIES.map((sq, i) => (
                <button key={sq.name} className={"sql-tab " + (i===tab ? "is-active" : "")} onClick={() => setTab(i)}>
                  {sq.name}
                </button>
              ))}
            </div>
            <button className="run-btn" onClick={runQuery} disabled={running}>
              <IconPlay size={11}/>{running ? "Running…" : "Run query"}
            </button>
          </div>
          <div className="sql-body">
            <div className="sql-editor">
              {q.code.map((line, i) => (
                <div key={i} style={{whiteSpace:"pre"}}>
                  {Array.isArray(line[0]) ? line.map((tok,j) => <span key={j} className={tok[0]}>{tok[1]}</span>) : (
                    <span className={line[0]}>{line[1]}</span>
                  )}
                </div>
              ))}
              <span className="cur"></span>
            </div>
            <div className="sql-results">
              {!showResults ? (
                <div style={{padding:40, display:"grid", placeItems:"center", height:"100%"}}>
                  <div style={{display:"flex", alignItems:"center", gap:10, color:"var(--muted)"}} className="mono">
                    <span style={{width:14, height:14, border:"2px solid var(--blue)", borderTopColor:"transparent", borderRadius:"50%", display:"inline-block", animation:"spin .8s linear infinite"}}/>
                    Compiling query plan…
                  </div>
                </div>
              ) : (
                <table className="sql-result-table">
                  <thead>
                    <tr>{q.cols.map(c => <th key={c}>{c}</th>)}</tr>
                  </thead>
                  <tbody>
                    {q.rows.slice(0, visibleRows).map((r,i) => (
                      <tr key={i}>{r.map((c,j) => <td key={j}>{c}</td>)}</tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </div>
          <div className="sql-foot">
            <span>warehouse: CARTLYTICS_XS · schema: CARTLYTICS.PROFILES</span>
            <span>{showResults ? `${visibleRows} of ${q.rows.length.toLocaleString()} rows · ${(180 + tab*40)}ms` : "—"}</span>
          </div>
        </div>
        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
      </div>
    </section>
  );
}

// ============================================================================
// PERSONAS — Who It's For
// ============================================================================
function Personas() {
  const [active, setActive] = useState("marketer");
  const p = PERSONAS.find(x => x.key === active);
  return (
    <section className="section" id="who">
      <div className="wrap">
        <div className="head-block">
          <span className="eyebrow"><span className="dot"></span>Who It's For</span>
          <h2>Built for Teams That Move Fast.</h2>
          <p>Whether you're a performance marketer building better audiences, a DTC brand segmenting your customer base, or a data team enriching internal tables, Cartlytics plugs in without friction.</p>
        </div>
        <div className="persona-tabs">
          {PERSONAS.map(x => (
            <button key={x.key} className={"persona-tab " + (active===x.key ? "is-active" : "")} onClick={() => setActive(x.key)}>
              {x.icon === "target" && <IconTarget size={15}/>}
              {x.icon === "user" && <IconUser size={15}/>}
              {x.icon === "stack" && <IconStack size={15}/>}
              {x.role}
            </button>
          ))}
        </div>
        <div className="persona-card">
          <div className="persona-info">
            <div className="role">{p.role}</div>
            <h3>{p.title}</h3>
            <p>{p.body}</p>
            <ul>{p.bullets.map(b => <li key={b}>{b}</li>)}</ul>
          </div>
          <div className="persona-vis">
            <PersonaVis kind={p.key}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function PersonaVis({ kind }) {
  if (kind === "marketer") {
    return (
      <div style={{width:"100%", maxWidth:340}}>
        <div className="mono" style={{fontSize:10, color:"var(--muted-2)", textTransform:"uppercase", letterSpacing:".06em", marginBottom:10}}>Audience Builder</div>
        <div style={{background:"white", border:"1px solid var(--line)", borderRadius:14, padding:18}}>
          {[
            {l:"Region", v:"US + EU"},
            {l:"Category", v:"Beauty"},
            {l:"AOV", v:"≥ $80"},
            {l:"LTV percentile", v:"Top 25%"},
          ].map(r => (
            <div key={r.l} style={{display:"flex", justifyContent:"space-between", padding:"8px 0", borderBottom:"1px dashed var(--line-2)"}}>
              <span className="mono" style={{fontSize:11, color:"var(--muted)"}}>{r.l}</span>
              <span style={{fontSize:13, fontWeight:500}}>{r.v}</span>
            </div>
          ))}
          <div style={{marginTop:14, padding:"12px 14px", background:"var(--blue-tint)", borderRadius:10, display:"flex", justifyContent:"space-between", alignItems:"center"}}>
            <span className="mono" style={{fontSize:11, color:"var(--blue)"}}>MATCHED</span>
            <span style={{fontWeight:600, color:"var(--blue)", fontSize:18}}>284,012</span>
          </div>
          <button className="btn btn-primary" style={{width:"100%", marginTop:12}}>Sync to Meta<IconArrow size={14}/></button>
        </div>
      </div>
    );
  }
  if (kind === "dtc") {
    return (
      <div style={{width:"100%", maxWidth:360}}>
        <div className="mono" style={{fontSize:10, color:"var(--muted-2)", textTransform:"uppercase", letterSpacing:".06em", marginBottom:10}}>CRM enrichment</div>
        <div style={{background:"white", border:"1px solid var(--line)", borderRadius:14, padding:18}}>
          <div className="mono" style={{fontSize:11, color:"var(--muted)", marginBottom:10}}>customers (your table)</div>
          <div style={{display:"grid", gridTemplateColumns:"auto 1fr auto", gap:10, fontSize:13, padding:"6px 0"}}>
            <span className="mono" style={{color:"var(--muted-2)"}}>id</span>
            <span>audience_key</span>
            <span className="mono" style={{color:"var(--muted-2)"}}>orders</span>
          </div>
          <div style={{height:1, background:"var(--line-2)", margin:"4px 0"}}/>
          <div className="mono" style={{fontSize:11, color:"var(--blue)", margin:"14px 0 10px"}}>+ cartlytics_enriched (joined)</div>
          {[
            {k:"income", v:"$120-180k"},
            {k:"top_external_cats", v:"Wellness, Beauty"},
            {k:"predicted_ltv", v:"$2,840"},
            {k:"churn_risk", v:"Low"},
          ].map(r=>(
            <div key={r.k} style={{display:"flex", justifyContent:"space-between", padding:"6px 0", fontSize:12.5}}>
              <span className="mono" style={{color:"var(--muted)"}}>{r.k}</span>
              <span style={{color:"var(--blue)", fontWeight:500}}>{r.v}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  // data
  return (
    <div style={{width:"100%", maxWidth:340}}>
      <div className="mono" style={{fontSize:10, color:"var(--muted-2)", textTransform:"uppercase", letterSpacing:".06em", marginBottom:10}}>Snowflake share</div>
      <div style={{background:"white", border:"1px solid var(--line)", borderRadius:14, padding:18}}>
        <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:14}}>
          <div style={{width:36, height:36, borderRadius:8, background:"var(--blue-tint)", color:"var(--blue)", display:"grid", placeItems:"center"}}>
            <IconSnowflake size={20}/>
          </div>
          <div>
            <div style={{fontSize:13.5, fontWeight:500}}>CARTLYTICS_SHARE</div>
            <div className="mono" style={{fontSize:11, color:"var(--muted-2)"}}>provider · cartlytics_inc</div>
          </div>
        </div>
        {[
          {n:"profiles_enriched", c:"184.2M"},
          {n:"profiles_meta_ready", c:"92.8M"},
          {n:"transactions_item_lvl", c:"2.6B"},
          {n:"taxonomy_categories", c:"48"},
        ].map(t=>(
          <div key={t.n} className="mono" style={{display:"flex", justifyContent:"space-between", padding:"7px 0", borderTop:"1px solid var(--line-2)", fontSize:12}}>
            <span>{t.n}</span>
            <span style={{color:"var(--muted-2)"}}>{t.c}</span>
          </div>
        ))}
        <div style={{marginTop:14, padding:"10px 12px", background:"#E5F8F1", borderRadius:8, display:"flex", alignItems:"center", gap:8, color:"var(--green)", fontSize:12}} className="mono">
          <IconCheck size={13}/> Refreshed 47 min ago
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// CTA + FOOTER
// ============================================================================
function BottomCTA({ onGetAccess }) {
  return (
    <section className="section" style={{paddingTop:60, paddingBottom:60}}>
      <div className="wrap">
        <div className="cta">
          <div className="cta-grid">
            <div>
              <h2>Ready to Enrich Your Data?</h2>
              <p>Contact us to discuss access, custom enrichment pilots, or Snowflake Marketplace integration.</p>
              <div className="actions">
                <button className="btn btn-primary btn-lg" onClick={onGetAccess}>Contact Us<IconArrow size={16}/></button>
                <a className="btn btn-lg" style={{color:"white", border:"1px solid rgba(255,255,255,.3)"}} href="#playground">View on Marketplace<IconExternal size={15}/></a>
              </div>
            </div>
            <div className="email-card">
              <div className="label">Or email us directly</div>
              <div className="val">partnerships@cartlytics.ai</div>
              <div style={{marginTop:14, display:"flex", gap:8}}>
                <span className="mono" style={{fontSize:11, padding:"4px 8px", background:"rgba(255,255,255,.12)", borderRadius:6}}>SOC 2 Type II (Pending)</span>
                <span className="mono" style={{fontSize:11, padding:"4px 8px", background:"rgba(255,255,255,.12)", borderRadius:6}}>GDPR</span>
                <span className="mono" style={{fontSize:11, padding:"4px 8px", background:"rgba(255,255,255,.12)", borderRadius:6}}>CCPA</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-row">
        <div style={{display:"flex", alignItems:"center", gap:12}}>
          <img src="/assets/logo-cropped_footer.png" alt="Cartlytics" style={{height:36}}/>
          <span className="footer-meta">© 2026 Cartanalytics. All rights reserved.</span>
        </div>
        <div className="footer-meta" style={{display:"flex", gap:24, flexWrap:"wrap"}}>
          <a href="/policies/">Policies</a>
          <a href="/policies/privacy.html">Privacy</a>
          <a href="/policies/terms.html">Terms</a>
          <a href="/policies/gdpr.html">GDPR</a>
          <a href="mailto:hello@cartlytics.ai">hello@cartlytics.ai</a>
          <a href="mailto:partnerships@cartlytics.ai">partnerships@cartlytics.ai</a>
          <a href="mailto:support@cartlytics.ai">support@cartlytics.ai</a>
          <a href="mailto:legal@cartlytics.ai">legal@cartlytics.ai</a>
        </div>
      </div>
    </footer>
  );
}

// ============================================================================
// MODAL — Get Access form
// ============================================================================
function GetAccessModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({ name: "", email: "", company: "", role: "Performance Marketer" });
  const [errors, setErrors] = useState({});

  useEffect(() => {
    if (!open) {
      setTimeout(() => { setStep(0); setForm({ name:"", email:"", company:"", role:"Performance Marketer" }); setErrors({}); }, 250);
    }
  }, [open]);

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Required";
    if (!form.email.trim()) e.email = "Required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Enter a valid email";
    if (!form.company.trim()) e.company = "Required";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (validate()) setStep(1);
  };

  return (
    <div className={"modal-bg " + (open ? "open" : "")} onClick={onClose}>
      <div className="modal" onClick={(e)=>e.stopPropagation()} style={{position:"relative"}}>
        <button className="modal-close" onClick={onClose} aria-label="Close"><IconClose size={16}/></button>
        {step === 0 ? (
          <form onSubmit={submit}>
            <div className="modal-head">
              <h3>Get Access</h3>
              <p>Tell us a bit about you. We'll be in touch within 24 hours with marketplace access and onboarding details.</p>
            </div>
            <div className="modal-body">
              <div className={"field " + (errors.name ? "err" : "")}>
                <label>Name</label>
                <input type="text" value={form.name} onChange={e=>setForm({...form, name: e.target.value})} placeholder="Jane Doe"/>
                {errors.name && <div className="field-err">{errors.name}</div>}
              </div>
              <div className={"field " + (errors.email ? "err" : "")}>
                <label>Work email</label>
                <input type="email" value={form.email} onChange={e=>setForm({...form, email: e.target.value})} placeholder="jane@acme.com"/>
                {errors.email && <div className="field-err">{errors.email}</div>}
              </div>
              <div className={"field " + (errors.company ? "err" : "")}>
                <label>Company</label>
                <input type="text" value={form.company} onChange={e=>setForm({...form, company: e.target.value})} placeholder="Acme, Inc."/>
                {errors.company && <div className="field-err">{errors.company}</div>}
              </div>
              <div className="field">
                <label>Your role</label>
                <select value={form.role} onChange={e=>setForm({...form, role: e.target.value})}>
                  <option>Performance Marketer</option>
                  <option>DTC / Brand</option>
                  <option>Data / Analytics</option>
                  <option>Founder / Exec</option>
                  <option>Other</option>
                </select>
              </div>
              <button type="submit" className="btn btn-primary btn-lg" style={{width:"100%", marginTop:6}}>
                Request Access<IconArrow size={16}/>
              </button>
            </div>
            <div className="modal-foot">
              <span>We'll never share your info.</span>
              <span className="mono">SOC 2 · GDPR · CCPA</span>
            </div>
          </form>
        ) : (
          <div className="success">
            <div className="check-big"><IconCheck size={28}/></div>
            <h3 style={{marginTop:18}}>You're on the list.</h3>
            <p style={{marginTop:10, color:"var(--muted)"}}>Thanks, {form.name.split(" ")[0]}. We'll be in touch at <strong style={{color:"var(--ink)"}}>{form.email}</strong> within 24 hours.</p>
            <button className="btn btn-ghost" style={{marginTop:24}} onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  Nav, Hero, Ticker, StatStrip, ValueProp, WhyCartlytics, Features,
  SqlPlayground, Personas, BottomCTA, Footer, GetAccessModal
});