/* Assets & downloads — brand files, generators, developer snippets */

function DownloadTile({ thumbBg = 'var(--brand-700)', aspect = '16 / 9', src, svgSrc, label, meta, children }) {
  return (
    <div style={{
      border: '1px solid var(--border-secondary)', borderRadius: 12,
      overflow: 'hidden', background: 'var(--bg-primary)',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        background: thumbBg, aspectRatio: aspect,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden', position: 'relative',
      }}>
        {src ? (
          <img src={src} alt={label}
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        ) : children}
      </div>
      <div style={{
        padding: '12px 14px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8,
        borderTop: '1px solid var(--border-tertiary)',
      }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</div>
          {meta && <div style={{ fontSize: 11, color: 'var(--text-quaternary)',
            fontFamily: 'var(--font-mono)', marginTop: 2 }}>{meta}</div>}
        </div>
        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
          {svgSrc && (
            <a href={svgSrc} download title="Download SVG" style={{
              fontSize: 11, fontWeight: 700, padding: '4px 8px',
              borderRadius: 6, background: 'var(--bg-tertiary)',
              color: 'var(--text-secondary)', textDecoration: 'none',
              border: '1px solid var(--border-secondary)',
              fontFamily: 'var(--font-mono)',
            }}>SVG</a>
          )}
          {src && (
            <a href={src} download title="Download PNG" style={{
              fontSize: 11, fontWeight: 700, padding: '4px 8px',
              borderRadius: 6, background: 'var(--brand-600)',
              color: '#fff', textDecoration: 'none',
              border: '1px solid var(--brand-700)',
              fontFamily: 'var(--font-mono)',
            }}>PNG</a>
          )}
        </div>
      </div>
    </div>
  );
}

/* =========================================================
 * Interactive OG / social image generator
 * ========================================================= */
function OgGenerator() {
  const [preset, setPreset] = useState('og');
  const [headline, setHeadline] = useState('Materially smarter construction.');
  const [accent, setAccent] = useState('smarter');
  const [sub, setSub] = useState('One platform to plan, source, move and prove every material on every project.');
  const [theme, setTheme] = useState('navy');
  const [url, setUrl] = useState('nexusregen.com');
  const [download, setDownload] = useState(null);
  const canvasRef = useRef(null);

  const presets = {
    og:       { w: 1200, h: 630,  label: 'Open Graph · 1200×630' },
    square:   { w: 1200, h: 1200, label: 'Square · 1200×1200' },
    linkedin: { w: 1584, h: 396,  label: 'LinkedIn personal · 1584×396' },
    twitter:  { w: 1500, h: 500,  label: 'Twitter / X · 1500×500' },
    story:    { w: 1080, h: 1920, label: 'IG story · 1080×1920' },
    company:  { w: 1128, h: 191,  label: 'LinkedIn company · 1128×191' },
  };
  const themes = {
    navy:     { bg: '#121541', fg: '#FFFFFF', accent: '#F7EC33', sub: '#B4B7D4' },
    yellow:   { bg: '#F7EC33', fg: '#0E1034', accent: '#0E1034', sub: 'rgba(14,16,52,.65)' },
    paper:    { bg: '#FFFFFF', fg: '#0E1034', accent: '#121541', sub: '#475467' },
    darkest:  { bg: '#03040E', fg: '#FFFFFF', accent: '#F7EC33', sub: '#8488B6' },
  };

  const drawArrow = (ctx, x, y, size, fill) => {
    // Scale the canonical path to the requested size
    const scale = size / 120.13;
    ctx.save();
    ctx.translate(x - 7.925 * scale, y - 9.935 * scale);
    ctx.scale(scale, scale);
    const p = new Path2D('M128.055 9.93506H87.925H7.92499V50.0651H59.555L7.92499 101.685L22.115 115.875L36.305 130.065L87.935 78.4351V130.065H127.905L128.055 9.93506ZM124.625 126.635V50.0651L124.615 50.0551V13.3651H11.355V46.6351H67.845L61.985 52.4951L12.785 101.695L24.545 113.455L36.305 125.215L85.505 76.0151L91.365 70.1551V126.635H124.625Z');
    ctx.fillStyle = fill;
    ctx.fill(p, 'evenodd');
    ctx.restore();
  };

  const render = () => {
    const c = canvasRef.current;
    if (!c) return;
    const { w, h } = presets[preset];
    c.width = w;
    c.height = h;
    const t = themes[theme];
    const ctx = c.getContext('2d');

    // Background
    ctx.fillStyle = t.bg;
    ctx.fillRect(0, 0, w, h);

    // Decorative arrow in corner (opacity-reduced)
    ctx.globalAlpha = 0.1;
    const bigArrow = Math.max(w, h) * 0.75;
    drawArrow(ctx, w - bigArrow * 0.55, -bigArrow * 0.15, bigArrow, t.accent);
    ctx.globalAlpha = 1;

    // Scale text proportionally to canvas width but clamp for tall canvases
    const tWidth = Math.min(w - 160, 1100);
    const baseUnit = Math.min(w, h * 1.6) / 15; // tuned so OG lands ~88px

    // Emblem (small, top-left)
    const emblemSize = Math.min(w, h) * 0.075;
    drawArrow(ctx, 80, 90, emblemSize, t.accent);
    ctx.fillStyle = t.fg;
    ctx.font = `700 ${baseUnit * 0.2}px Inter, system-ui, sans-serif`;
    ctx.textBaseline = 'middle';
    ctx.fillText('NEXUS REGEN', 80 + emblemSize + 14, 90 + emblemSize / 2);

    // Headline
    const hSize = baseUnit * 1;
    ctx.font = `600 ${hSize}px Inter, system-ui, sans-serif`;
    ctx.fillStyle = t.fg;

    // Wrap headline to fit width
    const words = headline.split(' ');
    const lines = [];
    let line = '';
    for (const w1 of words) {
      const test = line ? line + ' ' + w1 : w1;
      if (ctx.measureText(test).width > tWidth && line) {
        lines.push(line);
        line = w1;
      } else {
        line = test;
      }
    }
    if (line) lines.push(line);

    const startY = h * 0.42;
    const lh = hSize * 1.05;
    lines.forEach((l, i) => {
      // Split at accent word if provided
      if (accent && l.includes(accent)) {
        const parts = l.split(accent);
        let x = 80;
        for (let p = 0; p < parts.length; p++) {
          if (parts[p]) {
            ctx.fillStyle = t.fg;
            ctx.fillText(parts[p], x, startY + i * lh);
            x += ctx.measureText(parts[p]).width;
          }
          if (p < parts.length - 1) {
            ctx.fillStyle = t.accent;
            ctx.fillText(accent, x, startY + i * lh);
            x += ctx.measureText(accent).width;
          }
        }
      } else {
        ctx.fillText(l, 80, startY + i * lh);
      }
    });

    // Subhead
    if (sub) {
      ctx.font = `400 ${baseUnit * 0.32}px Inter, system-ui, sans-serif`;
      ctx.fillStyle = t.sub;
      ctx.fillText(sub, 80, startY + lines.length * lh + baseUnit * 0.3);
    }

    // URL bottom
    ctx.font = `600 ${baseUnit * 0.22}px 'JetBrains Mono', ui-monospace, monospace`;
    ctx.fillStyle = t.sub;
    ctx.fillText(url, 80, h - 60);

    // Emblem bottom-right
    const emBig = Math.min(w, h) * 0.1;
    drawArrow(ctx, w - emBig - 80, h - emBig - 60, emBig, t.accent);

    // Produce download URL
    c.toBlob(blob => {
      if (blob) {
        if (download) URL.revokeObjectURL(download);
        setDownload(URL.createObjectURL(blob));
      }
    }, 'image/png');
  };

  useEffect(() => { render(); }, [preset, headline, accent, sub, theme, url]);

  const p = presets[preset];
  return (
    <Card pad={0} style={{ overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr' }}>
        {/* Controls */}
        <div style={{
          padding: 20, borderRight: '1px solid var(--border-tertiary)',
          display: 'flex', flexDirection: 'column', gap: 14,
          background: 'var(--bg-secondary)',
        }}>
          <div>
            <Label>Format</Label>
            <select value={preset} onChange={e => setPreset(e.target.value)} style={selectStyle}>
              {Object.entries(presets).map(([k, v]) => (
                <option key={k} value={k}>{v.label}</option>
              ))}
            </select>
          </div>

          <div>
            <Label>Theme</Label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4,
              background: 'var(--bg-primary)', padding: 3, borderRadius: 8,
              border: '1px solid var(--border-secondary)' }}>
              {Object.entries(themes).map(([k, v]) => (
                <button key={k} onClick={() => setTheme(k)} style={{
                  border: 'none', padding: '8px 4px', borderRadius: 6,
                  background: theme === k ? v.bg : 'transparent',
                  color: theme === k ? v.fg : 'var(--text-tertiary)',
                  cursor: 'pointer', fontSize: 11, fontWeight: 600,
                  textTransform: 'capitalize',
                }}>{k}</button>
              ))}
            </div>
          </div>

          <div>
            <Label>Headline</Label>
            <input value={headline} onChange={e => setHeadline(e.target.value)} style={inputStyle} />
          </div>

          <div>
            <Label>Accent word</Label>
            <input value={accent} onChange={e => setAccent(e.target.value)} style={inputStyle}
              placeholder="(word inside headline to highlight)" />
          </div>

          <div>
            <Label>Subhead</Label>
            <input value={sub} onChange={e => setSub(e.target.value)} style={inputStyle} />
          </div>

          <div>
            <Label>URL</Label>
            <input value={url} onChange={e => setUrl(e.target.value)} style={inputStyle} />
          </div>

          <a href={download} download={`nexus-regen-${preset}.png`}
            onClick={() => !download && event.preventDefault()}
            style={{
              textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
              justifyContent: 'center', gap: 6,
              background: 'var(--brand-600)', color: '#fff',
              padding: '10px 14px', borderRadius: 8, marginTop: 8,
              fontWeight: 600, fontSize: 14,
              border: '1px solid var(--brand-700)',
            }}>
            ↓ Download PNG ({p.w}×{p.h})
          </a>
        </div>

        {/* Preview */}
        <div style={{ padding: 20, background: 'var(--bg-primary)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          minHeight: 360,
        }}>
          <div style={{ maxWidth: '100%', maxHeight: 520, overflow: 'hidden',
            borderRadius: 8, border: '1px solid var(--border-secondary)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'var(--bg-secondary)',
          }}>
            <canvas ref={canvasRef}
              style={{ maxWidth: '100%', maxHeight: 520, display: 'block' }} />
          </div>
        </div>
      </div>
    </Card>
  );
}

const inputStyle = {
  width: '100%',
  padding: '8px 10px',
  fontSize: 13,
  borderRadius: 8,
  border: '1px solid var(--border-primary)',
  background: 'var(--bg-primary)',
  color: 'var(--text-primary)',
  fontFamily: 'var(--font-body)',
  boxSizing: 'border-box',
};
const selectStyle = { ...inputStyle, cursor: 'pointer' };
function Label({ children }) {
  return <div style={{
    fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase',
    color: 'var(--text-quaternary)', marginBottom: 6,
  }}>{children}</div>;
}

/* =========================================================
 * Favicon generator — produces a zip of every size from a
 * single source emblem. (Uses canvas + the provided JSZip
 * via CDN-lazy-load pattern so the main bundle stays small.)
 * ========================================================= */
function FaviconHeadSnippet() {
  const snippet = `<!-- Nexus ReGen favicons -->
<link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicons/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/favicons/favicon-192.png" sizes="192x192" type="image/png" />
<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" sizes="180x180" />
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#121541" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<meta name="theme-color" content="#121541" />`;

  const ogSnippet = `<!-- OG / Twitter meta -->
<meta property="og:title" content="Nexus ReGen — Materially smarter construction" />
<meta property="og:description" content="The UK's materials management platform for construction. Plan, source, move and prove every material on every project." />
<meta property="og:image" content="https://nexusregen.com/og/og-default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://nexusregen.com" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Nexus ReGen — Materially smarter construction" />
<meta name="twitter:description" content="The UK's materials management platform for construction. Plan, source, move and prove every material on every project." />
<meta name="twitter:image" content="https://nexusregen.com/og/og-default.png" />`;

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <div>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>HTML head — favicons</div>
        <Code block>{snippet}</Code>
      </div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>HTML head — social</div>
        <Code block>{ogSnippet}</Code>
      </div>
    </div>
  );
}

/* =========================================================
 * Pattern preview block — live-tiled as background
 * ========================================================= */
function PatternTile({ src, label, size = '200px' }) {
  return (
    <div style={{
      borderRadius: 12, overflow: 'hidden',
      border: '1px solid var(--border-secondary)',
    }}>
      <div style={{
        height: 220, backgroundImage: `url(${src})`,
        backgroundSize: size, backgroundRepeat: 'repeat',
      }} />
      <div style={{
        padding: '10px 14px', borderTop: '1px solid var(--border-tertiary)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: 'var(--bg-primary)',
      }}>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
        <div style={{ display: 'flex', gap: 4 }}>
          <a href={src.replace('-800.png', '.svg')} download style={{
            fontSize: 11, fontWeight: 700, padding: '3px 7px', borderRadius: 6,
            background: 'var(--bg-tertiary)', color: 'var(--text-secondary)',
            textDecoration: 'none', border: '1px solid var(--border-secondary)',
            fontFamily: 'var(--font-mono)',
          }}>SVG</a>
          <a href={src} download style={{
            fontSize: 11, fontWeight: 700, padding: '3px 7px', borderRadius: 6,
            background: 'var(--brand-600)', color: '#fff', textDecoration: 'none',
            border: '1px solid var(--brand-700)',
            fontFamily: 'var(--font-mono)',
          }}>PNG</a>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
 * Tokens export snippets — CSS / JSON / Tailwind config
 * ========================================================= */
function TokensExport() {
  const css = `/* Nexus ReGen — CSS custom properties */
:root {
  --brand-25:  #F8F9FC;
  --brand-50:  #F1F2F9;
  --brand-100: #DDDFE9;
  --brand-200: #B4B7D4;
  --brand-300: #8488B6;
  --brand-400: #5558A0;
  --brand-500: #2A2D78;
  --brand-600: #121541; /* Penn Blue */
  --brand-700: #0E1034;
  --brand-800: #0A0C28;
  --brand-900: #06081C;
  --brand-950: #03040E;

  --accent-400: #F7EC33; /* Aureolin */
  --accent-500: #E0D420;

  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}`;

  const tailwind = `// tailwind.config.js — Nexus ReGen
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          25: '#F8F9FC', 50: '#F1F2F9', 100: '#DDDFE9',
          200: '#B4B7D4', 300: '#8488B6', 400: '#5558A0',
          500: '#2A2D78', 600: '#121541', 700: '#0E1034',
          800: '#0A0C28', 900: '#06081C', 950: '#03040E',
        },
        accent: {
          400: '#F7EC33', 500: '#E0D420', 600: '#B8AC10',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
      },
    },
  },
};`;

  const json = `{
  "$schema": "https://tokens.studio/schema.json",
  "color": {
    "brand": {
      "600": { "value": "#121541", "type": "color" },
      "700": { "value": "#0E1034", "type": "color" }
    },
    "accent": {
      "400": { "value": "#F7EC33", "type": "color" }
    }
  },
  "typography": {
    "family": {
      "body": { "value": "Inter", "type": "fontFamilies" },
      "mono": { "value": "JetBrains Mono", "type": "fontFamilies" }
    }
  }
}`;

  const [tab, setTab] = useState('css');
  const tabs = { css: 'CSS', tailwind: 'Tailwind', json: 'Design Tokens JSON' };
  const src = { css, tailwind, json }[tab];

  return (
    <Card pad={0} style={{ overflow: 'hidden' }}>
      <div style={{
        display: 'flex', borderBottom: '1px solid var(--border-tertiary)',
        background: 'var(--bg-secondary)',
      }}>
        {Object.entries(tabs).map(([k, l]) => (
          <button key={k} onClick={() => setTab(k)} style={{
            border: 'none', padding: '12px 20px',
            background: tab === k ? 'var(--bg-primary)' : 'transparent',
            color: tab === k ? 'var(--text-primary)' : 'var(--text-tertiary)',
            fontSize: 13, fontWeight: 600, cursor: 'pointer',
            borderBottom: tab === k ? '2px solid var(--brand-600)' : '2px solid transparent',
          }}>{l}</button>
        ))}
      </div>
      <div style={{ padding: 20 }}>
        <Code block>{src}</Code>
      </div>
    </Card>
  );
}

/* =========================================================
 * Section
 * ========================================================= */
function S_Assets() {
  const dl = (p) => `downloads/${p}`;

  return (
    <Section
      id="assets"
      eyebrow="10 · Assets"
      title="Download anything."
      intro="Every brand asset we produce, ready to drop into a deck, a site, a social profile or a vehicle wrap. Pre-rendered for common sizes, and a live generator for everything else."
    >
      {/* Arrow emblem downloads */}
      <Block title="The marks" note="PNG & SVG, every approved colourway.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 12 }}>
          <DownloadTile
            thumbBg="var(--brand-600)" aspect="1 / 1"
            src={dl('marks-png/emblem-yellow-on-navy-1024.png')}
            svgSrc={dl('marks-svg/emblem-yellow-on-navy.svg')}
            label="Emblem · yellow on navy" meta="512 · 1024" />
          <DownloadTile
            thumbBg="var(--accent-400)" aspect="1 / 1"
            src={dl('marks-png/emblem-navy-on-yellow-1024.png')}
            svgSrc={dl('marks-svg/emblem-navy-on-yellow.svg')}
            label="Emblem · navy on yellow" meta="512 · 1024" />
          <DownloadTile
            thumbBg="var(--bg-secondary)" aspect="1 / 1"
            src={dl('marks-png/emblem-navy-1024.png')}
            svgSrc={dl('marks-svg/emblem-navy.svg')}
            label="Emblem · navy solo" meta="512 · 1024" />
          <DownloadTile
            thumbBg="var(--brand-700)" aspect="1 / 1"
            src={dl('marks-png/emblem-yellow-1024.png')}
            svgSrc={dl('marks-svg/emblem-yellow.svg')}
            label="Emblem · yellow solo" meta="512 · 1024" />
          <DownloadTile
            thumbBg="#000" aspect="1 / 1"
            src={dl('marks-png/emblem-white-1024.png')}
            svgSrc={dl('marks-svg/emblem-white.svg')}
            label="Emblem · white solo" meta="512 · 1024" />
          <DownloadTile
            thumbBg="var(--bg-secondary)" aspect="1 / 1"
            src={dl('marks-png/emblem-black-1024.png')}
            svgSrc={dl('marks-svg/emblem-black.svg')}
            label="Emblem · black solo" meta="512 · 1024" />
        </div>

        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
          <DownloadTile
            thumbBg="var(--brand-600)" aspect="2.5 / 1"
            src={dl('marks-png/nr-lockup-yellow-on-navy-2000.png')}
            svgSrc={dl('marks-svg/nr-lockup-yellow-on-navy.svg')}
            label="NR lockup · yellow on navy" meta="1000 · 2000" />
          <DownloadTile
            thumbBg="var(--accent-400)" aspect="2.5 / 1"
            src={dl('marks-png/nr-lockup-navy-on-yellow-2000.png')}
            svgSrc={dl('marks-svg/nr-lockup-navy-on-yellow.svg')}
            label="NR lockup · navy on yellow" meta="1000 · 2000" />
          <DownloadTile
            thumbBg="var(--bg-secondary)" aspect="2.5 / 1"
            src={dl('marks-png/nr-lockup-navy-2000.png')}
            svgSrc={dl('marks-svg/nr-lockup-navy.svg')}
            label="NR lockup · navy solo" meta="1000 · 2000" />
        </div>

        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 12 }}>
          <DownloadTile
            thumbBg="var(--brand-600)" aspect="3.8 / 1"
            src={dl('marks-png/wordmark-full-on-navy-3260.png')}
            svgSrc={dl('marks-svg/wordmark-full-on-navy.svg')}
            label="Wordmark · full colour on navy" meta="1630 · 3260" />
          <DownloadTile
            thumbBg="#fff" aspect="3.8 / 1"
            src={dl('marks-png/wordmark-navy-on-white-3260.png')}
            svgSrc={dl('marks-svg/wordmark-navy-on-white.svg')}
            label="Wordmark · navy on white" meta="1630 · 3260" />
          <DownloadTile
            thumbBg="var(--accent-400)" aspect="3.8 / 1"
            src={dl('marks-png/wordmark-full-on-yellow-3260.png')}
            svgSrc={dl('marks-svg/wordmark-full-on-yellow.svg')}
            label="Wordmark · full colour on yellow" meta="1630 · 3260" />
          <DownloadTile
            thumbBg="#000" aspect="3.8 / 1"
            src={dl('marks-png/wordmark-mono-white-3260.png')}
            svgSrc={dl('marks-svg/wordmark-mono-white.svg')}
            label="Wordmark · mono white" meta="1630 · 3260" />
        </div>
      </Block>

      {/* Favicons & app icons */}
      <Block title="Favicons & app icons" note="Drop-in package for any web property.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 12, marginBottom: 20 }}>
          {[16, 32, 48, 64, 96, 128, 192, 256, 512].map(sz => (
            <DownloadTile
              key={sz}
              thumbBg="var(--brand-600)" aspect="1 / 1"
              src={dl(`favicons/favicon-${sz}.png`)}
              label={`favicon-${sz}`} meta={`${sz}×${sz} px`} />
          ))}
          <DownloadTile
            thumbBg="var(--brand-600)" aspect="1 / 1"
            src={dl('favicons/apple-touch-icon.png')}
            svgSrc={dl('favicons/apple-touch-icon.svg')}
            label="Apple touch icon" meta="180×180" />
          <DownloadTile
            thumbBg="var(--brand-600)" aspect="1 / 1"
            src={dl('app-icon/app-icon-1024-flat.png')}
            svgSrc={dl('app-icon/app-icon-1024-flat.svg')}
            label="iOS app · flat" meta="1024×1024" />
          <DownloadTile
            thumbBg="var(--bg-secondary)" aspect="1 / 1"
            src={dl('app-icon/app-icon-1024-rounded.png')}
            svgSrc={dl('app-icon/app-icon-1024-rounded.svg')}
            label="App icon · rounded" meta="1024×1024" />
          <DownloadTile
            thumbBg="var(--bg-primary)" aspect="1 / 1"
            svgSrc={dl('favicons/safari-pinned-tab.svg')}
            label="Safari pinned tab" meta="SVG · mono" >
            <ArrowMark size={60} fill="var(--brand-700)" />
          </DownloadTile>
          <DownloadTile
            thumbBg="var(--bg-secondary)" aspect="1 / 1"
            src={dl('favicons/site.webmanifest')}
            label="site.webmanifest" meta="PWA manifest" >
            <Code>.webmanifest</Code>
          </DownloadTile>
        </div>

        <FaviconHeadSnippet />
      </Block>

      {/* OG images */}
      <Block title="Open Graph & social cards" note="1200×630 preview cards for every page and launch.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 12 }}>
          <DownloadTile
            src={dl('og/og-default.png')} svgSrc={dl('og/og-default.svg')}
            label="OG · default" meta="1200×630" />
          <DownloadTile
            src={dl('og/og-product.png')} svgSrc={dl('og/og-product.svg')}
            label="OG · product / app" meta="1200×630" />
          <DownloadTile
            src={dl('og/og-docs.png')} svgSrc={dl('og/og-docs.svg')}
            label="OG · docs / branding" meta="1200×630" />
          <DownloadTile
            src={dl('og/og-square.png')} svgSrc={dl('og/og-square.svg')}
            label="Square post" meta="1200×1200" aspect="1 / 1" />
        </div>
      </Block>

      {/* Live generator */}
      <Block title="Live social / OG generator" note="Pick a format, edit the copy, download the PNG.">
        <OgGenerator />
      </Block>

      {/* LinkedIn */}
      <Block title="LinkedIn">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 12 }}>
          <DownloadTile
            src={dl('linkedin/li-personal-banner.png')}
            svgSrc={dl('linkedin/li-personal-banner.svg')}
            label="Personal banner" meta="1584×396" aspect="4 / 1" />
          <DownloadTile
            src={dl('linkedin/li-company-banner.png')}
            svgSrc={dl('linkedin/li-company-banner.svg')}
            label="Company page banner" meta="1128×191" aspect="5.9 / 1" />
          <DownloadTile
            src={dl('linkedin/li-company-logo.png')}
            svgSrc={dl('linkedin/li-company-logo.svg')}
            label="Company logo · square" meta="400×400" aspect="1 / 1" />
        </div>
      </Block>

      {/* Twitter/X + Instagram */}
      <Block title="Twitter / X · Instagram">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
          <DownloadTile
            src={dl('twitter/x-header.png')}
            svgSrc={dl('twitter/x-header.svg')}
            label="X · header" meta="1500×500" aspect="3 / 1" />
          <DownloadTile
            src={dl('twitter/x-profile.png')}
            svgSrc={dl('twitter/x-profile.svg')}
            label="X · profile" meta="400×400" aspect="1 / 1" />
          <DownloadTile
            src={dl('instagram/ig-post-1080.png')}
            svgSrc={dl('instagram/ig-post-1080.svg')}
            label="IG · square post" meta="1080×1080" aspect="1 / 1" />
          <DownloadTile
            src={dl('instagram/ig-story-1080x1920.png')}
            svgSrc={dl('instagram/ig-story-1080x1920.svg')}
            label="IG · story" meta="1080×1920" aspect="9 / 16" />
        </div>
      </Block>

      {/* Patterns */}
      <Block title="Patterns" note="Tileable arrow motifs — use as section backgrounds, slide divides, fabric prints.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 12 }}>
          <PatternTile src={dl('patterns/pattern-arrow-subtle-800.png')} label="Subtle · navy on navy" size="200px" />
          <PatternTile src={dl('patterns/pattern-arrow-bold-800.png')} label="Bold · yellow outlines" size="240px" />
          <PatternTile src={dl('patterns/pattern-arrow-grid-800.png')} label="Grid · technical" size="160px" />
          <PatternTile src={dl('patterns/pattern-arrow-paper-800.png')} label="Paper · light" size="120px" />
        </div>
      </Block>

      {/* Backgrounds / wallpapers */}
      <Block title="Desktop & mobile wallpapers">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
          <DownloadTile src={dl('backgrounds/bg-hero-1920.png')} svgSrc={dl('backgrounds/bg-hero-1920.svg')}
            label="Hero · 1920" meta="1920×1080" aspect="16 / 9" />
          <DownloadTile src={dl('backgrounds/bg-hero-2560.png')} svgSrc={dl('backgrounds/bg-hero-2560.svg')}
            label="Hero · 2560" meta="2560×1440" aspect="16 / 9" />
          <DownloadTile src={dl('backgrounds/bg-hero-3840.png')} svgSrc={dl('backgrounds/bg-hero-3840.svg')}
            label="Hero · 4K" meta="3840×2160" aspect="16 / 9" />
          <DownloadTile src={dl('backgrounds/bg-hero-mobile.png')} svgSrc={dl('backgrounds/bg-hero-mobile.svg')}
            label="Hero · mobile" meta="1080×1920" aspect="9 / 16" />
          <DownloadTile src={dl('backgrounds/bg-minimal-2560.png')} svgSrc={dl('backgrounds/bg-minimal-2560.svg')}
            label="Minimal · mark only" meta="2560×1440" aspect="16 / 9" />
        </div>
      </Block>

      {/* Zoom */}
      <Block title="Zoom, Teams & Meet backgrounds">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12 }}>
          <DownloadTile src={dl('zoom/zoom-light-1920x1080.png')} svgSrc={dl('zoom/zoom-light-1920x1080.svg')}
            label="Zoom · light" meta="1920×1080" aspect="16 / 9" />
          <DownloadTile src={dl('zoom/zoom-dark-1920x1080.png')} svgSrc={dl('zoom/zoom-dark-1920x1080.svg')}
            label="Zoom · dark" meta="1920×1080" aspect="16 / 9" />
        </div>
      </Block>

      {/* Email + presentation */}
      <Block title="Email & presentation">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 12 }}>
          <DownloadTile src={dl('email/email-signature.png')} svgSrc={dl('email/email-signature.svg')}
            label="Email signature · 1x" meta="600×160" aspect="3.75 / 1" />
          <DownloadTile src={dl('email/email-signature-2x.png')} svgSrc={dl('email/email-signature.svg')}
            label="Email signature · retina" meta="1200×320" aspect="3.75 / 1" />
          <DownloadTile src={dl('presentation/title-slide-16x9.png')} svgSrc={dl('presentation/title-slide-16x9.svg')}
            label="Title slide · 16:9" meta="1920×1080" aspect="16 / 9" />
          <DownloadTile src={dl('presentation/divider-slide-16x9.png')} svgSrc={dl('presentation/divider-slide-16x9.svg')}
            label="Section divider · 16:9" meta="1920×1080" aspect="16 / 9" />
        </div>
      </Block>

      {/* Developer — tokens export */}
      <Block title="For developers" note="Drop-in token files for CSS, Tailwind and design-token pipelines.">
        <TokensExport />
      </Block>

      {/* Link to manifest */}
      <Block>
        <Card variant="inset" pad={20} style={{
          display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap',
        }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Machine-readable manifest</div>
            <div style={{ fontSize: 13, color: 'var(--text-tertiary)', marginTop: 4 }}>
              A JSON index of every asset on this page, for automation and coding agents.
            </div>
          </div>
          <a href={dl('downloads.json')} download style={{
            fontSize: 13, fontWeight: 600, padding: '8px 14px', borderRadius: 8,
            background: 'var(--brand-600)', color: '#fff', textDecoration: 'none',
            border: '1px solid var(--brand-700)',
          }}>↓ downloads.json</a>
        </Card>
      </Block>
    </Section>
  );
}

window.S_Assets = S_Assets;