/* eslint-disable */
/* Eight v2 — IA restructured on the v1 chassis. */

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

/* ============ TWEAKS DEFAULTS ============ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ffffff",
  "mode": "dark",
  "density": "comfortable",
  "showEditorialSerif": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#ffffff", "#FF0080", "#0070F3", "#50E3C2"];

/* ============ BRAND SVGs (for the trending tiles) ============ */

const BrandSVGs = {
  whatsapp: (
    <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M16 3.5C9.1 3.5 3.5 9.1 3.5 16c0 2.2.6 4.3 1.6 6.1L3.5 28.5l6.6-1.6a12.4 12.4 0 005.9 1.6c6.9 0 12.5-5.6 12.5-12.5S22.9 3.5 16 3.5zm0 22.6c-1.9 0-3.7-.5-5.2-1.4l-.4-.2-3.9 1 1-3.8-.2-.4c-1-1.6-1.6-3.4-1.6-5.3 0-5.6 4.6-10.2 10.3-10.2S26.2 10.4 26.2 16 21.6 26.1 16 26.1zm5.6-7.6c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.6 0-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-1-2.2-.2-.5-.5-.4-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5s1.1 2.9 1.3 3.1c.2.2 2.2 3.4 5.4 4.7.7.3 1.3.5 1.8.6.7.2 1.4.2 2 .1.6-.1 1.8-.7 2.1-1.5.3-.7.3-1.4.2-1.5-.1-.1-.3-.2-.6-.4z"/>
    </svg>
  ),
  chatgpt: (
    <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M28.5 13.3a7.5 7.5 0 00-.6-6 7.6 7.6 0 00-8.1-3.6 7.6 7.6 0 00-12.8 2.7 7.5 7.5 0 00-5 3.6 7.5 7.5 0 00.9 8.7 7.5 7.5 0 00.6 6 7.6 7.6 0 008.1 3.6 7.6 7.6 0 0012.8-2.7 7.5 7.5 0 005-3.6 7.5 7.5 0 00-.9-8.7zM18 28.6a5.6 5.6 0 01-3.6-1.3l.2-.1 6-3.4c.3-.2.5-.5.5-.8v-8.4l2.5 1.5v6.8c0 3.2-2.5 5.7-5.6 5.7zM5.9 23.5a5.6 5.6 0 01-.7-3.8l.2.1 6 3.4c.3.2.6.2.9 0l7.3-4.2v2.9l-6.1 3.5a5.7 5.7 0 01-7.6-2zm-1.6-13a5.6 5.6 0 012.9-2.4l-.1.2v6.9c0 .3.2.6.5.8l7.3 4.2-2.5 1.4-6.1-3.5a5.7 5.7 0 01-2-7.6zm20.8 4.8L17.8 11l2.5-1.4 6.1 3.5a5.7 5.7 0 01-.9 10.3v-7.1c0-.3-.1-.6-.4-.8zm2.5-3.8l-.2-.1-6-3.5a1 1 0 00-1 0L13.2 12V9l6.1-3.5a5.7 5.7 0 018.3 5.9zM11.8 16.4l-2.5-1.5V8.1a5.7 5.7 0 019.3-4.4l-.2.1-6 3.4c-.3.2-.5.5-.5.8zm1.4-3l3.3-1.9 3.2 1.9V17l-3.2 1.9-3.3-1.9z"/>
    </svg>
  ),
  instagram: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
      <rect x="5" y="5" width="22" height="22" rx="6"/>
      <circle cx="16" cy="16" r="5"/>
      <circle cx="22.5" cy="9.5" r="1.2" fill="currentColor"/>
    </svg>
  ),
  openai: (
    <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M28.5 13.3a7.5 7.5 0 00-.6-6 7.6 7.6 0 00-8.1-3.6 7.6 7.6 0 00-12.8 2.7 7.5 7.5 0 00-5 3.6 7.5 7.5 0 00.9 8.7 7.5 7.5 0 00.6 6 7.6 7.6 0 008.1 3.6 7.6 7.6 0 0012.8-2.7 7.5 7.5 0 005-3.6 7.5 7.5 0 00-.9-8.7zM18 28.6a5.6 5.6 0 01-3.6-1.3l.2-.1 6-3.4c.3-.2.5-.5.5-.8v-8.4l2.5 1.5v6.8c0 3.2-2.5 5.7-5.6 5.7zM5.9 23.5a5.6 5.6 0 01-.7-3.8l.2.1 6 3.4c.3.2.6.2.9 0l7.3-4.2v2.9l-6.1 3.5a5.7 5.7 0 01-7.6-2z"/>
    </svg>
  ),
  valorant: (
    <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M4 5l9 24h2L25 11l-3-1-7 14L7 6z"/>
    </svg>
  ),
  shopee: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 10h16l-1.5 16a2 2 0 01-2 1.8H11.5a2 2 0 01-2-1.8z"/>
      <path d="M12 10V8a4 4 0 018 0v2"/>
    </svg>
  ),
  phone: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
      <path d="M27 23v3a2 2 0 01-2.2 2A24 24 0 011 5.2 2 2 0 013 3h3a2 2 0 012 1.7c.2 1 .4 1.9.7 2.8a2 2 0 01-.5 2L7 11.4a18 18 0 008 8L16.6 18a2 2 0 012-.5c.9.3 1.8.5 2.8.7A2 2 0 0123 20z"/>
    </svg>
  ),
  email: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
      <rect x="4" y="7" width="24" height="18" rx="2"/>
      <path d="M4 10l12 9 12-9"/>
    </svg>
  ),
};

const TRENDING_QUERIES = ["whatsapp", "chatgpt", "instagram", "phone", "email", "openai"];
const TRENDING_BRANDS = [
  { key: "wa",     name: "whatsapp", svg: BrandSVGs.whatsapp },
  { key: "gpt",    name: "chatgpt",  svg: BrandSVGs.chatgpt },
  { key: "insta",  name: "instagram", svg: BrandSVGs.instagram },
  { key: "oai",    name: "openai",   svg: BrandSVGs.openai },
  { key: "valo",   name: "valorant", svg: BrandSVGs.valorant },
  { key: "shopee", name: "shopee",   svg: BrandSVGs.shopee },
  { key: "phone",  name: "phone",    svg: BrandSVGs.phone },
  { key: "email",  name: "email",    svg: BrandSVGs.email },
];

/* ============ small helpers ============ */
const Wordmark = () => (
  <a className="brand" href="index.html">
    <svg className="mark-svg" viewBox="0 0 22 22" aria-hidden="true">
      <defs>
        <linearGradient id="gm8" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#fff"/>
          <stop offset="1" stopColor="#aaa"/>
        </linearGradient>
      </defs>
      <path d="M11 1.5 L20.5 11 L11 20.5 L1.5 11 Z" fill="url(#gm8)"/>
    </svg>
    <span>eight<span className="domain">.design</span></span>
    <span className="version-pill">v2</span>
  </a>
);

const ArrowR = ({ size = 11, sw = 2.5 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw}>
    <path d="M5 12h14M13 5l7 7-7 7"/>
  </svg>
);

/* ============ TOP NAV ============ */
function TopNav() {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <Wordmark/>
        <nav className="nav-links" aria-label="Primary">
          <a href="#browse">Icons</a>
          <a href="#illustrations">Illustrations</a>
          <a href="#studio" className="is-active">AI Studio</a>
          <a href="#pricing">Pricing</a>
        </nav>
        <div className="top-actions">
          <button className="nav-search-btn" onClick={()=>document.getElementById('hero-search')?.focus()}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
            </svg>
            <span>Search assets &amp; generate</span>
            <span className="kbd">⌘K</span>
          </button>
          <a className="btn btn-ghost" href="#">Sign in</a>
          <a className="btn btn-primary" href="#">
            Get plus
            <ArrowR/>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ============ Version Strip (small, just below nav) ============ */
function VersionStrip() {
  return (
    <div className="version-strip">
      <div className="version-strip-inner">
        <span className="label">Versions</span>
        <div className="vs-row">
          <a className="vs-pill" href="Eight v1.html">v1</a>
          <span className="vs-pill is-current"><span className="dot"></span>v2 — current</span>
          <span className="vs-pill is-draft">v3</span>
        </div>
        <div className="vs-strip-r">
          <a href="References.html">references brief →</a>
          <a href="index.html">all versions →</a>
        </div>
      </div>
    </div>
  );
}

/* ============ HERO ============ */
function Hero({ t }) {
  const [tab, setTab] = useState("find"); // find | generate
  const [q, setQ] = useState("");
  const [styleIdx, setStyleIdx] = useState(0);

  const featStyles = [
    { name: "Outline",  cls: "" },
    { name: "Filled",   cls: "filled" },
    { name: "Accent",   cls: "accent" },
    { name: "3D",       cls: "three-d" },
    { name: "Hand",     cls: "hand" },
    { name: "Glyph",    cls: "" },
  ];

  return (
    <section className="hero">
      <div className="hero-grid-bg" aria-hidden="true"></div>
      <div className="hero-glow" aria-hidden="true"></div>

      <div className="hero-inner">
        {/* LEFT */}
        <div>
          <div className="hero-eyebrow">
            <span className="pulse"></span>
            <span>Formerly Icons8 — now eight.design</span>
          </div>

          <h1 className="hero-h1">
            Icons, illustrations,<br/>
            and AI generation.{" "}
            {t.showEditorialSerif
              ? <span className="serif">One subscription.</span>
              : <span className="grad">One subscription.</span>}
          </h1>

          <p className="hero-deck">
            The design library you've used since 2009 — 12.8M assets across icons,
            illustrations and photos — now bundled with an AI Studio that runs every
            major image, video and audio model on one credit pool.
          </p>

          {/* tabs */}
          <div className="hero-tabs" role="tablist">
            <button
              role="tab" aria-selected={tab==='find'}
              className={`hero-tab ${tab==='find' ? 'is-on' : ''}`}
              onClick={()=>setTab('find')}>
              <span className="dot"></span>Find
            </button>
            <button
              role="tab" aria-selected={tab==='generate'}
              className={`hero-tab ${tab==='generate' ? 'is-on' : ''}`}
              onClick={()=>setTab('generate')}>
              <span className="dot"></span>Generate
            </button>
          </div>

          <form className="hero-search" onSubmit={e=>e.preventDefault()}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              {tab === 'find'
                ? <><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>
                : <><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/></>
              }
            </svg>
            <input
              id="hero-search"
              value={q} onChange={e=>setQ(e.target.value)}
              placeholder={tab === 'find'
                ? "Search 12.8M assets — icons, illustrations, photos…"
                : "Describe an image, video, or sound to generate…"}
              autoComplete="off"
            />
            <span className="scope-pill">
              {tab === 'find' ? "all assets" : <>image · video · audio</>}
            </span>
            <button type="submit" className="hero-search-go">
              {tab === 'find' ? 'Search' : 'Generate'} <ArrowR/>
            </button>
          </form>

          {/* trending */}
          <div className="hero-trending">
            <span className="t-label">Trending</span>
            {TRENDING_QUERIES.map(w => (
              <button key={w} className="trend-chip" onClick={()=>setQ(w)}>{w}</button>
            ))}
          </div>
        </div>

        {/* RIGHT — featured pack sidebar */}
        <div className="hero-feat">
          <div className="feat-frame">
            <div className="feat-head">
              <span>Featured pack · 03/08</span>
              <span className="new">new</span>
            </div>
            <div className="feat-icon">
              <div className="feat-bg-grid"></div>
              <div className="feat-icon-svg">
                <svg viewBox="0 0 24 24" fill={featStyles[styleIdx].cls === 'filled' ? 'currentColor' : 'none'}
                     stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="9"/>
                  <path d="M16 8l-2 6-6 2 2-6z"/>
                </svg>
              </div>
            </div>

            <div className="feat-styles">
              {featStyles.map((s, i) => (
                <button key={s.name} className={`feat-style ${i===styleIdx ? 'is-on' : ''}`}
                        onClick={()=>setStyleIdx(i)}>
                  <span className={`thumb ${s.cls}`}>
                    <svg viewBox="0 0 24 24" fill={s.cls === 'filled' ? 'currentColor' : 'none'}
                         stroke="currentColor" strokeWidth="1.4">
                      <circle cx="12" cy="12" r="9"/>
                      <path d="M16 8l-2 6-6 2 2-6z"/>
                    </svg>
                  </span>
                  <span>{s.name}</span>
                </button>
              ))}
            </div>

            <div className="feat-foot">
              <span className="feat-foot-l">
                <span className="fmt">SVG</span>
                <span className="fmt">PNG</span>
                <span className="fmt">React</span>
                <span className="fmt">Figma</span>
              </span>
              <button className="feat-foot-cta">
                Copy SVG
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="8" y="8" width="13" height="13" rx="2"/>
                  <path d="M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ AI STUDIO ============ */
function Studio({ t }) {
  const models = {
    image: [
      { name: "Flux",        cls: "bg-gradient-to-br", bg: "#000" },
      { name: "GPT Image",   bg: "#10A37F" },
      { name: "Seedream",    bg: "#FF4D5C" },
      { name: "Imagen",      bg: "#4285F4" },
      { name: "Nano Banana", bg: "#FACC15" },
    ],
    video: [
      { name: "Veo",     bg: "#4285F4" },
      { name: "Kling",   bg: "#7C3AED" },
      { name: "Sora",    bg: "#000" },
      { name: "Pika",    bg: "#EC4899" },
      { name: "Hailuo",  bg: "#0EA5E9" },
    ],
    audio: [
      { name: "Suno",         bg: "#1A1A1A" },
      { name: "ElevenLabs",   bg: "#000" },
      { name: "Stable Audio", bg: "#7C3AED" },
    ],
  };

  // build a waveform (deterministic-ish, but varied)
  const wave = useMemo(
    () => Array.from({ length: 40 }, (_, i) => 20 + Math.abs(Math.sin(i * 0.7) * 60) + Math.abs(Math.cos(i * 1.3) * 20)),
    []
  );

  return (
    <section className="studio" id="studio">
      <div className="studio-inner">
        <div className="studio-head">
          <div>
            <div className="section-kicker"><span className="num">01</span> ai studio</div>
            <h2 className="studio-h2">
              Every major model.{" "}
              {t.showEditorialSerif
                ? <span className="serif">One prompt.</span>
                : <span style={{color: 'var(--muted)'}}>One prompt.</span>}
            </h2>
            <p className="studio-deck">
              Image, video and audio generation in one place. One credit pool, one
              subscription, one prompt history — across every frontier model.
            </p>
          </div>
          <div className="studio-cta">
            <a className="btn btn-primary" href="#">Try free <ArrowR/></a>
            <a className="btn btn-outline" href="#pricing">See plans</a>
          </div>
        </div>

        {/* DEMO STRIP */}
        <div className="studio-demo">
          <div className="demo-prompt">
            <span className="demo-prompt-label">One prompt</span>
            <div className="demo-prompt-box">
              <div className="demo-prompt-text">
                A red panda barista pouring latte art at sunrise, cinematic, slow zoom.
              </div>
              <div className="demo-prompt-meta">
                <span className="demo-prompt-dot"></span>
                <span className="small">routed → image · video · audio</span>
              </div>
            </div>
          </div>

          <div className="demo-outputs">
            <div className="demo-out img">
              <div className="label">
                <span>Image</span>
                <span className="badge">Flux 1.1</span>
              </div>
              <div className="demo-out-preview"></div>
              <div className="meta">2048 × 2048 · 4s</div>
            </div>

            <div className="demo-out vid">
              <div className="label">
                <span>Video</span>
                <span className="badge">Veo 3</span>
              </div>
              <div className="demo-out-preview">
                <div className="play">▶</div>
              </div>
              <div className="meta">1080p · 8s · 22s</div>
            </div>

            <div className="demo-out aud">
              <div className="label">
                <span>Audio</span>
                <span className="badge">Suno 5</span>
              </div>
              <div className="demo-out-preview">
                <div className="wave">
                  {wave.map((h, i) => (
                    <span key={i} style={{ height: `${h}%`, opacity: 0.3 + (h/100)*0.7 }}/>
                  ))}
                </div>
              </div>
              <div className="meta">stereo · 32s · 18s</div>
            </div>
          </div>
        </div>

        {/* model logos by group */}
        <div className="studio-models">
          {Object.entries(models).map(([group, list]) => (
            <div key={group} className="model-group">
              <h4>{group}</h4>
              <div className="model-row">
                {list.map(m => (
                  <span key={m.name} className="model-chip">
                    <span className="mark" style={{ background: m.bg }}>{m.name[0]}</span>
                    {m.name}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ BROWSE (Icons + Illustrations) ============ */
function Browse({ t }) {
  return (
    <section className="section" id="browse">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="section-kicker"><span className="num">02</span> browse</div>
            <h2 className="section-h2">
              The legacy library, faster.{" "}
              {t.showEditorialSerif && <span className="serif">Still humming.</span>}
            </h2>
          </div>
          <a className="section-foot-link" href="#">
            Open the full catalog <ArrowR sw="2"/>
          </a>
        </div>

        <div className="browse-inner">

          {/* ICONS column */}
          <article className="browse-card" id="icons">
            <div className="head">
              <span className="kicker">Icons</span>
              <span className="stat">12.8M · 30+ styles</span>
            </div>
            <h3>12.8M icons in 30+ styles.</h3>
            <p>Outline, filled, color, 3D, hand-drawn, fluency, isometric, glyph, doodle — same name, every style.</p>

            <div className="brand-row" role="list" aria-label="Trending icon searches">
              {TRENDING_BRANDS.map(b => (
                <a key={b.key} className={`brand-tile ${b.key}`} href="#" aria-label={b.name}>
                  {b.svg}
                  <span className="label">{b.name}</span>
                </a>
              ))}
            </div>

            <div className="row-foot">
              <a href="#">All icon styles →</a>
              <a href="#">Browse trending →</a>
            </div>
          </article>

          {/* ILLUSTRATIONS column */}
          <article className="browse-card" id="illustrations">
            <div className="head">
              <span className="kicker">Illustrations</span>
              <span className="stat">340K · 5 styles</span>
            </div>
            <h3>Hand-drawn and AI-generated illustrations.</h3>
            <p>Scenes, characters, mascots — original, royalty-free, drop-in for hero sections, decks and onboarding.</p>

            <div className="ill-preview" aria-hidden="true">
              <span className="ill-thumb t1"></span>
              <span className="ill-thumb t2"></span>
              <span className="ill-thumb t3"></span>
            </div>

            <div className="style-chips">
              <span className="style-chip s-3d"><span className="swatch"/>3D</span>
              <span className="style-chip s-trend"><span className="swatch"/>Trendy</span>
              <span className="style-chip s-edu"><span className="swatch"/>Education</span>
              <span className="style-chip s-biz"><span className="swatch"/>Business</span>
              <span className="style-chip s-hand"><span className="swatch"/>Hand-drawn</span>
            </div>

            <div className="row-foot">
              <a href="#">Browse illustrations →</a>
              <a href="#studio">Generate from prompt →</a>
            </div>
          </article>

        </div>
      </div>
    </section>
  );
}

/* ============ FEATURED PRODUCTS (3) ============ */
function Products({ t }) {
  return (
    <section className="section" id="products">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="section-kicker"><span className="num">03</span> apps</div>
            <h2 className="section-h2">
              Built on the library.{" "}
              {t.showEditorialSerif && <span className="serif">Three that stuck.</span>}
            </h2>
          </div>
          <a className="section-foot-link" href="#">See all apps <ArrowR sw="2"/></a>
        </div>

        <div className="products-grid">

          <article className="prod-card">
            <div className="head">
              <span className="kicker">01 · Mega Creator</span>
              <span className="badge">Browser</span>
            </div>
            <h3>Compose scenes from the library.</h3>
            <p>Drag illustrations, icons and photos onto a canvas. Export to PNG, SVG or Figma in 90 seconds.</p>
            <div className="art art-mega" aria-hidden="true">
              <span className="blob1"></span>
              <span className="blob2"></span>
              <span></span>
              <span></span>
              <span className="blob3"></span>
            </div>
            <footer>
              <span>free</span>
              <span className="arrow">Launch →</span>
            </footer>
          </article>

          <article className="prod-card">
            <div className="head">
              <span className="kicker">02 · Lunacy</span>
              <span className="badge">macOS · Windows · Linux</span>
            </div>
            <h3>The free design app with the library built in.</h3>
            <p>Open .sketch and .fig files, design anywhere, drag any of 12.8M assets straight onto the canvas.</p>
            <div className="art art-lunacy" aria-hidden="true">
              <div className="lunacy-canvas">
                <div className="lc-bar"><i></i><i></i><i></i></div>
                <div className="lc-content">
                  <div className="lc-rect"></div>
                  <div className="lc-circle"></div>
                </div>
              </div>
            </div>
            <footer>
              <span>free forever</span>
              <span className="arrow">Download →</span>
            </footer>
          </article>

          <article className="prod-card">
            <div className="head">
              <span className="kicker">03 · GenYOU</span>
              <span className="badge">AI · new</span>
            </div>
            <h3>Your own avatar, in every style.</h3>
            <p>Train a personal model on a few selfies — get on-brand portraits across illustration, 3D and photographic styles.</p>
            <div className="art art-genyou" aria-hidden="true">
              <span className="g1"></span><span className="g2"></span><span className="g3"></span>
              <span className="g4"></span><span className="g5"></span><span className="g6"></span>
            </div>
            <footer>
              <span>500 credits / month</span>
              <span className="arrow">Try GenYOU →</span>
            </footer>
          </article>

        </div>
      </div>
    </section>
  );
}

/* ============ PRICING ============ */
function Pricing({ t }) {
  return (
    <section className="section" id="pricing">
      <div className="pricing-inner">
        <div className="pricing-head">
          <div className="section-kicker"><span className="num">04</span> pricing</div>
          <h2>
            One subscription.{" "}
            {t.showEditorialSerif && <span className="serif">Everything inside.</span>}
          </h2>
          <p>
            No watermarks, no per-asset fees, no separate licensing for AI generations.
            Credits roll over for 30 days.
          </p>
        </div>

        <div className="pricing-grid">

          {/* AI tools — entry */}
          <div className="tier">
            <div className="h">
              <span className="name">AI tools</span>
              <span className="badge">entry</span>
            </div>
            <div className="price"><span className="n">$6.50</span><span className="per">/mo</span></div>
            <div className="credits"><b>10,000</b> credits / month</div>
            <ul>
              <li>Image, video &amp; audio generation</li>
              <li>All frontier models · one prompt</li>
              <li>Smart Upscaler · BG Remover · Face Swap</li>
              <li>Personal commercial license</li>
            </ul>
            <a className="cta" href="#">Subscribe</a>
          </div>

          {/* AI + Graphics — featured */}
          <div className="tier is-featured">
            <div className="h">
              <span className="name">AI + Graphics</span>
              <span className="badge">most popular</span>
            </div>
            <div className="price"><span className="n">$24</span><span className="per">/mo</span></div>
            <div className="credits"><b>100,000</b> credits / month</div>
            <ul>
              <li>Everything in AI tools</li>
              <li>Full icon library — 12.8M assets, 30+ styles</li>
              <li>Illustrations &amp; photos library</li>
              <li>Pichon desktop &amp; Lunacy Pro</li>
              <li>Team commercial license</li>
            </ul>
            <a className="cta" href="#">Subscribe <ArrowR/></a>
          </div>

          {/* Unlimited */}
          <div className="tier">
            <div className="h">
              <span className="name">Unlimited</span>
              <span className="badge">studio</span>
            </div>
            <div className="price"><span className="n">$199</span><span className="per">/mo</span></div>
            <div className="credits"><b>1,000,000</b> credits / month</div>
            <ul>
              <li>Everything in AI + Graphics</li>
              <li>Bulk generation queue · API access</li>
              <li>Custom model training (GenYOU)</li>
              <li>Priority support · 99.9% SLA</li>
            </ul>
            <a className="cta" href="#">Subscribe</a>
          </div>

        </div>

        <div className="pricing-foot">
          <a href="#">See all plans &amp; team pricing →</a>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  const SOC = {
    x: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 3h3l-7 8 8 10h-7l-5-7-6 7H1l8-9L1 3h7l5 6z"/></svg>,
    li: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h4v16H4zM6 2.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM10 8h4v2c1-1 2-2 4-2 3 0 5 2 5 5v7h-4v-6c0-2-1-3-2.5-3S14 12 14 14v6h-4z"/></svg>,
    gh: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 00-3 19.5c.5.1.7-.2.7-.5v-1.8c-2.8.6-3.4-1.3-3.4-1.3-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1 2.9.8.1-.6.4-1 .6-1.3-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.6 0 0 .8-.3 2.7 1A9 9 0 0112 6c.8 0 1.7.1 2.5.3 1.9-1.3 2.7-1 2.7-1 .5 1.3.2 2.3.1 2.6.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0012 2z"/></svg>,
    yt: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 7.5a3 3 0 00-2-2C18 5 12 5 12 5s-6 0-8 .5a3 3 0 00-2 2C2 9.5 2 12 2 12s0 2.5.5 4.5a3 3 0 002 2C6 19 12 19 12 19s6 0 8-.5a3 3 0 002-2C22 14.5 22 12 22 12s0-2.5-.5-4.5zM10 15V9l5 3z"/></svg>,
  };
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <Wordmark/>
          <p className="tag">
            The design library you've used since 2009 — now with an AI Studio attached.
            Drawn in Bratislava, Vinnytsia &amp; Bogotá.
          </p>
          <span className="foot-status">
            <span className="ok"></span>
            All systems operational · 280 POPs
          </span>
        </div>

        <div className="foot-col">
          <div className="h">Design assets</div>
          <a href="#">Icons</a><a href="#">Illustrations</a><a href="#">Photos</a><a href="#">Music</a><a href="#">Packs</a>
        </div>
        <div className="foot-col">
          <div className="h">AI Studio</div>
          <a href="#">Image generation</a><a href="#">Video generation</a><a href="#">Audio generation</a><a href="#">GenYOU</a><a href="#">Smart Upscaler</a><a href="#">BG Remover</a>
        </div>
        <div className="foot-col">
          <div className="h">Apps</div>
          <a href="#">Lunacy</a><a href="#">Pichon</a><a href="#">Mega Creator</a>
          <div className="h" style={{marginTop: '16px'}}>Developers</div>
          <a href="#">API</a><a href="#">MCP server</a><a href="#">OMG-Img</a><a href="#">Line Awesome</a>
        </div>
        <div className="foot-col">
          <div className="h">Company</div>
          <a href="#">About</a><a href="#">Careers</a><a href="#">Press kit</a><a href="#">Contact</a>
          <div className="h" style={{marginTop: '16px'}}>Community</div>
          <a href="#">Newsletter</a><a href="#">Tutorials</a><a href="#">Discord</a>
        </div>
        <div className="foot-col">
          <div className="h">Support</div>
          <a href="#">Help center</a><a href="#">License</a><a href="#">Status</a><a href="#">Refunds</a>
          <div className="foot-social">
            <a aria-label="X">{SOC.x}</a>
            <a aria-label="LinkedIn">{SOC.li}</a>
            <a aria-label="GitHub">{SOC.gh}</a>
            <a aria-label="YouTube">{SOC.yt}</a>
          </div>
        </div>
      </div>
      <div className="foot-bar">
        <span>© Eight 2009 — 2026 · eight.design · formerly Icons8</span>
        <div className="right">
          <a href="#">Terms</a><a href="#">Privacy</a><a href="#">Licenses</a><a href="#">DPA</a>
          <a href="index.html">All versions →</a>
        </div>
      </div>
    </footer>
  );
}

/* ============ TWEAKS PANEL ============ */
function MyTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Look">
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={v=>setTweak('accent', v)}
        />
        <TweakRadio
          label="Mode"
          value={t.mode}
          options={[{value:'dark',label:'Dark'},{value:'light',label:'Light'}]}
          onChange={v=>setTweak('mode', v)}
        />
      </TweakSection>
      <TweakSection title="Type">
        <TweakToggle
          label="Italic serif flourish"
          value={t.showEditorialSerif}
          onChange={v=>setTweak('showEditorialSerif', v)}
        />
      </TweakSection>
      <TweakSection title="Grid">
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: 'comfortable', label: 'Comfy' },
            { value: 'dense',       label: 'Dense' },
          ]}
          onChange={v=>setTweak('density', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ============ ROOT ============ */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.setAttribute('data-mode', t.mode);
    root.setAttribute('data-density', t.density);
  }, [t.accent, t.mode, t.density]);

  return (
    <>
      <TopNav/>
      <VersionStrip/>
      <Hero t={t}/>
      <Studio t={t}/>
      <Browse t={t}/>
      <Products t={t}/>
      <Pricing t={t}/>
      <Footer/>
      <MyTweaks t={t} setTweak={setTweak}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);