// Bento Prototype — full-page working homepage with tweakable palette, density, copy.

const {
  useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakText, TweakButton,
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#1a1a1f", "#f5b042", "#f4a8a0", "#d4f25c"],
  "bg": "#fafaf6",
  "accentFont": "serif",
  "density": "normal",
  "tileRadius": 22,
  "heroCopy": "none"
}/*EDITMODE-END*/;

// Curated palette sets
const PALETTES = [
  ['#1a1a1f', '#f5b042', '#f4a8a0', '#d4f25c'],   // default — dark + amber + rose + lime
  ['#0f766e', '#fbbf24', '#f87171', '#a78bfa'],   // jewel — teal + amber + coral + violet
  ['#1c1c1e', '#e5e5e5', '#fafafa', '#c9c9c9'],   // mono — grayscale
  ['#3730a3', '#fb923c', '#fcd34d', '#5eead4'],   // vivid — indigo + orange + yellow + teal
  ['#7c3aed', '#fcd34d', '#86efac', '#fda4af'],   // candy — purple + yellow + green + pink
];

const BG_OPTIONS = ['#f4f1ea', '#fafaf6', '#ebebeb', '#0e0e10', '#fff5e6'];

const HERO_COPIES = {
  entry: {
    badge: '4 个工作台 · 日常营业中',
    headlineA: '这里是',
    headlineB: '三千',
    headlineC: '的工作台。',
    body: '项目管理看板、活动视觉提示词、婚礼提示词、Claude Code UI — 我们的四个产品，挑一个打开开始今天的工作。',
  },
  story: {
    badge: '合肥 · 一支用 AI 干活的小队',
    headlineA: '我们用 AI，',
    headlineB: '把创意',
    headlineC: '落到真实工作里。',
    body: '活动公司用我们生成主视觉，婚礼策划用我们写提示词，团队用我们排看板，开发者用我们写代码。四个工作台，全在线。',
  },
  candid: {
    badge: 'Made in Hefei · 自己用 · 也给你用',
    headlineA: '四个工具，',
    headlineB: '我们',
    headlineC: '每天自己都在用。',
    body: '不卖订阅，不发新闻稿。合肥一支几个人的技术小队，做了四个 AI 工作台 — 自己离不开，也开放给你。',
  },
  pro: {
    badge: 'EST. 2024 · 4 STUDIOS · 1 PLATFORM',
    headlineA: '三千传媒的',
    headlineB: 'AI',
    headlineC: '工作台矩阵。',
    body: 'Project Management · Event Visual · Wedding Prompts · Claude Code — 四个 AI 驱动的工作台，覆盖团队协作、活动视觉、婚礼策划与移动开发四个场景。',
  },
};

const DENSITY = {
  compact:  { padX: 32, gap: 10, tileP: 22, tileRow: 160 },
  normal:   { padX: 56, gap: 14, tileP: 28, tileRow: 180 },
  spacious: { padX: 80, gap: 20, tileP: 34, tileRow: 210 },
};

const fonts = {
  display: '"Space Grotesk", -apple-system, system-ui, sans-serif',
  sans: '"Noto Sans SC", "Space Grotesk", -apple-system, system-ui, sans-serif',
  serif: '"Instrument Serif", Georgia, serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

// Helper to derive readable text + 'deep' accent on a tile color
function readableInk(hex) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0,2), 16), g = parseInt(h.slice(2,4), 16), b = parseInt(h.slice(4,6), 16);
  const L = (0.299*r + 0.587*g + 0.114*b);
  return L > 160 ? '#0e0e10' : '#fafaf6';
}
function shade(hex, amount) {
  // amount in [-1,1]; negative = darker
  const h = hex.replace('#', '');
  let r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  const f = (v) => Math.max(0, Math.min(255, Math.round(amount > 0 ? v + (255-v)*amount : v + v*amount)));
  return '#' + [f(r),f(g),f(b)].map(v=>v.toString(16).padStart(2,'0')).join('');
}

// iOS Segmented Control-style tabs with sliding indicator.
function NavTabs({ items, containerBg, activeBg, activeColor, idleColor }) {
  const [active, setActive] = React.useState(0);
  const [indicator, setIndicator] = React.useState({ left: 0, width: 0, ready: false });
  const containerRef = React.useRef(null);
  const itemRefs = React.useRef([]);

  const measure = React.useCallback(() => {
    const el = itemRefs.current[active];
    const wrap = containerRef.current;
    if (!el || !wrap) return;
    const wr = wrap.getBoundingClientRect();
    const er = el.getBoundingClientRect();
    setIndicator({ left: er.left - wr.left, width: er.width, ready: true });
  }, [active]);

  React.useLayoutEffect(() => { measure(); }, [measure, items]);
  React.useEffect(() => {
    const onResize = () => measure();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [measure]);

  return (
    <div ref={containerRef} style={{
      position: 'relative', display: 'inline-flex', gap: 4,
      background: containerBg, padding: 4, borderRadius: 99,
    }}>
      <div style={{
        position: 'absolute', top: 4, bottom: 4,
        left: indicator.left, width: indicator.width,
        background: activeBg, borderRadius: 99,
        transition: indicator.ready
          ? 'left .42s cubic-bezier(.45,.05,.25,1), width .42s cubic-bezier(.45,.05,.25,1)'
          : 'none',
        willChange: 'left, width',
      }} />
      {items.map((label, i) => (
        <span
          key={label}
          ref={(el) => (itemRefs.current[i] = el)}
          onClick={() => setActive(i)}
          style={{
            position: 'relative', zIndex: 1,
            padding: '8px 16px', borderRadius: 99,
            fontSize: 13, fontWeight: 500, cursor: 'pointer',
            color: i === active ? activeColor : idleColor,
            transition: 'color .3s ease',
            userSelect: 'none',
          }}
        >
          {label}
        </span>
      ))}
    </div>
  );
}

// 3D tilt hover hook — gives a ref + handlers; pass isMobile=true to skip.
function useTilt(maxDeg = 5, isMobile = false) {
  const ref = React.useRef(null);
  const onMouseMove = (e) => {
    if (isMobile || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    const ry = (px - 0.5) * 2 * maxDeg;
    const rx = -(py - 0.5) * 2 * maxDeg;
    ref.current.style.setProperty('--tilt-x', `${rx}deg`);
    ref.current.style.setProperty('--tilt-y', `${ry}deg`);
  };
  const onMouseLeave = () => {
    if (!ref.current) return;
    ref.current.style.setProperty('--tilt-x', '0deg');
    ref.current.style.setProperty('--tilt-y', '0deg');
  };
  return [ref, { onMouseMove, onMouseLeave }];
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const bgIsDark = readableInk(t.bg) === '#fafaf6';
  const ink = bgIsDark ? '#fafaf6' : '#0e0e10';
  const inkSoft = bgIsDark ? 'rgba(250,250,246,0.72)' : '#3c3c40';
  const inkMute = bgIsDark ? 'rgba(250,250,246,0.45)' : '#85857e';
  const cream = bgIsDark ? '#1c1c20' : '#fcf7ec';
  const subtleBg = bgIsDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)';
  const d = DENSITY[t.density];
  const heroCopy = t.heroCopy === 'none' ? null : HERO_COPIES[t.heroCopy];
  const palette = t.palette;

  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth < 768
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const padX = isMobile ? 18 : d.padX;
  const tileP = isMobile ? 22 : d.tileP;

  // 4 product tiles each get a color from palette
  const tiles = [
    { id: 'pm', tag: '01 / PM', cn: '项目管理', cn2: '可视化看板', en: 'Project Management',
      blurb: '高效驱动团队协作。', color: palette[0],
      url: 'pm.hf3chains.com', href: 'pm.hfsanqian.com', span: { col: 3, row: 2 }, kind: 'pm' },
    { id: 'event', tag: '02 / EVENT', cn: '活动视觉', cn2: '提示词工作台', en: 'Event Visual Studio',
      blurb: 'AI 驱动，快速生成高质量活动视觉方案。', color: palette[1],
      url: 'event.hf3chains.com', href: 'event.hfsanqian.com', span: { col: 3, row: 2 }, kind: 'event' },
    { id: 'wedding', tag: '03 / WED', cn: '婚礼提示词', cn2: '工作台', en: 'Wedding Prompt Studio',
      blurb: '为每一对新人，打造专属视觉记忆。', color: palette[2],
      url: 'wedding.hf3chains.com', href: 'wedding.hfsanqian.com', span: { col: 2, row: 2 }, kind: 'wedding' },
    { id: 'code', tag: '04 / CODE', cn: 'Claude Code', cn2: 'AI 编程助手', en: 'Claude Code UI',
      blurb: '把开发流，揣进衣兜里。', color: palette[3],
      url: 'claude.hf3chains.com', span: { col: 2, row: 2 }, kind: 'code' },
  ];

  return (
    <div style={{ background: t.bg, color: ink, fontFamily: fonts.sans, minHeight: '100vh', transition: 'background .4s' }}>
      <style>{`
        @keyframes tileIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
        .tile {
          position: relative;
          transform-style: preserve-3d;
          transform: perspective(1000px) rotateX(0) rotateY(0) scale(1);
          transition: transform .45s cubic-bezier(.2,.7,.3,1),
                      box-shadow .5s cubic-bezier(.2,.7,.3,1);
          will-change: transform;
          animation: tileIn .7s cubic-bezier(.2,.7,.3,1) both;
          cursor: pointer;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }
        .tile.decorative { cursor: default; }
        .tile:hover {
          transform: perspective(1000px)
                     rotateX(var(--tilt-x, 0deg))
                     rotateY(var(--tilt-y, 0deg))
                     scale(1.015);
          box-shadow:
            0 22px 50px -14px rgba(0,0,0,0.22),
            0 8px 16px -6px rgba(0,0,0,0.10);
          transition: transform .22s cubic-bezier(.2,.7,.3,1),
                      box-shadow .4s ease;
        }
        .tile .cta { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
        .tile:hover .cta { opacity: 1; transform: none; }
        .tile .arrow { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
        .tile:hover .arrow { transform: translate(4px, -4px); }
        .fadeup { animation: fadeUp .7s cubic-bezier(.2,.7,.3,1) both; }
        .pill-tab:hover { background: rgba(0,0,0,0.04); }
        .btn-primary { transition: transform .15s, box-shadow .2s; }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
        @media (hover: none) {
          .tile:hover { transform: perspective(1000px) rotateX(0) rotateY(0) scale(1); box-shadow: none; }
          .tile:active { transform: perspective(1000px) rotateX(0) rotateY(0) scale(0.98); }
        }
      `}</style>

      {/* NAV */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr auto 1fr',
        alignItems: 'center', justifyItems: isMobile ? 'center' : 'stretch',
        rowGap: 12,
        padding: `${isMobile ? 18 : 24}px ${padX}px`,
      }} className="fadeup">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifySelf: isMobile ? 'center' : 'start' }}>
          <img src="logo.png" alt="三千传媒" style={{ width: 36, height: 36, objectFit: 'contain' }} />
          <div style={{ fontFamily: fonts.display, fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1 }}>
            三千传媒
          </div>
        </div>
        <div style={{ justifySelf: 'center' }}>
          <NavTabs
            items={['工作台', '关于', '案例']}
            containerBg={subtleBg}
            activeBg={ink}
            activeColor={t.bg}
            idleColor={inkSoft}
          />
        </div>
        {!isMobile && <div />}
      </div>

      {/* HERO — only when heroCopy is selected */}
      {heroCopy ? (
        <div style={{ padding: '60px 56px 36px', textAlign: 'center', maxWidth: 1100, margin: '0 auto' }} className="fadeup">
          <div style={{
            display: 'inline-flex', gap: 8, alignItems: 'center', padding: '6px 14px',
            borderRadius: 99, background: subtleBg, fontSize: 12, marginBottom: 24,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: palette[3] }} />
            <span style={{ color: inkSoft }}>{heroCopy.badge}</span>
          </div>
          <h1 style={{
            fontFamily: fonts.display, fontSize: 92, fontWeight: 500, letterSpacing: '-0.04em',
            lineHeight: 1, margin: '0 0 22px',
          }}>
            {heroCopy.headlineA}<br />
            <span style={{
              fontFamily: t.accentFont === 'serif' ? fonts.serif : fonts.display,
              fontStyle: t.accentFont === 'serif' ? 'italic' : 'normal',
              fontWeight: t.accentFont === 'serif' ? 400 : 500,
            }}>{heroCopy.headlineB}</span>
            {' '}{heroCopy.headlineC}
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: inkSoft, maxWidth: 620, margin: '0 auto' }}>
            {heroCopy.body}
          </p>
        </div>
      ) : (
        // Minimal status strip — facts only, no marketing copy
        <div style={{
          padding: `${isMobile ? 16 : 28}px ${padX}px 12px`, display: 'flex',
          justifyContent: 'space-between', alignItems: 'center',
          flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 8 : 0,
          maxWidth: 1500, margin: '0 auto',
          fontFamily: fonts.mono, fontSize: 11, color: inkMute, letterSpacing: '0.1em',
        }} className="fadeup">
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', boxShadow: '0 0 8px #4ade8088' }} />
            4 STUDIOS · LIVE
          </span>
          <span style={{ display: 'flex', gap: 24 }}>
            <span>HEFEI / EST. 2016</span>
          </span>
        </div>
      )}

      {/* BENTO */}
      <div style={{
        padding: `20px ${padX}px 40px`,
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(6, 1fr)',
        gridAutoRows: isMobile ? 'minmax(220px, auto)' : `${d.tileRow}px`,
        gap: d.gap,
        maxWidth: 1500, margin: '0 auto',
      }}>
        {tiles.map((tile, i) => (
          <ProductTile key={tile.id} tile={tile} idx={i} d={d} tileP={tileP} isMobile={isMobile} radius={t.tileRadius} accentFont={t.accentFont} ink={ink} bg={t.bg} />
        ))}

        {/* Stat tile */}
        <SmallTile delay={420} radius={t.tileRadius} d={d} isMobile={isMobile} bg={cream} ink={ink}>
          <div style={{ fontFamily: fonts.display, fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1 }}>
            3000<span style={{ color: shade(palette[1], -0.3) }}>+</span>
          </div>
          <div style={{ fontSize: 12, color: inkMute, marginTop: 6, letterSpacing: '0.05em' }}>
            场活动的专业呈现
          </div>
        </SmallTile>

        {/* Quote tile */}
        <SmallTile delay={500} radius={t.tileRadius} d={d} isMobile={isMobile} bg="#0f766e" ink="#fcf7ec">
          <div style={{ fontFamily: fonts.serif, fontSize: 24, fontStyle: 'italic', lineHeight: 1.3, fontWeight: 400 }}>
            "Less, but<br/>better made."
          </div>
          <div style={{ marginTop: 'auto', fontSize: 10.5, fontFamily: fonts.mono, opacity: 0.75, letterSpacing: '0.1em' }}>
            — STUDIO CREDO
          </div>
        </SmallTile>

        {/* Contact tile */}
        <SmallTile delay={580} radius={t.tileRadius} d={d} isMobile={isMobile} bg="#3730a3" ink="#fcf7ec">
          <div style={{ fontFamily: fonts.mono, fontSize: 10.5, opacity: 0.7, letterSpacing: '0.1em' }}>
            CONTACT
          </div>
          <div style={{ fontFamily: fonts.display, fontSize: 22, fontWeight: 500, marginTop: 8, lineHeight: 1.2, letterSpacing: '-0.01em' }}>
            hello@<br/>hf3chains.com
          </div>
          <div style={{ marginTop: 'auto', fontSize: 12, opacity: 0.7 }}>
            合肥 · 中国 · 日常营业中
          </div>
        </SmallTile>
      </div>

      {/* FOOTER */}
      <div style={{
        padding: `24px ${padX}px 36px`, display: 'flex',
        justifyContent: isMobile ? 'center' : 'space-between',
        alignItems: 'center', textAlign: isMobile ? 'center' : 'left',
        fontSize: 12, color: inkMute,
        borderTop: `1px solid ${subtleBg}`, marginTop: 20, flexWrap: 'wrap', gap: 12,
        flexDirection: isMobile ? 'column' : 'row',
      }}>
        <span>© 2026 三千传媒 · 3CHAINS MEDIA</span>
        <span style={{ fontFamily: fonts.mono, letterSpacing: '0.05em', display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>
            皖ICP备2024039323号
          </a>
          <span style={{ opacity: 0.5 }}>|</span>
          <a href="https://beian.mps.gov.cn/#/query/webSearch?code=34010302002692" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <img src="beian-icon.png" alt="" style={{ width: 14, height: 14, verticalAlign: 'middle' }} />
            皖公网安备34010302002692号
          </a>
        </span>
      </div>

      {/* TWEAKS */}
      <TweaksPanel title="Tweaks · Bento">
        <TweakSection label="Look">
          <TweakColor
            label="Tile palette"
            value={t.palette}
            options={PALETTES}
            onChange={(v) => setTweak('palette', v)}
          />
          <TweakColor
            label="Background"
            value={t.bg}
            options={BG_OPTIONS}
            onChange={(v) => setTweak('bg', v)}
          />
          <TweakRadio
            label="Accent font"
            value={t.accentFont}
            options={[{ label: 'Serif italic', value: 'serif' }, { label: 'Sans', value: 'sans' }]}
            onChange={(v) => setTweak('accentFont', v)}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            options={[
              { label: '紧凑', value: 'compact' },
              { label: '标准', value: 'normal' },
              { label: '宽松', value: 'spacious' },
            ]}
            onChange={(v) => setTweak('density', v)}
          />
          <TweakRadio
            label="Tile radius"
            value={t.tileRadius}
            options={[{ label: '直角', value: 4 }, { label: '柔和', value: 22 }, { label: '圆润', value: 36 }]}
            onChange={(v) => setTweak('tileRadius', v)}
          />
        </TweakSection>
        <TweakSection label="Content">
          <TweakRadio
            label="Hero copy"
            value={t.heroCopy}
            options={[
              { label: '无', value: 'none' },
              { label: '入口', value: 'entry' },
              { label: '故事', value: 'story' },
              { label: '大白话', value: 'candid' },
              { label: '正式', value: 'pro' },
            ]}
            onChange={(v) => setTweak('heroCopy', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function ProductTile({ tile, idx, d, tileP, isMobile, radius, accentFont, ink, bg }) {
  const fg = readableInk(tile.color);
  const deep = shade(tile.color, fg === '#fafaf6' ? 0.35 : -0.32);
  const subtle = fg === '#fafaf6' ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.55)';
  const [tiltRef, tiltHandlers] = useTilt(5, isMobile);
  return (
    <a ref={tiltRef} {...tiltHandlers} className="tile" href={`https://${tile.href || tile.url}`} target="_blank" rel="noopener" style={{
      gridColumn: isMobile ? 'span 1' : `span ${tile.span.col}`,
      gridRow: isMobile ? 'span 1' : `span ${tile.span.row}`,
      minHeight: isMobile ? 240 : 'auto',
      background: tile.color, color: fg, textDecoration: 'none',
      borderRadius: radius, padding: tileP || d.tileP, position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      animationDelay: `${100 + idx * 80}ms`,
    }}>
      {/* Subtle inner glow on hover */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        position: 'relative', zIndex: 2,
      }}>
        <span style={{ fontFamily: fonts.mono, fontSize: 11, opacity: 0.6, letterSpacing: '0.1em' }}>
          {tile.tag}
        </span>
        <span className="arrow" style={{ fontSize: 22, opacity: 0.85, display: 'inline-block' }}>↗</span>
      </div>

      {/* Mini preview illustration */}
      {!isMobile && <TileIllustration kind={tile.kind} fg={fg} deep={deep} tileColor={tile.color} />}

      <div style={{ marginTop: 'auto', position: 'relative', zIndex: 2 }}>
        <div style={{
          fontFamily: fonts.display,
          fontSize: isMobile ? 28 : (tile.span.col >= 3 ? 38 : 26),
          fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05,
        }}>
          {tile.cn}{tile.cn2 && <><br/>{tile.cn2}</>}
        </div>
        <div style={{ fontSize: isMobile ? 13 : (tile.span.col >= 3 ? 14 : 12.5), opacity: 0.7, marginTop: 12, lineHeight: 1.5 }}>
          {tile.blurb}
        </div>
        <div className="cta" style={{
          marginTop: 14, display: 'flex', alignItems: 'center', gap: 10, fontSize: 12,
          fontFamily: fonts.mono, letterSpacing: '0.05em',
        }}>
          <span style={{
            background: fg, color: tile.color, padding: '5px 11px', borderRadius: 99,
            fontWeight: 600,
          }}>立即使用</span>
          <span style={{ opacity: 0.7 }}>{tile.url}</span>
        </div>
      </div>
    </a>
  );
}

function TileIllustration({ kind, fg, deep, tileColor }) {
  const t = readableInk(tileColor); // text color
  const trans = t === '#fafaf6';
  if (kind === 'pm') {
    return (
      <div style={{ position: 'absolute', top: 56, right: 28, display: 'flex', gap: 6 }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            width: 56, height: 78, background: trans ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',
            borderRadius: 6, padding: 6, display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div style={{ height: 7, background: i === 1 ? '#d4f25c' : (trans ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.2)'), borderRadius: 2 }} />
            <div style={{ height: 7, background: trans ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)', borderRadius: 2 }} />
            <div style={{ height: 7, background: trans ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)', borderRadius: 2, width: '60%' }} />
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'event') {
    return (
      <svg style={{ position: 'absolute', top: 48, right: 24 }} width="150" height="120" viewBox="0 0 150 120">
        <circle cx="45" cy="45" r="32" fill={deep} opacity="0.55" />
        <rect x="70" y="22" width="55" height="55" fill={trans ? 'rgba(255,255,255,0.7)' : '#fcf7ec'} opacity="0.85" />
        <path d="M 20 95 L 65 60 L 110 95" stroke={fg} strokeWidth="2" fill="none" />
        <circle cx="65" cy="60" r="4" fill={fg} />
      </svg>
    );
  }
  if (kind === 'wedding') {
    return (
      <div style={{
        position: 'absolute', top: '36%', left: '50%', transform: 'translate(-50%, -50%)',
        fontFamily: fonts.serif, fontSize: 110, color: deep, lineHeight: 1,
      }}>♥</div>
    );
  }
  // code
  return (
    <div style={{
      background: 'rgba(0,0,0,0.6)', color: '#d4f25c', borderRadius: 8, padding: 12,
      fontFamily: fonts.mono, fontSize: 10.5, marginTop: 14, lineHeight: 1.5,
    }}>
      <div style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 4 }}>~ claude session</div>
      <div>$ build the dream</div>
      <div style={{ color: 'rgba(255,255,255,0.5)' }}>✓ ready in 0.2s</div>
      <div>_<span style={{ background: '#d4f25c', color: '#0e0e10', padding: '0 2px' }}>▌</span></div>
    </div>
  );
}

function SmallTile({ children, delay, radius, d, isMobile, bg, ink }) {
  const [tiltRef, tiltHandlers] = useTilt(5, isMobile);
  return (
    <div ref={tiltRef} {...tiltHandlers} className="tile decorative" style={{
      gridColumn: isMobile ? 'span 1' : 'span 2',
      minHeight: isMobile ? 180 : 'auto',
      background: bg, color: ink, borderRadius: radius,
      padding: 22, display: 'flex', flexDirection: 'column',
      animationDelay: `${delay}ms`,
    }}>
      {children}
    </div>
  );
}

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