// landing.jsx — Landing page with 4 switchable hero directions
const { useState: useStateL } = React;

/* A reusable "product" glass frame that embeds the real dashboard, scaled down */
function ProductFrame({ id, label, tall = false, glow = true }) {
  const DashPrev = window.DashboardPreview;
  return (
    <div className="glass-strong" style={{
      borderRadius: "var(--radius)", padding: 10, position: "relative",
      boxShadow: glow ? "var(--shadow-float), 0 0 80px -30px var(--accent-glow)" : "var(--shadow-float)",
    }}>
      <div style={{ display: "flex", gap: 6, padding: "6px 8px 12px" }}>
        {["#ff5f57", "#febc2e", "#28c840"].map(c => <span key={c} style={{ width: 11, height: 11, borderRadius: "50%", background: c, opacity: 0.85 }} />)}
        <span className="cap" style={{ marginLeft: 10, fontSize: 11.5 }}>dashboard.kvb.gg</span>
      </div>
      <div style={{ borderRadius: 14, overflow: "hidden" }}>
        {DashPrev ? <DashPrev designW={1240} designH={tall ? 760 : 700} /> : null}
      </div>
    </div>
  );
}

function HeroChips() {
  return (
    <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
      <div className="chip"><span className="dot" /> 5,000+ concurrent viewers</div>
      <div className="chip"><Icon name="bolt" size={14} /> Live in under 35s</div>
      <div className="chip"><Icon name="lock" size={14} /> AES-256 secured</div>
    </div>
  );
}

/* ---------- Direction 1: Centered, classic Apple keynote ---------- */
function HeroCentered({ onNav }) {
  return (
    <div className="wrap" style={{ paddingTop: 150, textAlign: "center" }}>
      <Reveal><span style={{
        display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 20px", borderRadius: 999,
        border: "1px solid color-mix(in oklch, var(--accent) 45%, transparent)",
        background: "color-mix(in oklch, var(--accent) 8%, transparent)",
        boxShadow: "0 0 24px -6px var(--accent-glow), inset 0 1px 0 color-mix(in oklch, white 14%, transparent)",
        fontSize: 14, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.01em",
      }}><span className="dot" /> Boost Your Kick Stream Instantly</span></Reveal>
      <Reveal delay={0.06}><h1 className="h-display" style={{ margin: "26px auto 0", maxWidth: 980, color: "var(--ink)" }}>
        #1 Kick Viewbot<br />on the Market
      </h1></Reveal>
      <Reveal delay={0.12}><p className="body-lg" style={{ maxWidth: 560, margin: "22px auto 0" }}>
        Get 5,000+ Instant Viewers, Instantly. No Proxies. No Fuss.
      </p></Reveal>
      <Reveal delay={0.18}><div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 30 }}>
        <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Get Started Now <Icon name="arrow" size={17} /></button>
        <button className="btn btn-ghost btn-lg" onClick={() => onNav("dashboard")}><Icon name="play" size={15} fill /> See the dashboard</button>
      </div></Reveal>
      <Reveal delay={0.26} style={{ marginTop: 56, maxWidth: 880, marginLeft: "auto", marginRight: "auto" }}>
        <ProductFrame id="hero-centered" label="Drop your dashboard screenshot" tall />
      </Reveal>
    </div>
  );
}

/* ---------- Direction 2: Split — copy left, product right ---------- */
function HeroSplit({ onNav }) {
  return (
    <div className="wrap" style={{ paddingTop: 150 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 50, alignItems: "center" }} className="hero-split">
        <div>
          <Reveal><HeroChips /></Reveal>
          <Reveal delay={0.06}><h1 className="h-display" style={{ margin: "22px 0 0", fontSize: "clamp(40px,5.6vw,76px)" }}>
            Grow your stream <span className="gradient-text">on demand.</span>
          </h1></Reveal>
          <Reveal delay={0.12}><p className="body-lg" style={{ maxWidth: 460, marginTop: 20 }}>
            One clean dashboard. Account generators, proxy checkers, chatbots and a follow bot — plus the fastest viewer engine in the game.
          </p></Reveal>
          <Reveal delay={0.18}><div style={{ display: "flex", gap: 12, marginTop: 28 }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Start free <Icon name="arrow" size={17} /></button>
            <button className="btn btn-ghost btn-lg" onClick={() => onNav("dashboard")}>Live demo</button>
          </div></Reveal>
        </div>
        <Reveal delay={0.16}><ProductFrame id="hero-split" label="Drop your dashboard screenshot" tall /></Reveal>
      </div>
      <style>{`@media (max-width: 880px){ .hero-split{ grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

/* ---------- Direction 3: Full-bleed product with floating overlay ---------- */
function HeroFullbleed({ onNav }) {
  return (
    <div className="wrap" style={{ paddingTop: 132 }}>
      <Reveal style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
        <image-slot id="hero-full" style={{ display: "block", width: "100%", height: 620 }} shape="rounded" radius="30"
          placeholder="Drop a full-bleed product / hero image"></image-slot>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, color-mix(in oklch, var(--bg-0) 30%, transparent) 0%, transparent 30%, color-mix(in oklch, var(--bg-0) 78%, transparent) 100%)" }} />
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "clamp(26px,4vw,48px)" }}>
          <div className="glass-strong" style={{ borderRadius: "var(--radius)", padding: "clamp(24px,3vw,40px)", maxWidth: 640 }}>
            <HeroChips />
            <h1 className="h-display" style={{ margin: "18px 0 14px", fontSize: "clamp(36px,5vw,68px)" }}>
              The viewer engine,<br /><span className="gradient-text">reimagined.</span>
            </h1>
            <p className="body-lg" style={{ maxWidth: 480, marginBottom: 24 }}>
              5,000 concurrent viewers, 0% CPU, undetectable routing. Everything KVB 3.0 promised — shipping now.
            </p>
            <div style={{ display: "flex", gap: 12 }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Get KVB <Icon name="arrow" size={17} /></button>
              <button className="btn btn-ghost btn-lg" onClick={() => onNav("dashboard")}>Explore</button>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  );
}

/* ---------- Direction 4: Editorial — oversized asymmetric type ---------- */
function HeroEditorial({ onNav }) {
  return (
    <div className="wrap" style={{ paddingTop: 150 }}>
      <Reveal><div className="eyebrow">KVB 2.0 · the rebuild</div></Reveal>
      <Reveal delay={0.06}><h1 style={{ fontSize: "clamp(56px,12vw,168px)", fontWeight: 720, letterSpacing: "-0.05em", lineHeight: 0.86, margin: "18px 0 0" }}>
        VIEWERS<br /><span className="gradient-text">ON&nbsp;TAP.</span>
      </h1></Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, marginTop: 36, alignItems: "end" }} className="hero-ed">
        <Reveal delay={0.14}><p className="body-lg" style={{ maxWidth: 420, fontSize: 20 }}>
          1,000+ real viewers in seconds. 5,000 concurrent. Zero CPU. The most complete creator toolkit, wrapped in the cleanest dashboard you've ever used.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
          <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Get KVB <Icon name="arrow" size={17} /></button>
          <button className="btn btn-ghost btn-lg" onClick={() => onNav("dashboard")}>Dashboard</button>
        </div></Reveal>
        <Reveal delay={0.2}><ProductFrame id="hero-ed" label="Drop your dashboard screenshot" /></Reveal>
      </div>
      <style>{`@media (max-width: 880px){ .hero-ed{ grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

const HEROES = { centered: HeroCentered, split: HeroSplit, fullbleed: HeroFullbleed, editorial: HeroEditorial };

/* ---------- Final CTA band ---------- */
function FinalCTA({ onNav }) {
  return (
    <section className="section" style={{ padding: "40px 0 10px" }}>
      <div className="wrap">
        <Reveal className="glass-strong" style={{
          borderRadius: "var(--radius-lg)", padding: "clamp(40px,6vw,80px)", textAlign: "center", position: "relative", overflow: "hidden",
        }}>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 120% at 50% 0%, var(--accent-glow), transparent 60%)", opacity: 0.5 }} />
          <div style={{ position: "relative" }}>
            <h2 className="h-display" style={{ fontSize: "clamp(36px,5vw,64px)", margin: "0 0 16px" }}>Get started today, for free!</h2>
            <p className="body-lg" style={{ maxWidth: 520, margin: "0 auto 32px" }}>Join thousands of streamers growing faster with AI-powered tools, instant viewbots, and server-sided safety.</p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Get Started Now <Icon name="arrow" size={17} /></button>
              <button className="btn btn-ghost btn-lg" onClick={() => onNav("signup")}><Icon name="headset" size={16} /> Live Chat Support</button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Landing({ direction, onNav }) {
  const Hero = HEROES[direction] || HeroCentered;
  return (
    <div style={{ position: "relative", zIndex: 1 }}>
      <Hero onNav={onNav} />
      <Bento />
      <Expect />
      <Performance />
      <Pricing onPick={() => onNav("signup")} />
      <FAQ />
      <FinalCTA onNav={onNav} />
    </div>
  );
}

Object.assign(window, { Landing });