/* eslint-disable */
/* Icons8 homepage — hybrid A+B: dev-tool chrome + editorial hero */

const { useState, useMemo, useEffect, useRef } = React;
const ICONS = window.ICONS;

/* ---------- defaults that the host can persist ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FACC15",
  "mode": "light",
  "density": "comfortable",
  "heroVariant": "editorial",
  "showEditorialSerif": true,
  "headline": "Every icon you'll ever need,\nand the ones you haven't drawn yet."
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ["#FACC15", "#0a0a0a"], // signature yellow
  ["#5E6AD2", "#ffffff"], // indigo
  ["#FF5436", "#ffffff"], // tomato
  ["#0FB57E", "#ffffff"], // emerald
];

/* ============ small bits ============ */

const Wordmark = ({ tone = "#0a0a0a" }) => (
  <span className="wordmark" style={{ color: tone }}>
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
      <rect x="2" y="2" width="9" height="9" rx="2" fill={tone}/>
      <rect x="13" y="2" width="9" height="9" rx="4.5" fill={tone}/>
      <rect x="2" y="13" width="9" height="9" rx="4.5" fill={tone}/>
      <rect x="13" y="13" width="9" height="9" rx="2" fill={tone}/>
    </svg>
    <span>icons<span style={{ fontFeatureSettings: '"ss01"' }}>8</span></span>
  </span>
);

const KeyHint = ({ k = "⌘K" }) => <kbd className="kbd">{k}</kbd>;

/* ============ TOP NAV ============ */

function TopNav({ t, setTweak }) {
  const [open, setOpen] = useState(null);
  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-brand">
          <Wordmark tone="var(--ink)"/>
        </a>

        <nav className="nav-links" onMouseLeave={() => setOpen(null)}>
          <button className={`nav-link ${open==='products'?'is-open':''}`} onMouseEnter={()=>setOpen('products')}>
            Products <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <a className="nav-link" href="#packs">Packs</a>
          <a className="nav-link" href="#styles">Styles</a>
          <a className="nav-link" href="#ai">AI</a>
          <a className="nav-link" href="#plugins">Plugins</a>
          <a className="nav-link" href="#pricing">Pricing</a>

          {open === 'products' && (
            <div className="nav-mega" onMouseLeave={() => setOpen(null)}>
              <div className="mega-col">
                <div className="mega-label">Libraries</div>
                <a><b>Icons</b><span>12.8M vector &amp; raster</span></a>
                <a><b>Illustrations</b><span>3D, hand-drawn, vector</span></a>
                <a><b>Photos</b><span>1.4M royalty-free</span></a>
                <a><b>Music</b><span>Loops, tracks, SFX</span></a>
              </div>
              <div className="mega-col">
                <div className="mega-label">Tools</div>
                <a><b>Pichon</b><span>Desktop icon library</span></a>
                <a><b>Lunacy</b><span>Free design app</span></a>
                <a><b>Mega Creator</b><span>Compose scenes</span></a>
              </div>
              <div className="mega-col">
                <div className="mega-label">AI</div>
                <a><b>Smart Upscaler</b><span>2K, 4K, 8K</span></a>
                <a><b>Background Remover</b><span>One-click cutout</span></a>
                <a><b>Image Generator</b><span>Text → asset</span></a>
              </div>
            </div>
          )}
        </nav>

        <div className="nav-right">
          <button className="nav-search-btn" onClick={()=>{
            const el = document.getElementById('hero-search-input');
            if (el) { el.focus(); window.scrollTo({ top: 0, behavior: 'smooth' }); }
          }}>
            <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 12.8M assets</span>
            <KeyHint k="⌘K"/>
          </button>
          <a className="nav-link compact" href="#">Sign in</a>
          <a className="nav-cta" href="#">
            Get plus
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ============ HERO ============ */

function Hero({ t, setTweak }) {
  const [q, setQ] = useState("");
  const [styleIdx, setStyleIdx] = useState(0);
  const styles = [
    { name: "Outline",   key: "outline" },
    { name: "Filled",    key: "filled" },
    { name: "Color",     key: "color" },
    { name: "Glyph",     key: "glyph" },
    { name: "Hand-drawn",key: "hand" },
    { name: "3D",        key: "3d" },
  ];
  const featuredName = "compass";
  const featuredIcon = ICONS.find(i => i.name === featuredName);

  const lines = (t.headline || "").split("\n");

  return (
    <section className="hero">
      {/* editorial bloom */}
      <div className="hero-bloom" aria-hidden="true"/>

      <div className="hero-inner">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="hero-eyebrow">
              <span className="dot-pulse"></span>
              <span>12,847,392 assets</span>
              <span className="sep">·</span>
              <span>Today: <em>+318 new</em></span>
            </div>
            <h1 className="hero-h1">
              {lines.map((line, i) => {
                // make the second line italic-serif if the tweak says so
                const isSerifLine = t.showEditorialSerif && i === lines.length - 1;
                return (
                  <span key={i} className={isSerifLine ? "h1-line serif" : "h1-line"}>
                    {line}
                  </span>
                );
              })}
            </h1>
            <p className="hero-deck">
              A library, a desktop app, a Figma plugin and a generator — built so
              you stop pasting <code>icon8 wireframe car png</code> into search bars at 11pm.
            </p>

            {/* search */}
            <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">
                <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
              </svg>
              <input
                id="hero-search-input"
                value={q} onChange={e=>setQ(e.target.value)}
                placeholder="Try “coin in line style”, “3d laptop”, “wireframe car”…"
                autoComplete="off"
              />
              <KeyHint k="⌘K"/>
              <button type="submit" className="hero-search-go">
                Search
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </button>
            </form>

            {/* trending searches */}
            <div className="hero-trending">
              <span className="t-label">TRENDING</span>
              {["ai", "wallet", "calendar", "agent", "ghost", "mobile pay"].map(w => (
                <button key={w} className="trend-chip" onClick={()=>setQ(w)}>{w}</button>
              ))}
            </div>
          </div>

          {/* editorial showcase */}
          <div className="hero-show">
            <div className="show-frame">
              <div className="show-meta">
                <span className="show-meta-l">Featured pack · #{String(styleIdx+1).padStart(2,'0')}/06</span>
                <span className="show-meta-r">noun · <em>com·pass</em></span>
              </div>
              <div className={`show-icon style-${styles[styleIdx].key}`}>
                <div className="show-icon-inner">
                  {featuredIcon?.svg}
                </div>
                <div className="show-bg-grid" aria-hidden="true">
                  {Array.from({length: 64}).map((_,i)=><span key={i}/>)}
                </div>
              </div>
              <div className="show-styles">
                {styles.map((s,i) => (
                  <button key={s.key} className={`show-style ${i===styleIdx?'is-on':''}`}
                          onClick={()=>setStyleIdx(i)}>
                    <span className={`style-thumb thumb-${s.key}`}>
                      <span className="thumb-inner">{featuredIcon?.svg}</span>
                    </span>
                    <span>{s.name}</span>
                  </button>
                ))}
              </div>
              <div className="show-foot">
                <span className="show-foot-l">
                  <kbd>SVG</kbd><kbd>PNG</kbd><kbd>PDF</kbd><kbd>React</kbd><kbd>Figma</kbd>
                </span>
                <button className="show-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 className="hero-marquee">
              <div className="marquee-track">
                {[..."LIVE PREVIEW · UPDATED CONTINUOUSLY · DROP-IN SVG · LIVE PREVIEW · UPDATED CONTINUOUSLY · DROP-IN SVG · "].map((c,i)=>(
                  <span key={i}>{c}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ LIVE SEARCHABLE GRID ============ */

function GridBlock({ t }) {
  const [q, setQ] = useState("");
  const [pack, setPack] = useState("all");
  const [hover, setHover] = useState(null);

  const packs = ["all", "essentials", "commerce", "files", "comm", "maps", "weather"];

  const filtered = useMemo(() => {
    return ICONS.filter(i => {
      const matchesPack = pack === "all" || i.pack === pack;
      const matchesQ = !q || i.name.includes(q.toLowerCase());
      return matchesPack && matchesQ;
    });
  }, [q, pack]);

  return (
    <section className="grid-block" id="grid">
      <div className="block-head">
        <div>
          <div className="t-section-label">02 — Library</div>
          <h2 className="block-h2">
            {filtered.length.toLocaleString()} matches.
            <span className="muted"> Click to copy. </span>
            <span className="serif italic">Or just admire.</span>
          </h2>
        </div>
        <div className="grid-filter-row">
          <div className="grid-search">
            <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>
            <input placeholder="filter…" value={q} onChange={e=>setQ(e.target.value)}/>
            {q && <button onClick={()=>setQ("")}>×</button>}
          </div>
          <div className="pack-chips">
            {packs.map(p => (
              <button key={p} className={`pack-chip ${pack===p?'is-on':''}`} onClick={()=>setPack(p)}>
                {p}
                {pack===p && <span className="chip-count">{filtered.length}</span>}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className={`icon-grid d-${t.density}`}>
        {filtered.map(icon => (
          <button
            key={icon.name}
            className="cell"
            onMouseEnter={()=>setHover(icon.name)}
            onMouseLeave={()=>setHover(null)}
            aria-label={icon.name}
          >
            <span className="cell-icon">{icon.svg}</span>
            <span className="cell-name">{icon.name}</span>
            <span className="cell-copy">
              <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>
            </span>
          </button>
        ))}
        {filtered.length === 0 && (
          <div className="grid-empty">
            <span className="t-section-label">Nothing matches “{q}”.</span>
            <p>Wait for the AI to draw it →</p>
          </div>
        )}
      </div>

      <div className="grid-foot">
        <span className="grid-foot-l">
          Showing {filtered.length} of 12.8M · sorted by relevance
        </span>
        <a className="link-arrow" href="#">
          Open the full library
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
    </section>
  );
}

/* ============ BENTO PRODUCTS ============ */

function Bento() {
  return (
    <section className="bento" id="products">
      <div className="block-head simple">
        <div className="t-section-label">03 — The whole stack</div>
        <h2 className="block-h2">
          One library — eight products. <span className="serif italic muted">All under one log-in.</span>
        </h2>
      </div>

      <div className="bento-grid">
        {/* Icons — big tile */}
        <article className="tile tile-icons tile-wide">
          <header>
            <span className="tile-kicker">01 · Icons</span>
            <span className="tile-stat">12.8M</span>
          </header>
          <h3>Every icon you can describe. <span className="serif italic">In nine styles.</span></h3>
          <div className="tile-art tile-art-icons">
            <div className="floaty">
              {["#FACC15","#0a0a0a","#5e6ad2","#0FB57E","#FF5436","#0a0a0a","#FACC15","#5e6ad2"].map((c,i)=>(
                <span key={i} style={{ background: c }}/>
              ))}
            </div>
          </div>
          <footer>
            <a className="tile-link">Browse →</a>
            <span className="tile-meta">SVG · PNG · PDF · Figma · npm</span>
          </footer>
        </article>

        {/* Illustrations */}
        <article className="tile tile-ill">
          <header>
            <span className="tile-kicker">02 · Illustrations</span>
            <span className="tile-stat">340K</span>
          </header>
          <h3>Scenes &amp; characters that don't look stock.</h3>
          <div className="tile-art tile-art-ill" aria-hidden="true">
            <span className="blob b1"/><span className="blob b2"/><span className="blob b3"/>
          </div>
          <footer><a className="tile-link">Browse →</a></footer>
        </article>

        {/* AI — featured */}
        <article className="tile tile-ai tile-dark">
          <header>
            <span className="tile-kicker">03 · AI</span>
            <span className="tile-stat tile-stat-new">new</span>
          </header>
          <h3>Type it. <span className="serif italic">Get it.</span></h3>
          <div className="tile-art tile-art-ai">
            <div className="ai-prompt">
              <span className="ai-prompt-dot"/>
              <span className="ai-prompt-text">a coin in line style, minimal</span>
              <span className="ai-prompt-send">↵</span>
            </div>
            <div className="ai-out">
              <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M9 15l6-6"/></svg></span>
              <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9"/><path d="M14 9.5c-.6-1-1.8-1.5-3-1.5-1.7 0-3 1-3 2.3 0 1.3 1.3 1.7 3 2 1.7.3 3 .8 3 2.2 0 1.4-1.4 2.5-3 2.5-1.5 0-2.6-.6-3-1.5M12 5v2.5M12 16.5V19"/></svg></span>
              <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9"/><path d="M8 14l4-4 4 4"/></svg></span>
            </div>
          </div>
          <footer><a className="tile-link">Try the generator →</a></footer>
        </article>

        {/* Photos */}
        <article className="tile tile-photos">
          <header>
            <span className="tile-kicker">04 · Photos</span>
            <span className="tile-stat">1.4M</span>
          </header>
          <h3>Royalty-free. Released yesterday.</h3>
          <div className="tile-art tile-art-photos" aria-hidden="true">
            <span className="ph p1"/><span className="ph p2"/><span className="ph p3"/><span className="ph p4"/>
          </div>
          <footer><a className="tile-link">Browse →</a></footer>
        </article>

        {/* Lunacy */}
        <article className="tile tile-lunacy">
          <header>
            <span className="tile-kicker">05 · Lunacy</span>
            <span className="tile-stat">Free</span>
          </header>
          <h3>The design app with the library built in.</h3>
          <div className="tile-art tile-art-lunacy" aria-hidden="true">
            <div className="lunacy-canvas">
              <div className="lc-toolbar"><i/><i/><i/></div>
              <div className="lc-content"><div className="lc-rect"/><div className="lc-circle"/></div>
            </div>
          </div>
          <footer><a className="tile-link">Download →</a></footer>
        </article>

        {/* Pichon */}
        <article className="tile tile-pichon">
          <header>
            <span className="tile-kicker">06 · Pichon</span>
            <span className="tile-stat">Mac · Win</span>
          </header>
          <h3>The whole library — offline, on your desktop.</h3>
          <div className="tile-art tile-art-pichon" aria-hidden="true">
            <div className="pichon-win">
              <div className="pw-side"><i/><i/><i/><i/></div>
              <div className="pw-main">{Array.from({length:9}).map((_,i)=><span key={i}/>)}</div>
            </div>
          </div>
          <footer><a className="tile-link">Get the app →</a></footer>
        </article>

        {/* Mega creator */}
        <article className="tile tile-mega tile-accent">
          <header>
            <span className="tile-kicker">07 · Mega Creator</span>
            <span className="tile-stat">Browser</span>
          </header>
          <h3>Drag, drop, compose. <span className="serif italic">A scene in 90 seconds.</span></h3>
          <div className="tile-art tile-art-mega" aria-hidden="true">
            <span className="mc m1"/><span className="mc m2"/><span className="mc m3"/>
          </div>
          <footer><a className="tile-link">Launch →</a></footer>
        </article>

        {/* Plugins */}
        <article className="tile tile-plugins">
          <header>
            <span className="tile-kicker">08 · Plugins</span>
            <span className="tile-stat">Figma · Sketch · VS Code</span>
          </header>
          <h3>Right inside whatever you already use.</h3>
          <div className="tile-art tile-art-plugins" aria-hidden="true">
            <span className="pl">Figma</span>
            <span className="pl">Sketch</span>
            <span className="pl">VS Code</span>
            <span className="pl">Webflow</span>
            <span className="pl">Framer</span>
          </div>
          <footer><a className="tile-link">Install →</a></footer>
        </article>
      </div>
    </section>
  );
}

/* ============ STYLES SCROLLER ============ */

function StylesBlock() {
  const styles = [
    { name: "iOS",        n: "1.2M",  preview: "outline" },
    { name: "Material",   n: "950K",  preview: "filled" },
    { name: "Color glass",n: "280K",  preview: "glass" },
    { name: "Fluency",    n: "1.4M",  preview: "fluency" },
    { name: "3D plastic", n: "120K",  preview: "3d-plastic" },
    { name: "3D fluency", n: "210K",  preview: "3d-fluency" },
    { name: "Hand-drawn", n: "75K",   preview: "hand" },
    { name: "Doodle",     n: "60K",   preview: "doodle" },
    { name: "Isometric",  n: "190K",  preview: "iso" },
  ];
  return (
    <section className="styles-block" id="styles">
      <div className="block-head simple">
        <div className="t-section-label">04 — Styles</div>
        <h2 className="block-h2">
          Nine native styles. <span className="serif italic muted">Pick the one that fits, switch when you don't.</span>
        </h2>
      </div>
      <div className="styles-scroller">
        {styles.map((s,i) => (
          <article key={s.name} className={`style-card sty-${s.preview}`}>
            <div className="style-art">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <circle cx="12" cy="12" r="9"/>
                <path d="M16 8l-2 6-6 2 2-6z"/>
              </svg>
            </div>
            <div className="style-meta">
              <div>
                <div className="style-name">{s.name}</div>
                <div className="style-count">{s.n} icons</div>
              </div>
              <span className="style-num">{String(i+1).padStart(2,'0')}</span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ============ AI / PROMPT SECTION ============ */

function AIBlock() {
  const [prompt, setPrompt] = useState("a coffee cup with steam, line style, 24px");
  const [generating, setGenerating] = useState(false);
  const [gen, setGen] = useState([0,1,2,3]); // indices of pre-baked icons used as "output"

  const samples = ["compass","clock","camera","mail","cloud","heart","star","zap","rocket","award"];

  const handleGen = () => {
    setGenerating(true);
    setTimeout(()=>{
      const shuf = [...samples].sort(()=>Math.random()-0.5).slice(0,4);
      setGen(shuf.map(name => ICONS.findIndex(i=>i.name===name)).filter(i=>i>=0));
      setGenerating(false);
    }, 700);
  };

  return (
    <section className="ai-block" id="ai">
      <div className="ai-inner">
        <div className="ai-left">
          <span className="t-section-label dim">05 — AI</span>
          <h2 className="ai-h2">
            Can't find it? <span className="serif italic">Just describe it.</span>
          </h2>
          <p className="ai-deck">
            Our generator is trained on our own library — so an icon you make
            in line style actually <em>matches</em> the line-style icons next to it on
            your screen.
          </p>
          <ul className="ai-points">
            <li><span className="dot"/> Generations match our nine native styles</li>
            <li><span className="dot"/> Drag straight into Figma, Sketch, VS Code</li>
            <li><span className="dot"/> Re-roll, refine, edit strokes — no Photoshop</li>
            <li><span className="dot"/> Pin to your team library for reuse</li>
          </ul>
        </div>

        <div className="ai-right">
          <div className="ai-card">
            <div className="ai-card-head">
              <span className="ai-card-label">PROMPT</span>
              <div className="ai-card-style-chips">
                <span className="is-on">line</span>
                <span>filled</span>
                <span>color</span>
                <span>3d</span>
              </div>
            </div>
            <textarea
              className="ai-input"
              value={prompt}
              onChange={e=>setPrompt(e.target.value)}
              rows="2"
              spellCheck="false"
            />
            <div className="ai-card-foot">
              <span className="ai-card-meta">size <kbd>24×24</kbd> · style <kbd>outline</kbd></span>
              <button className="ai-card-go" onClick={handleGen}>
                {generating ? "Generating…" : <>Generate <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg></>}
              </button>
            </div>
            <div className={`ai-out-grid ${generating ? 'is-loading' : ''}`}>
              {gen.map((idx,i) => (
                <div key={i} className="ai-out-cell">
                  <div className="ai-out-icon">{ICONS[idx]?.svg}</div>
                  <div className="ai-out-actions">
                    <button>↻</button>
                    <button>↓</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ DEV/INSTALL SECTION ============ */

function DevBlock() {
  const [tab, setTab] = useState("react");
  const snippets = {
    react: `import { Compass } from '@icons8/react';

<Compass size={24} weight="line" />`,
    svg: `<svg width="24" height="24" viewBox="0 0 24 24"
  fill="none" stroke="currentColor" stroke-width="1.5">
  <circle cx="12" cy="12" r="9"/>
  <path d="M16 8l-2 6-6 2 2-6z"/>
</svg>`,
    cli: `npx @icons8/cli pull compass --style=line --out=./icons`,
    figma: `Figma → Plugins → Icons8 → search "compass" → ⌘D`,
  };
  return (
    <section className="dev-block" id="plugins">
      <div className="dev-inner">
        <div className="dev-text">
          <span className="t-section-label dim">06 — Ship</span>
          <h2 className="dev-h2">
            In your codebase by lunch. <span className="serif italic muted">By any path you want.</span>
          </h2>
          <p>Open the plugin, copy the SVG, install the npm, paste the URL. We don't mind. The library is the same, however you reach it.</p>

          <div className="dev-bullets">
            <div><b>@icons8/react</b><span>Tree-shakable, typed, all 12.8M lazy-resolved on demand.</span></div>
            <div><b>Figma plugin</b><span>Drag &amp; drop with full search and style filters.</span></div>
            <div><b>Pichon</b><span>Whole library offline on Mac &amp; Windows. ⌘-V into anything.</span></div>
            <div><b>Webhook</b><span>Push new icons into your CDN as we publish them.</span></div>
          </div>
        </div>

        <div className="dev-code">
          <div className="dev-code-tabs">
            {Object.keys(snippets).map(k => (
              <button key={k} className={tab===k?"is-on":""} onClick={()=>setTab(k)}>{k}</button>
            ))}
            <button className="dev-copy">copy</button>
          </div>
          <pre className="dev-code-body"><code>{snippets[tab]}</code></pre>
          <div className="dev-code-foot">
            <span>● connected to @icons8/react v8.4.0</span>
            <span>{snippets[tab].split("\n").length} lines</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ PACKS ============ */

function PacksBlock() {
  const packs = [
    { name: "Fintech 2026", count: 312, by: "Maria K.", hue: "var(--accent)" },
    { name: "Cozy weekends", count: 184, by: "in-house", hue: "#ffe9d6" },
    { name: "AI agents",     count: 96,  by: "Tom L.",   hue: "#e8eafd" },
    { name: "Healthcare",    count: 421, by: "in-house", hue: "#e0f2ea" },
  ];
  return (
    <section className="packs" id="packs">
      <div className="block-head simple">
        <div className="t-section-label">07 — This week</div>
        <h2 className="block-h2">
          Curated packs. <span className="serif italic muted">From the studio and the community.</span>
        </h2>
      </div>
      <div className="packs-grid">
        {packs.map((p,i) => (
          <a key={p.name} className="pack-card" href="#">
            <div className="pack-art" style={{ background: p.hue }}>
              <div className="pack-art-icons">
                {ICONS.slice(i*3, i*3+9).map((ic,j) => (
                  <span key={j}>{ic.svg}</span>
                ))}
              </div>
            </div>
            <div className="pack-meta">
              <div className="pack-meta-l">
                <div className="pack-name">{p.name}</div>
                <div className="pack-by">by {p.by} · {p.count} icons</div>
              </div>
              <span className="pack-arrow">→</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

/* ============ STATS ============ */

function StatsBlock() {
  const stats = [
    { n: "12.8M", l: "Assets across icons, photos, illustrations" },
    { n: "180K",  l: "Designers &amp; teams shipping with us" },
    { n: "9",     l: "Native styles, drawn by humans" },
    { n: "318",   l: "New today" },
  ];
  return (
    <section className="stats">
      <div className="stats-inner">
        {stats.map(s => (
          <div key={s.l} className="stat">
            <div className="stat-n">{s.n}</div>
            <div className="stat-l" dangerouslySetInnerHTML={{__html:s.l}}/>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */

function Footer() {
  const cols = [
    { h: "Libraries", l: ["Icons","Illustrations","Photos","Music","Vector"] },
    { h: "Apps",      l: ["Pichon","Lunacy","Mega Creator","Smart Upscaler","BG Remover"] },
    { h: "Developers",l: ["@icons8/react","CLI","API","Figma plugin","VS Code"] },
    { h: "Company",   l: ["About","Careers","License","Contact","Press kit"] },
  ];
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <Wordmark/>
          <p className="foot-tag">
            Drawn in Bratislava, Vinnytsia, Bogotá &amp; remote since 2009.
          </p>
        </div>
        {cols.map(c => (
          <div key={c.h} className="foot-col">
            <div className="foot-h">{c.h}</div>
            {c.l.map(item => <a key={item} href="#">{item}</a>)}
          </div>
        ))}
      </div>
      <div className="foot-rule"/>
      <div className="foot-meta">
        <span>© Icons8 LLC, 2009 — 2026</span>
        <span className="foot-meta-r">
          <a>Terms</a><a>Privacy</a><a>License</a><a>Status</a>
        </span>
      </div>
    </footer>
  );
}

/* ============ TWEAKS PANEL ============ */

function MyTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Look">
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS.map(o=>o[0])}
          onChange={v=>setTweak('accent', v)}
        />
        <TweakRadio
          label="Mode"
          value={t.mode}
          options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]}
          onChange={v=>setTweak('mode', v)}
        />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          options={[
            { value: 'editorial', label: 'Editorial' },
            { value: 'devtool',   label: 'Devtool' },
          ]}
          onChange={v=>setTweak('heroVariant', v)}
        />
        <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);

  // apply tweaks via root css vars / classes
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    const inkOn = (ACCENT_OPTIONS.find(o=>o[0]===t.accent)?.[1]) || '#0a0a0a';
    root.style.setProperty('--accent-ink', inkOn);
    root.setAttribute('data-mode', t.mode);
    root.setAttribute('data-hero', t.heroVariant);
  }, [t.accent, t.mode, t.heroVariant]);

  return (
    <>
      <TopNav t={t} setTweak={setTweak}/>
      <Hero t={t} setTweak={setTweak}/>
      <GridBlock t={t}/>
      <Bento/>
      <StylesBlock/>
      <AIBlock/>
      <PacksBlock/>
      <DevBlock/>
      <StatsBlock/>
      <Footer/>
      <MyTweaks t={t} setTweak={setTweak}/>
    </>
  );
}

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