// IkiBot heroes — color is fully driven by CSS vars on the wrapper:
//   --iki-bg   (deep field)
//   --iki-fg   (cream / apricot)
//   --iki-card (slightly lifted bg used in card mock)
// Two heroes share the same vars; the host page picks the palette.

// ---------- Shared Wordmark ----------
function Wordmark({ size = 22 }) {
  return (
    <span
      style={{
        fontFamily: '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif',
        fontWeight: 700,
        fontSize: size,
        letterSpacing: '-0.02em',
        color: 'var(--iki-fg)',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
        lineHeight: 1,
      }}
    >
      <span
        aria-hidden="true"
        style={{
          width: size * 0.42,
          height: size * 0.42,
          background: 'var(--iki-fg)',
          borderRadius: 999,
          display: 'inline-block',
          marginRight: 2,
        }}
      />
      IkiBot
    </span>
  );
}

// ---------- Sticky Nav ----------
function Nav() {
  const navStyle = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '22px 56px',
    borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 14%, transparent)',
    background: 'var(--iki-bg)',
    color: 'var(--iki-fg)',
    fontFamily: '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif',
    fontSize: 14,
    letterSpacing: '0.01em',
  };
  const linkStyle = {
    color: 'var(--iki-fg)',
    textDecoration: 'none',
    opacity: 0.85,
    cursor: 'pointer',
  };
  return (
    <nav style={navStyle}>
      <Wordmark size={22} />
      <div style={{ display: 'flex', gap: 36 }}>
        <a style={linkStyle}>Features</a>
        <a style={linkStyle}>Retailers</a>
        <a style={linkStyle}>FAQ</a>
      </div>
      <a
        style={{
          background: 'var(--iki-fg)',
          color: 'var(--iki-bg)',
          padding: '10px 18px',
          borderRadius: 999,
          fontWeight: 600,
          fontSize: 13,
          letterSpacing: '0.01em',
          textDecoration: 'none',
          cursor: 'pointer',
        }}
      >
        Join Discord
      </a>
    </nav>
  );
}

// ---------- Reusable button ----------
function CTAButton({ children, variant = 'solid' }) {
  const base = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '16px 26px',
    borderRadius: 6,
    fontFamily: '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif',
    fontWeight: 600,
    fontSize: 15,
    letterSpacing: '0.01em',
    cursor: 'pointer',
    transition: 'opacity 220ms ease, background 220ms ease, color 220ms ease',
    textDecoration: 'none',
  };
  if (variant === 'solid') {
    return (
      <a
        style={{
          ...base,
          background: 'var(--iki-fg)',
          color: 'var(--iki-bg)',
          border: '1px solid var(--iki-fg)',
        }}
      >
        {children}
        <span aria-hidden="true" style={{ fontSize: 18, lineHeight: 1 }}>↗</span>
      </a>
    );
  }
  return (
    <a
      style={{
        ...base,
        background: 'transparent',
        color: 'var(--iki-fg)',
        border: '1px solid var(--iki-fg)',
      }}
    >
      {children}
    </a>
  );
}

// ---------- Subtle grain overlay (atmosphere, not noise) ----------
function GrainOverlay({ on = true }) {
  if (!on) return null;
  // Tiny inline SVG noise — low opacity, soft-light mode → adds film-stock texture
  const dataUrl =
    "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")";
  return (
    <div
      aria-hidden="true"
      style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: dataUrl,
        backgroundSize: '160px 160px',
        opacity: 0.07,
        mixBlendMode: 'overlay',
        pointerEvents: 'none',
        zIndex: 1,
      }}
    />
  );
}

// ============================================================
// HERO A — split layout, product visual + editorial copy
// ============================================================
function HeroA({ grain = true }) {
  return (
    <div
      style={{
        position: 'relative',
        background: 'var(--iki-bg)',
        color: 'var(--iki-fg)',
        fontFamily: '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif',
        minHeight: 900,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      <GrainOverlay on={grain} />

      <Nav />

      {/* Tiny meta strip */}
      <div
        style={{
          position: 'relative', zIndex: 2,
          display: 'flex',
          justifyContent: 'space-between',
          padding: '18px 56px',
          fontSize: 11,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          opacity: 0.6,
        }}
      >
        <span>Iss. 01 · Checkout Engine</span>
        <span>Melbourne · AEDT · 03:14</span>
      </div>

      {/* Hero body */}
      <div
        style={{
          position: 'relative',
          zIndex: 2,
          flex: 1,
          padding: '48px 56px 80px',
          display: 'grid',
          gridTemplateColumns: '1.05fr 0.95fr',
          gap: 56,
          alignItems: 'center',
        }}
      >
        {/* Left: copy */}
        <div>
          <div
            style={{
              fontSize: 12,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              opacity: 0.7,
              marginBottom: 28,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 10,
            }}
          >
            <span
              style={{
                width: 6,
                height: 6,
                background: 'var(--iki-fg)',
                borderRadius: 999,
                display: 'inline-block',
                animation: 'ikipulse 2.4s ease-in-out infinite',
              }}
            />
            Now in private beta
          </div>

          <h1
            style={{
              fontSize: 'clamp(56px, 6.4vw, 104px)',
              lineHeight: 0.94,
              letterSpacing: '-0.035em',
              fontWeight: 700,
              margin: 0,
              textWrap: 'balance',
            }}
          >
            Australia&rsquo;s
            <br />
            Fastest
            <br />
            <span style={{ fontStyle: 'italic', fontWeight: 400 }}>Checkout</span>{' '}
            Bot.
          </h1>

          <p
            style={{
              marginTop: 32,
              maxWidth: 460,
              fontSize: 18,
              lineHeight: 1.55,
              opacity: 0.82,
            }}
          >
            A purpose-built desktop engine for{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Kmart
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Big W
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Target
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              EB Games
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Costco
            </span>{' '}
            and{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Toymate
            </span>
            . Secure limited drops in milliseconds — without the chaos.
          </p>

          <div style={{ display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
            <CTAButton variant="solid">Join Discord Waiting Room</CTAButton>
            <CTAButton variant="outline">Join Whop Waitlist</CTAButton>
          </div>
        </div>

        {/* Right: product visual */}
        <div>
          <ProductVisual />
        </div>

        {/* Bottom meta line */}
        <div
          style={{
            position: 'absolute',
            left: 56,
            right: 56,
            bottom: 28,
            display: 'flex',
            justifyContent: 'space-between',
            fontSize: 11,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            opacity: 0.5,
            paddingTop: 20,
            borderTop: '1px solid color-mix(in oklab, var(--iki-fg) 14%, transparent)',
          }}
        >
          <span>↓ Scroll · features</span>
          <span>Avg. checkout · 487ms</span>
        </div>
      </div>

      <style>{`
        @keyframes ikipulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%      { opacity: 0.35; transform: scale(0.7); }
        }
      `}</style>
    </div>
  );
}

// Product visual — tasks console, all on-brand
function ProductVisual() {
  return (
    <div style={{ position: 'relative' }}>
      <div
        style={{
          background: 'var(--iki-card)',
          border: '1px solid color-mix(in oklab, var(--iki-fg) 14%, transparent)',
          borderRadius: 10,
          color: 'var(--iki-fg)',
          fontFamily: '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif',
          overflow: 'hidden',
          boxShadow: '0 30px 80px -30px rgba(0,0,0,0.55)',
          transform: 'rotate(-1.2deg)',
        }}
      >
        {/* Title bar */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '12px 16px',
            borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 12%, transparent)',
            fontSize: 11,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
            opacity: 0.85,
          }}
        >
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--iki-fg)' }} />
            IkiBot · live tasks
          </span>
          <span>06 / 06 active</span>
        </div>

        {/* Task rows */}
        <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { site: 'Big W',    sku: 'Phantasmal Flames · Booster Box',     status: 'Checked out', ms: '412ms', done: true,  prog: 1 },
            { site: 'Toymate',  sku: 'Ascended Heroes · ETB',               status: 'Payment',     ms: '—',     done: false, prog: 0.84 },
            { site: 'Target',   sku: 'Destined Rivals · Booster Box',       status: 'Carting',     ms: '—',     done: false, prog: 0.62 },
            { site: 'Kmart',    sku: 'Ascended Heroes · Booster Bundles',   status: 'Queued',      ms: '—',     done: false, prog: 0.38 },
            { site: 'EB Games', sku: '151 · Booster Bundles',               status: 'Monitoring',  ms: '—',     done: false, prog: 0.18 },
            { site: 'Costco',   sku: 'Prismatic Evolution · Bundle',        status: 'Monitoring',  ms: '—',     done: false, prog: 0.08 },
          ].map((t, i) => (
            <div
              key={i}
              style={{
                display: 'grid',
                gridTemplateColumns: '70px 1fr 90px 60px',
                alignItems: 'center',
                gap: 12,
                padding: '12px 14px',
                borderRadius: 6,
                background: t.done
                  ? 'color-mix(in oklab, var(--iki-fg) 9%, transparent)'
                  : 'color-mix(in oklab, var(--iki-fg) 4%, transparent)',
                border: '1px solid color-mix(in oklab, var(--iki-fg) 10%, transparent)',
                fontSize: 13,
              }}
            >
              <span style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7 }}>
                {t.site}
              </span>
              <div>
                <div style={{ fontFamily: 'ui-monospace, "SF Mono", monospace', fontSize: 12, opacity: 0.95 }}>
                  {t.sku}
                </div>
                <div
                  style={{
                    marginTop: 6,
                    height: 3,
                    borderRadius: 2,
                    background: 'color-mix(in oklab, var(--iki-fg) 14%, transparent)',
                    overflow: 'hidden',
                  }}
                >
                  <div
                    style={{
                      width: `${t.prog * 100}%`,
                      height: '100%',
                      background: 'var(--iki-fg)',
                    }}
                  />
                </div>
              </div>
              <span style={{ fontSize: 11, opacity: 0.85 }}>{t.status}</span>
              <span style={{ fontSize: 11, fontFamily: 'ui-monospace, monospace', textAlign: 'right', opacity: 0.85 }}>
                {t.ms}
              </span>
            </div>
          ))}
        </div>

        {/* Footer strip */}
        <div
          style={{
            padding: '12px 18px',
            borderTop: '1px solid color-mix(in oklab, var(--iki-fg) 12%, transparent)',
            display: 'flex',
            justifyContent: 'space-between',
            fontSize: 10,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            opacity: 0.65,
          }}
        >
          <span>Session · 00:14:22</span>
          <span>Region · AU-Sydney</span>
        </div>
      </div>

      {/* Floating chip */}
      <div
        style={{
          position: 'absolute',
          right: -14,
          bottom: -22,
          background: 'var(--iki-fg)',
          color: 'var(--iki-bg)',
          padding: '14px 18px',
          borderRadius: 10,
          fontSize: 12,
          letterSpacing: '0.06em',
          boxShadow: '0 20px 50px -20px rgba(0,0,0,0.4)',
          transform: 'rotate(2deg)',
          maxWidth: 220,
          lineHeight: 1.35,
          fontFamily: '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif',
        }}
      >
        <div style={{ fontWeight: 700, fontSize: 22, lineHeight: 1, marginBottom: 6 }}>487ms</div>
        <div style={{ opacity: 0.7, fontSize: 11 }}>median checkout, last 30 days</div>
      </div>
    </div>
  );
}

// ============================================================
// HERO B — pure editorial typography
// ============================================================
function HeroB({ grain = true }) {
  return (
    <div
      style={{
        position: 'relative',
        background: 'var(--iki-bg)',
        color: 'var(--iki-fg)',
        fontFamily: '"BD Supper", "Bricolage Grotesque", system-ui, sans-serif',
        minHeight: 900,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      <GrainOverlay on={grain} />

      <Nav />

      {/* Top meta */}
      <div
        style={{
          position: 'relative', zIndex: 2,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          padding: '22px 56px',
          gap: 32,
          fontSize: 11,
          letterSpacing: '0.2em',
          textTransform: 'uppercase',
          opacity: 0.55,
          borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 12%, transparent)',
        }}
      >
        <span>Iss. 01</span>
        <span>6 AU retailers</span>
        <span>Desktop · Win + Mac</span>
        <span style={{ textAlign: 'right' }}>v1.0 · Beta</span>
      </div>

      {/* Hero body — single bold claim */}
      <div
        style={{
          position: 'relative', zIndex: 2,
          flex: 1,
          padding: '120px 56px 80px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          maxWidth: 1600,
          margin: '0 auto',
          width: '100%',
        }}
      >
        {/* Eyebrow */}
        <div
          style={{
            fontSize: 12,
            letterSpacing: '0.28em',
            textTransform: 'uppercase',
            opacity: 0.7,
            marginBottom: 56,
            display: 'flex',
            alignItems: 'center',
            gap: 14,
          }}
        >
          <span style={{ width: 32, height: 1, background: 'var(--iki-fg)', opacity: 0.6 }} />
          A checkout engine for Australia
        </div>

        {/* The claim */}
        <h1
          style={{
            fontSize: 'clamp(72px, 10vw, 180px)',
            lineHeight: 0.88,
            letterSpacing: '-0.045em',
            fontWeight: 700,
            margin: 0,
            textWrap: 'balance',
            maxWidth: '15ch',
          }}
        >
          Australia&rsquo;s
          <br />
          fastest{' '}
          <span style={{ fontStyle: 'italic', fontWeight: 400, opacity: 0.92 }}>
            checkout
          </span>
          <br />
          bot.
        </h1>

        {/* Subhead + CTAs row */}
        <div
          style={{
            marginTop: 80,
            display: 'grid',
            gridTemplateColumns: '1fr auto',
            gap: 56,
            alignItems: 'end',
          }}
        >
          <p
            style={{
              fontSize: 20,
              lineHeight: 1.5,
              opacity: 0.85,
              maxWidth: 520,
              margin: 0,
            }}
          >
            Built for{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Kmart
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Big W
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Target
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              EB Games
            </span>,{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Costco
            </span>{' '}
            and{' '}
            <span style={{ borderBottom: '1px solid color-mix(in oklab, var(--iki-fg) 40%, transparent)' }}>
              Toymate
            </span>
            . No noise, no glow, no hype — just a quiet engine that wins drops.
          </p>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
            <CTAButton variant="solid">Join Discord Waiting Room</CTAButton>
            <CTAButton variant="outline">Join Whop Waitlist</CTAButton>
          </div>
        </div>

        {/* Bottom rule with stats */}
        <div
          style={{
            marginTop: 96,
            paddingTop: 24,
            borderTop: '1px solid color-mix(in oklab, var(--iki-fg) 14%, transparent)',
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 32,
          }}
        >
          {[
            ['487', 'ms median checkout'],
            ['6', 'AU retailers supported'],
            ['24/7', 'monitoring uptime'],
            ['00', 'third-party trackers'],
          ].map(([n, l], i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span
                style={{
                  fontSize: 38,
                  lineHeight: 1,
                  fontWeight: 700,
                  letterSpacing: '-0.03em',
                }}
              >
                {n}
              </span>
              <span
                style={{
                  fontSize: 11,
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  opacity: 0.6,
                }}
              >
                {l}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroA, HeroB, Nav, Wordmark, CTAButton });