/* screen-landing.jsx — Poki-inspired data-poetic landing */
/* global React, Counter, Sparkline, BarChart, LineChart, Donut, Avatar, Pill, Reveal, MascotConstellation, Mascot, Icon, formatCompact, formatMoney, useInView */

function LandingNav({ onCTA }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
      background: 'rgba(255,255,255,0.78)',
      borderBottom: '1px solid rgba(0,43,80,0.06)'
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 28px', display: 'flex', alignItems: 'center', gap: 32 }}>
        <div className="row items-center gap-12">
          <div style={{
            width: 32, height: 32, borderRadius: 9,
            background: 'linear-gradient(135deg, #009CFF, #1C1CC9)',
            display: 'grid', placeItems: 'center', color: 'white', fontWeight: 800, fontSize: 16,
            fontFamily: 'Space Grotesk', boxShadow: '0 4px 12px rgba(28,28,201,0.4)'
          }}>P</div>
          <div className="font-display bold" style={{ fontSize: 17 }}>Prime Influencer</div>
        </div>
        <nav className="row gap-24" style={{ marginLeft: 24, fontSize: 14, color: 'var(--ink-soft)', fontWeight: 500 }}>
          <a>Discover</a>
          <a>Brief AI</a>
          <a>Campaigns</a>
          <a>Reports</a>
          <a>Pricing</a>
        </nav>
        <div style={{ marginLeft: 'auto' }} className="row items-center gap-12">
          <button className="btn btn-ghost btn-sm" onClick={onCTA}>Sign in</button>
          <button className="btn btn-primary btn-sm" onClick={onCTA}>Start free</button>
        </div>
      </div>
    </div>
  );
}

function LandingHero({ onCTA }) {
  const [ref, inView] = useInView({ threshold: 0.05 });
  return (
    <section ref={ref} style={{ position: 'relative', padding: '60px 28px 80px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center' }}>
        <div>
          <Reveal>
            <span className="pill pill-lav" style={{ marginBottom: 18 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--indigo)', display: 'inline-block' }} />
              AI-powered KOL marketing · v2.4
            </span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="font-display" style={{
              fontSize: 'clamp(48px, 6.4vw, 84px)', fontWeight: 700, lineHeight: 0.96,
              letterSpacing: '-0.035em', margin: '14px 0 0'
            }}>
              The data <br />
              <span style={{
                background: 'linear-gradient(120deg, #009CFF 0%, #1C1CC9 50%, #FF6FA3 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                backgroundClip: 'text'
              }}>behind every</span><br />
              creator deal.
            </h1>
          </Reveal>
          <Reveal delay={260}>
            <p style={{
              maxWidth: 480, fontSize: 18, lineHeight: 1.55,
              color: 'var(--ink-soft)', marginTop: 24
            }}>
              From brief to payment. Prime turns AI shortlists, audience science and provenance into one workspace that brands and creators actually love.
            </p>
          </Reveal>
          <Reveal delay={400}>
            <div className="row gap-12 mt-6">
              <button className="btn btn-primary" onClick={onCTA}>
                Start free — 14 days {Icon.arrow}
              </button>
              <button className="btn btn-ghost" onClick={onCTA}>
                Watch 90s demo
              </button>
            </div>
          </Reveal>
          <Reveal delay={540}>
            <div className="row items-center gap-12 mt-6" style={{ paddingTop: 18 }}>
              <div className="avatar-stack">
                {['MV', 'TT', 'HG', 'PT'].map((n, i) => (
                  <div key={i} className="av" style={{
                    background: ['linear-gradient(135deg,#009CFF,#1C1CC9)', 'linear-gradient(135deg,#FF6FA3,#1C1CC9)', 'linear-gradient(135deg,#1FD6B4,#009CFF)', 'linear-gradient(135deg,#FEE960,#FF7A59)'][i]
                  }}>{n}</div>
                ))}
              </div>
              <div style={{ fontSize: 13 }}>
                <div className="bold">2,400+ brands &amp; agencies</div>
                <div className="muted" style={{ fontSize: 12 }}>running active campaigns this month</div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Hero data card */}
        <div style={{ position: 'relative' }}>
          <Reveal delay={300}>
            <HeroDataCard />
          </Reveal>
          {/* Floating stickers */}
          <div className="float-y" style={{ position: 'absolute', top: -16, right: 36, zIndex: 5 }}>
            <FactSticker color="lavender" label="Match score" value="94%" small />
          </div>
          <div className="float-y d2" style={{ position: 'absolute', bottom: 36, left: -28, zIndex: 5 }}>
            <FactSticker color="yellow" label="Brief → shortlist" value="6.4s" small />
          </div>
          <div className="float-y d3" style={{ position: 'absolute', bottom: -28, right: -10, zIndex: 5 }}>
            <FactSticker color="mint" label="Live KOLs" value={<Counter to={31247} duration={2000} />} small />
          </div>
        </div>
      </div>
    </section>
  );
}

function FactSticker({ color = 'lavender', label, value, small }) {
  const bg = {
    lavender: 'var(--lavender)',
    yellow: 'var(--yellow)',
    mint: 'var(--mint)',
    pink: 'var(--pink)',
    cyan: 'var(--cyan)',
  }[color];
  return (
    <div style={{
      background: bg,
      color: 'var(--ink)',
      padding: small ? '10px 14px' : '14px 18px',
      borderRadius: 16,
      boxShadow: '0 12px 30px rgba(0,43,80,0.16)',
      transform: small ? 'rotate(-3deg)' : 'rotate(-2deg)',
      minWidth: small ? 130 : 160
    }}>
      <div className="cap-label" style={{ fontSize: small ? 9 : 10 }}>{label}</div>
      <div className="font-display bold" style={{ fontSize: small ? 22 : 28, letterSpacing: '-0.02em', marginTop: 2 }}>
        {value}
      </div>
    </div>
  );
}

function HeroDataCard() {
  // The hero card mimics a "live brief result" — multiple data widgets stacked
  return (
    <div style={{
      background: 'white',
      borderRadius: 22,
      padding: 22,
      boxShadow: '0 30px 80px rgba(0,43,80,0.18)',
      border: '1px solid rgba(0,43,80,0.05)',
      position: 'relative'
    }}>
      {/* gradient top bar */}
      <div style={{
        height: 4, width: '100%',
        background: 'linear-gradient(90deg, #009CFF, #1C1CC9, #FF6FA3, #FEE960)',
        borderRadius: 999, marginBottom: 18
      }} />

      <div className="row items-center gap-12 mb-4">
        <div className="orb orb-sm" />
        <div>
          <div className="cap-label">Brief · #B-2419</div>
          <div className="font-display bold" style={{ fontSize: 16 }}>Vitamin C Skin Glow · Q2 Launch</div>
        </div>
        <Pill variant="mint" icon={<span style={{ width: 6, height: 6, background: 'currentColor', borderRadius: 999, display: 'inline-block' }} />}>
          Shortlist ready
        </Pill>
      </div>

      {/* mini KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
        {[
          { label: 'Reach', v: 4.8, suf: 'M', color: 'var(--cyan)', spark: [12, 16, 14, 22, 28, 34, 41, 46, 52, 58] },
          { label: 'Engagement', v: 6.2, suf: '%', color: 'var(--mint-deep)', spark: [22, 30, 26, 36, 38, 44, 41, 50, 56, 62] },
          { label: 'CPM', v: '$8.40', color: 'var(--indigo)', spark: [70, 60, 65, 50, 55, 48, 42, 40, 36, 34], down: true },
        ].map((k, i) => (
          <div key={i} style={{ padding: '12px 14px', background: 'var(--bg-soft)', borderRadius: 12 }}>
            <div className="cap-label" style={{ fontSize: 9 }}>{k.label}</div>
            <div className="font-display bold tabular" style={{ fontSize: 22, marginTop: 2 }}>
              {typeof k.v === 'number'
                ? <><Counter to={k.v} decimals={1} duration={1600} delay={200 + i * 150} />{k.suf}</>
                : k.v}
            </div>
            <Sparkline data={k.spark} color={k.color} fillId={`heroSpark${i}`} height={28} delay={0.4 + i * 0.15} />
          </div>
        ))}
      </div>

      {/* shortlist rows */}
      <div className="cap-label" style={{ marginBottom: 8 }}>AI-recommended creators</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { n: 'Linh Châu', cat: 'Skincare · Beauty', match: 94, fol: '482K', plat: 'tiktok' },
          { n: 'Mai Vy', cat: 'Lifestyle · Mom', match: 88, fol: '1.2M', plat: 'instagram' },
          { n: 'Hà Giang', cat: 'Clean beauty', match: 81, fol: '320K', plat: 'tiktok' },
        ].map((r, i) => (
          <div key={i} className="row items-center gap-12" style={{
            padding: '10px 12px', background: 'white', borderRadius: 12,
            border: '1px solid var(--line)',
            animation: `slideUp .5s ${0.5 + i * 0.12}s backwards cubic-bezier(.4,0,.2,1)` }}>
            <Avatar name={r.n} size={32} />
            <div className="flex-1">
              <div className="bold" style={{ fontSize: 13 }}>{r.n}</div>
              <div className="muted" style={{ fontSize: 11 }}>{r.cat} · {r.fol}</div>
            </div>
            <div style={{ color: 'var(--ink-soft)' }}>{Icon[r.plat]}</div>
            <div style={{
              background: 'var(--mint)',
              color: 'var(--ink)',
              borderRadius: 8, padding: '4px 9px',
              fontSize: 12, fontWeight: 800,
              letterSpacing: '-0.01em',
              fontFamily: 'Space Grotesk'
            }}>{r.match}%</div>
          </div>
        ))}
      </div>

      <style>{`@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }`}</style>
    </div>
  );
}

// ── Logos marquee ─────────────────────────────────────────────────
function LogosMarquee() {
  const logos = ['Vinamilk', 'Lazada', 'Tiki', 'Shopee', 'Maybelline', 'L\'Oréal', 'Coolmate', 'Dove', 'Highland Coffee', 'Vinfast', 'Be Group', 'Pizza 4P\'s'];
  return (
    <section style={{ padding: '12px 0 36px', borderBottom: '1px solid var(--line)' }}>
      <div className="text-center muted cap-label" style={{ marginBottom: 16 }}>Trusted by creator-first brands in Vietnam &amp; SEA</div>
      <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, black 8%, black 92%, transparent)' }}>
        <div className="marquee">
          {[...logos, ...logos].map((l, i) => (
            <div key={i} className="font-display bold" style={{
              fontSize: 22, color: 'var(--ink)', opacity: 0.4,
              whiteSpace: 'nowrap', letterSpacing: '-0.01em'
            }}>{l}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Big number facts (Poki style) ─────────────────────────────────
function FactsGrid() {
  return (
    <section style={{ padding: '90px 28px 60px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36 }}>
            <div>
              <span className="pill pill-cyan">By the numbers</span>
              <h2 className="font-display" style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.03em', margin: '12px 0 0', lineHeight: 1 }}>
                Receipts, not promises.
              </h2>
              <p className="muted" style={{ fontSize: 16, marginTop: 12, maxWidth: 540 }}>
                Every metric below is live across our network — pulled the moment this page loaded.
              </p>
            </div>
            <div className="muted" style={{ fontSize: 12 }}>Updated <span className="bold" style={{ color: 'var(--ink)' }}>just now</span> · auto-refresh every 60s</div>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 18 }}>
          <FactCard span={4} color="lavender" label="Creators on the network" value={31247} suffix="" big trend={[20, 22, 26, 28, 33, 35, 39, 42, 46, 50]} />
          <FactCard span={4} color="mint" label="Active campaigns" value={1284} trend={[40, 42, 48, 52, 54, 58, 62, 66, 72, 78]} />
          <FactCard span={4} color="yellow" label="Avg. brief → shortlist" value={6.4} suffix="s" decimals={1} trend={[22, 18, 15, 12, 10, 9, 8, 7, 6.8, 6.4]} reverse />

          <FactCard span={5} color="pink" label="Spend tracked this month" value={4.2} prefix="$" suffix="M" decimals={1} big trend={[1.2, 1.4, 1.6, 2.0, 2.4, 2.8, 3.1, 3.5, 3.9, 4.2]} />
          <FactCard span={4} color="cyan" label="Total impressions / week" value={184} suffix="M" trend={[100, 120, 140, 130, 150, 160, 170, 180, 175, 184]} />
          <FactCard span={3} color="ink" label="Avg. ER lift" value={2.4} suffix="×" decimals={1} trend={[1.1, 1.2, 1.4, 1.6, 1.8, 2.0, 2.1, 2.2, 2.3, 2.4]} />

          {/* a "no-content" decorative tile */}
          <Reveal delay={400} style={{ gridColumn: 'span 12' }}>
            <div style={{
              padding: 32,
              borderRadius: 28,
              background: 'linear-gradient(135deg, #002B50, #1C1CC9)',
              color: 'white',
              position: 'relative', overflow: 'hidden'
            }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems: 'center' }}>
                <div>
                  <span className="cap-label" style={{ color: 'rgba(255,255,255,0.6)' }}>Provenance, always</span>
                  <h3 className="font-display" style={{ fontSize: 40, fontWeight: 700, lineHeight: 1.05, marginTop: 8, letterSpacing: '-0.025em' }}>
                    Every number traceable to its source.
                  </h3>
                  <p style={{ marginTop: 14, color: 'rgba(255,255,255,0.75)', fontSize: 15, maxWidth: 460 }}>
                    Tap any stat. See where it came from — platform API, manual import, or our crawler — when it was fetched, and the confidence score.
                  </p>
                </div>
                <ProvenanceFlow />
              </div>
              <DecorativeGrid />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FactCard({ span, color, label, value, prefix = '', suffix = '', decimals = 0, big, trend, reverse }) {
  const [ref, inView] = useInView();
  const palette = {
    lavender: { bg: 'var(--lavender)', ink: '#3A1A5C', spark: '#1C1CC9' },
    mint:     { bg: 'var(--mint)',     ink: '#0a4a3a', spark: '#0a8a72' },
    yellow:   { bg: 'var(--yellow)',   ink: '#5c4400', spark: '#856200' },
    pink:     { bg: 'var(--pink)',     ink: '#5c1f3a', spark: '#B0457A' },
    cyan:     { bg: 'var(--cyan)',     ink: 'white', spark: 'rgba(255,255,255,0.95)' },
    ink:      { bg: 'var(--ink)',      ink: 'white', spark: 'var(--mint)' },
  }[color];
  return (
    <div
      ref={ref}
      className="reveal"
      style={{
        gridColumn: `span ${span}`,
        background: palette.bg,
        color: palette.ink,
        borderRadius: 24,
        padding: big ? 28 : 22,
        minHeight: big ? 220 : 180,
        position: 'relative', overflow: 'hidden',
        transition: 'opacity .8s, transform .8s',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(28px)'
      }}
    >
      <div className="cap-label" style={{ color: palette.ink, opacity: 0.7 }}>{label}</div>
      <div className="font-display tabular" style={{
        fontSize: big ? 'clamp(48px, 5.4vw, 68px)' : 'clamp(38px, 4vw, 52px)',
        fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 0.95,
        marginTop: 14, color: palette.ink
      }}>
        {inView && <Counter to={value} duration={1800} decimals={decimals} prefix={prefix} suffix={suffix} />}
        {!inView && <>{prefix}0{suffix}</>}
      </div>
      {trend && (
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 72, opacity: 0.9 }}>
          <Sparkline data={trend} color={palette.spark} fillId={`fc-${color}-${label}`} height={72} delay={0.4} />
        </div>
      )}
      {/* subtle decoration */}
      <div style={{
        position: 'absolute', top: 14, right: 14,
        width: 32, height: 32, borderRadius: 999,
        background: 'rgba(255,255,255,0.35)',
        display: 'grid', placeItems: 'center'
      }}>
        {reverse ? Icon.trendDown : Icon.trend}
      </div>
    </div>
  );
}

function ProvenanceFlow() {
  return (
    <div style={{ position: 'relative', height: 220 }}>
      <svg viewBox="0 0 420 220" width="100%" height="100%">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L10,5 L0,10 Z" fill="white" opacity="0.6" />
          </marker>
        </defs>
        {/* connections */}
        <path d="M 90 60 Q 200 60 220 110" stroke="rgba(255,255,255,0.35)" strokeWidth="2" strokeDasharray="4 4" fill="none" markerEnd="url(#arrow)"
          style={{ animation: 'dash 12s linear infinite' }} />
        <path d="M 90 160 Q 200 160 220 110" stroke="rgba(255,255,255,0.35)" strokeWidth="2" strokeDasharray="4 4" fill="none" markerEnd="url(#arrow)" style={{ animation: 'dash 12s linear infinite' }} />
        <path d="M 90 110 L 220 110" stroke="rgba(255,255,255,0.5)" strokeWidth="2" strokeDasharray="4 4" fill="none" markerEnd="url(#arrow)" style={{ animation: 'dash 12s linear infinite' }} />
        <path d="M 280 110 L 380 110" stroke="rgba(255,255,255,0.7)" strokeWidth="2" strokeDasharray="4 4" fill="none" markerEnd="url(#arrow)" style={{ animation: 'dash 12s linear infinite' }} />

        {/* source nodes */}
        {[
          { x: 50, y: 60, lab: 'Platform API', icon: 'API' },
          { x: 50, y: 110, lab: 'CSV import', icon: 'CSV' },
          { x: 50, y: 160, lab: 'Crawler', icon: 'WEB' },
        ].map((n, i) => (
          <g key={i}>
            <rect x={n.x - 40} y={n.y - 14} width="80" height="28" rx="14" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.4)" />
            <text x={n.x} y={n.y + 4} fill="white" fontSize="10" textAnchor="middle" fontFamily="Inter" fontWeight="700">{n.lab}</text>
          </g>
        ))}
        {/* AI node */}
        <g>
          <circle cx="250" cy="110" r="28" fill="#FF6FA3" />
          <circle cx="250" cy="110" r="42" fill="none" stroke="rgba(255,111,163,0.4)" strokeWidth="2"
            style={{ animation: 'aiPulse 2s ease-out infinite' }} />
          <text x="250" y="106" fill="white" fontSize="11" textAnchor="middle" fontWeight="800" fontFamily="Space Grotesk">AI</text>
          <text x="250" y="118" fill="white" fontSize="8" textAnchor="middle" fontFamily="Inter">verify</text>
        </g>
        {/* output */}
        <g>
          <rect x={340} y={92} width="80" height="36" rx="10" fill="var(--mint)" />
          <text x="380" y="108" fill="var(--ink)" fontSize="10" textAnchor="middle" fontWeight="800" fontFamily="Space Grotesk">94%</text>
          <text x="380" y="120" fill="var(--ink)" fontSize="8" textAnchor="middle" fontFamily="Inter">confidence</text>
        </g>
      </svg>
      <style>{`
        @keyframes dash { to { stroke-dashoffset: -64; } }
        @keyframes aiPulse { 0% { r: 30; opacity: 1; } 100% { r: 60; opacity: 0; } }
      `}</style>
    </div>
  );
}

function DecorativeGrid() {
  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
      backgroundSize: '36px 36px',
      pointerEvents: 'none',
      zIndex: 0
    }} />
  );
}

// ── How it works (3 stops) ─────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      color: '#EAC2FB',
      no: '01',
      title: 'Brief in plain Vietnamese',
      copy: 'Tell Prime your goal, budget, and product in 4 fields. The AI parses platform, audience, content vibe — and turns it into structured filters.',
      vis: <BriefVis />
    },
    {
      color: '#79FEE7',
      no: '02',
      title: 'Shortlist that explains itself',
      copy: 'Within seconds, see 5–25 creators ranked by match score, with reasoning, risk flags, and a price band per format.',
      vis: <ShortlistVis />
    },
    {
      color: '#FFC3D6',
      no: '03',
      title: 'Run, measure, replay',
      copy: 'Approve content, track posts, watch reach build live. Reports auto-write a narrative — keep the wins, rebook the best.',
      vis: <RunVis />
    },
  ];
  return (
    <section style={{ padding: '70px 28px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <Reveal>
          <div className="text-center">
            <span className="pill pill-yellow">3 stops, end to end</span>
            <h2 className="font-display" style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.03em', margin: '14px auto 8px', lineHeight: 1 }}>
              From idea to invoice.
            </h2>
            <p className="muted" style={{ maxWidth: 540, margin: '0 auto', fontSize: 16 }}>
              No spreadsheets, no DMs lost in inboxes, no &ldquo;send me a screenshot&rdquo;.
            </p>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18, marginTop: 48 }}>
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 140}>
              <div style={{
                background: 'white',
                border: '1px solid var(--line)',
                borderRadius: 24,
                padding: 24,
                height: '100%',
                position: 'relative',
                overflow: 'hidden'
              }}>
                <div style={{
                  position: 'absolute', top: -40, right: -40,
                  width: 200, height: 200, borderRadius: '50%',
                  background: s.color, opacity: 0.5, filter: 'blur(20px)'
                }} />
                <div style={{ position: 'relative', zIndex: 1 }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 14,
                    background: s.color,
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'Space Grotesk', fontWeight: 800, fontSize: 16,
                    color: 'var(--ink)'
                  }}>{s.no}</div>
                  <h3 className="font-display" style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 14, lineHeight: 1.1 }}>
                    {s.title}
                  </h3>
                  <p className="muted" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 8 }}>
                    {s.copy}
                  </p>
                  <div style={{ marginTop: 20 }}>{s.vis}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BriefVis() {
  return (
    <div style={{ background: 'var(--bg-soft)', borderRadius: 14, padding: 14 }}>
      <div className="cap-label" style={{ fontSize: 9 }}>Goal</div>
      <div className="bold" style={{ fontSize: 13, marginTop: 2 }}>Launch new vitamin C serum to Gen-Z women in HCM</div>
      <div className="row gap-4 mt-2" style={{ flexWrap: 'wrap' }}>
        <Pill variant="cyan">tiktok</Pill>
        <Pill variant="pink">18–24</Pill>
        <Pill variant="lav">HCM, HN</Pill>
        <Pill variant="mint">$5K–$15K</Pill>
      </div>
      <div className="row items-center gap-8 mt-3">
        <div className="ai-thinking"><span className="dot" /><span className="dot" /><span className="dot" /></div>
        <span className="muted" style={{ fontSize: 11 }}>Parsing brief…</span>
      </div>
    </div>
  );
}

function ShortlistVis() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        { n: 'Linh Châu', m: 94, c: 'var(--mint-deep)' },
        { n: 'Mai Vy', m: 88, c: 'var(--cyan)' },
        { n: 'Hà Giang', m: 81, c: 'var(--cyan)' },
      ].map((r, i) => (
        <div key={i} className="row items-center gap-8" style={{ padding: 8, background: 'var(--bg-soft)', borderRadius: 10 }}>
          <Avatar name={r.n} size={26} />
          <div className="flex-1 bold" style={{ fontSize: 12 }}>{r.n}</div>
          <div style={{ height: 6, width: 64, background: 'var(--line)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: r.m + '%', background: r.c, borderRadius: 999, transformOrigin: 'left', animation: `grow-w 1.2s ${0.3 + i * 0.15}s cubic-bezier(.4,0,.2,1) both`, transform: 'scaleX(0)' }} />
          </div>
          <div className="tabular bold" style={{ fontSize: 12 }}>{r.m}%</div>
        </div>
      ))}
      <style>{`@keyframes grow-w { to { transform: scaleX(1); } }`}</style>
    </div>
  );
}

function RunVis() {
  return (
    <div style={{ background: 'var(--bg-soft)', borderRadius: 14, padding: 14, height: 152, position: 'relative' }}>
      <div className="cap-label" style={{ fontSize: 9 }}>Reach (last 14 days)</div>
      <Sparkline
        data={[8, 12, 15, 20, 28, 36, 42, 50, 60, 72, 78, 88, 96, 104]}
        color="var(--indigo)"
        fillId="runSpark"
        height={88}
      />
      <div className="row items-center justify-between" style={{ marginTop: 8 }}>
        <div>
          <div className="cap-label" style={{ fontSize: 9 }}>Total reach</div>
          <div className="font-display bold" style={{ fontSize: 18 }}><Counter to={1.04} decimals={2} duration={2000} />M</div>
        </div>
        <Pill variant="mint" icon={<>{Icon.trend}</>}>+42%</Pill>
      </div>
    </div>
  );
}

// ── Feature stripes ─────────────────────────────────────────────────
function FeatureStripes() {
  const stripes = [
    {
      side: 'left', tag: 'AI Discovery',
      title: 'A search engine for trustworthy creators',
      copy: 'Filter by audience country, age, follower band, engagement floor, content category, brand-safety flag, last-active window — and Prime ranks them all by your brief.',
      bullets: ['Multi-platform: TikTok, IG, YouTube, Shopee, TikTok Shop', 'Audience overlap heatmap', 'Provenance-tagged stats (API · CSV · Crawler)'],
      vis: <DiscoveryVis />
    },
    {
      side: 'right', tag: 'Creator Workspace',
      title: 'A media kit your creators will actually update',
      copy: 'Creators see their own dashboard — earnings, open briefs, deliverables, rate card — without ever leaving Prime. Brand-side gains a single source of truth.',
      bullets: ['Open-brief marketplace', 'Auto-built media kit from posts', 'Affiliate + commission tracking'],
      vis: <CreatorVis />
    },
    {
      side: 'left', tag: 'Reporting',
      title: 'Reports that read like a story',
      copy: 'Prime auto-writes a 1-page narrative — what worked, what didn\'t, what to rebook — backed by the campaign\'s real numbers. Export to PDF or share a link.',
      bullets: ['AI campaign summary', 'Rebook recommendations', 'Per-influencer attribution'],
      vis: <ReportVis />
    },
  ];
  return (
    <section style={{ padding: '40px 28px 80px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 80 }}>
        {stripes.map((s, i) => (
          <Reveal key={i}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: s.side === 'left' ? '1fr 1.05fr' : '1.05fr 1fr',
              gap: 60,
              alignItems: 'center'
            }}>
              <div style={{ order: s.side === 'left' ? 1 : 2 }}>
                <span className="pill pill-ink">{s.tag}</span>
                <h3 className="font-display" style={{ fontSize: 38, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.05, marginTop: 16 }}>
                  {s.title}
                </h3>
                <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.6, marginTop: 14 }}>
                  {s.copy}
                </p>
                <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {s.bullets.map((b, j) => (
                    <li key={j} className="row items-center gap-8" style={{ fontSize: 14 }}>
                      <div style={{
                        width: 22, height: 22, borderRadius: 999,
                        background: 'var(--mint)', color: 'var(--ink)',
                        display: 'grid', placeItems: 'center'
                      }}>{Icon.check}</div>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{ order: s.side === 'left' ? 2 : 1 }}>
                {s.vis}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function DiscoveryVis() {
  return (
    <div style={{
      background: 'white',
      border: '1px solid var(--line)',
      borderRadius: 24,
      padding: 18,
      boxShadow: '0 24px 60px rgba(0,43,80,0.10)'
    }}>
      <div className="row items-center gap-8 mb-3">
        <div className="row items-center gap-6" style={{
          padding: '8px 14px', background: 'var(--bg-soft)', borderRadius: 999,
          fontSize: 13, color: 'var(--ink-soft)', flex: 1
        }}>
          {Icon.search} mommy creators 100K–500K HCM
        </div>
        <Pill variant="cyan">312 found</Pill>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[
          ['Mai Vy', 'Lifestyle · Mom', 92, '1.2M'],
          ['Linh Châu', 'Skincare', 88, '482K'],
          ['Phương Anh', 'Beauty Vlog', 84, '210K'],
          ['Hà Giang', 'Clean beauty', 81, '320K'],
        ].map(([n, c, m, f], i) => (
          <div key={i} className="row items-center gap-8" style={{ padding: 10, background: 'var(--bg-soft)', borderRadius: 12 }}>
            <Avatar name={n} size={32} />
            <div className="flex-1">
              <div className="bold" style={{ fontSize: 12 }}>{n}</div>
              <div className="muted" style={{ fontSize: 10 }}>{c}</div>
            </div>
            <div style={{
              background: 'var(--ink)', color: 'white',
              borderRadius: 8, padding: '3px 7px', fontWeight: 800, fontSize: 11,
              fontFamily: 'Space Grotesk'
            }}>{m}%</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CreatorVis() {
  return (
    <div style={{
      background: 'linear-gradient(135deg, #79FEE7 0%, #FFFFFF 60%)',
      border: '1px solid rgba(0,43,80,0.05)',
      borderRadius: 24,
      padding: 22,
      boxShadow: '0 24px 60px rgba(0,43,80,0.10)'
    }}>
      <div className="row items-center gap-12">
        <Avatar name="Linh Châu" size={48} />
        <div>
          <div className="font-display bold" style={{ fontSize: 18 }}>Linh Châu {Icon.verified}</div>
          <div className="muted" style={{ fontSize: 12 }}>@linhchau · Skincare · 482K</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 16 }}>
        <div style={{ background: 'white', borderRadius: 12, padding: 12 }}>
          <div className="cap-label" style={{ fontSize: 9 }}>Earnings · Q2</div>
          <div className="font-display bold tabular" style={{ fontSize: 22 }}><Counter to={4720} prefix="$" /></div>
        </div>
        <div style={{ background: 'white', borderRadius: 12, padding: 12 }}>
          <div className="cap-label" style={{ fontSize: 9 }}>Open briefs</div>
          <div className="font-display bold" style={{ fontSize: 22 }}>7</div>
        </div>
      </div>
      <div style={{ background: 'white', borderRadius: 12, padding: 12, marginTop: 10 }}>
        <div className="row items-center justify-between mb-2">
          <div className="cap-label" style={{ fontSize: 9 }}>Engagement rate (12 weeks)</div>
          <Pill variant="mint" icon={<>{Icon.trend}</>}>+0.8pp</Pill>
        </div>
        <Sparkline data={[3.2, 3.4, 3.1, 3.6, 4.0, 3.8, 4.2, 4.4, 4.6, 4.8, 5.1, 5.4]} color="var(--mint-deep)" fillId="creatorSpark" />
      </div>
    </div>
  );
}

function ReportVis() {
  return (
    <div style={{
      background: 'white',
      border: '1px solid var(--line)',
      borderRadius: 24,
      padding: 22,
      boxShadow: '0 24px 60px rgba(0,43,80,0.10)'
    }}>
      <div className="row items-center gap-8 mb-2">
        <div className="orb orb-sm" />
        <div className="font-display bold" style={{ fontSize: 14 }}>Auto-narrative · Campaign #C-1182</div>
      </div>
      <div style={{ background: 'var(--bg-soft)', borderRadius: 12, padding: 14, fontSize: 13, lineHeight: 1.55, color: 'var(--ink)' }}>
        <span className="bold">Vitamin C launch beat plan by 38%.</span> Three mid-tier KOLs on TikTok drove <span className="bold">68%</span> of reach. <span className="bold">Linh Châu</span> over-performed her band at <span className="bold">CPM $6.12</span> — recommend re-booking for Q3.
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 12 }}>
        {[
          ['Reach', '4.8M', 'var(--cyan)'],
          ['ER', '6.2%', 'var(--mint-deep)'],
          ['CPM', '$8.40', 'var(--indigo)']
        ].map(([l, v, c], i) => (
          <div key={i} style={{ background: 'var(--bg-soft)', borderRadius: 10, padding: 10, textAlign: 'center' }}>
            <div className="cap-label" style={{ fontSize: 9 }}>{l}</div>
            <div className="font-display bold tabular" style={{ fontSize: 18, color: c }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Testimonial / quotes row ─────────────────────────────────────
function QuotesRow() {
  const quotes = [
    { name: 'Trang Lê', role: 'Head of Brand, Coolmate', q: 'Cut our KOL sourcing from 3 days to 20 minutes. The shortlist reasoning is what sold our team.' },
    { name: 'Đức Anh', role: 'Performance, Lazada VN', q: 'First platform where the data provenance is visible. We can actually defend numbers to our CFO.' },
    { name: 'Mai Linh', role: 'Creator, 320K', q: 'Brands brief me in Prime, I deliver in Prime, I get paid in Prime. That\'s it.' },
  ];
  return (
    <section style={{ padding: '40px 28px 80px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal>
          <h2 className="font-display text-center" style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em', margin: 0 }}>
            People who pay for this say…
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18, marginTop: 32 }}>
          {quotes.map((qq, i) => (
            <Reveal key={i} delay={i * 120}>
              <div style={{
                background: ['var(--lavender)', 'var(--mint)', 'var(--yellow)'][i],
                color: 'var(--ink)',
                borderRadius: 22, padding: 24, height: '100%',
                transform: ['rotate(-1.2deg)', 'rotate(0.6deg)', 'rotate(-0.4deg)'][i]
              }}>
                <div className="font-display" style={{ fontSize: 48, fontWeight: 700, lineHeight: 0.5, opacity: 0.6, marginBottom: 6 }}>&ldquo;</div>
                <div style={{ fontSize: 16, lineHeight: 1.5, fontWeight: 500 }}>
                  {qq.q}
                </div>
                <div className="row items-center gap-8 mt-4" style={{ paddingTop: 14, borderTop: '1.5px solid rgba(0,43,80,0.1)' }}>
                  <Avatar name={qq.name} size={32} />
                  <div>
                    <div className="bold" style={{ fontSize: 13 }}>{qq.name}</div>
                    <div style={{ fontSize: 11, opacity: 0.7 }}>{qq.role}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── CTA + Footer ─────────────────────────────────────────────────
function LandingCTA({ onCTA }) {
  return (
    <section style={{ padding: '40px 28px 80px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Reveal>
          <div style={{
            background: 'linear-gradient(135deg, #009CFF, #1C1CC9 60%, #FF6FA3)',
            borderRadius: 32, padding: 56,
            color: 'white',
            position: 'relative', overflow: 'hidden',
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'center'
          }}>
            <DecorativeGrid />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <h2 className="font-display" style={{ fontSize: 52, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.03em', margin: 0 }}>
                Ship your next campaign in a week.
              </h2>
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.85)', marginTop: 16, maxWidth: 440 }}>
                Onboard your brief, get matches in 6 seconds, and we&rsquo;ll handle the rest. 14-day trial, no card.
              </p>
              <div className="row gap-12 mt-4">
                <button className="btn btn-yellow" onClick={onCTA}>Start free trial {Icon.arrow}</button>
                <button className="btn" style={{ background: 'rgba(255,255,255,0.12)', color: 'white', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.3)' }} onClick={onCTA}>Talk to sales</button>
              </div>
            </div>
            <div style={{ position: 'relative', zIndex: 1, display: 'grid', placeItems: 'center' }}>
              <Mascot size={240} />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function LandingFooter() {
  return (
    <footer style={{ padding: '32px 28px 60px', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <div className="row items-center gap-8 mb-2">
            <div style={{
              width: 28, height: 28, borderRadius: 8,
              background: 'linear-gradient(135deg, #009CFF, #1C1CC9)',
              color: 'white', fontWeight: 800, display: 'grid', placeItems: 'center',
              fontFamily: 'Space Grotesk', fontSize: 14
            }}>P</div>
            <span className="font-display bold" style={{ fontSize: 16 }}>Prime Influencer</span>
          </div>
          <p className="muted" style={{ fontSize: 13, maxWidth: 320, lineHeight: 1.55 }}>
            AI-powered influencer marketing for Vietnam, Malaysia and SEA. From brief to invoice, in one place.
          </p>
        </div>
        {[
          ['Product', ['Discovery', 'Brief AI', 'Campaigns', 'Reports', 'Creator portal']],
          ['Company', ['About', 'Customers', 'Careers', 'Blog']],
          ['Legal', ['Terms', 'Privacy', 'Data sources', 'Contact']],
        ].map(([h, items], i) => (
          <div key={i}>
            <div className="cap-label mb-2">{h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              {items.map(it => <li key={it} className="muted"><a>{it}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="text-center muted" style={{ fontSize: 12, marginTop: 36 }}>
        © 2026 Prime Production · All rights reserved
      </div>
    </footer>
  );
}

// ── Main landing screen ──────────────────────────────────────────
function ScreenLanding({ onCTA }) {
  return (
    <div className="screen" style={{ background: 'white' }}>
      <LandingNav onCTA={onCTA} />
      <LandingHero onCTA={onCTA} />
      <LogosMarquee />
      <FactsGrid />
      <HowItWorks />
      <FeatureStripes />
      <QuotesRow />
      <LandingCTA onCTA={onCTA} />
      <LandingFooter />
    </div>
  );
}

Object.assign(window, { ScreenLanding });