// Hero.jsx — Demo hero: Photoshop → Terminal → Product
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function StagePhotoshop() {
  return (
    <div style={ps.root}>
      <div style={ps.titlebar}>
        <span>Untitled-1.psd @ 100% (Layer 1, RGB/8) *</span>
        <span style={ps.tbBtns}><i style={ps.tbBtn}>_</i><i style={ps.tbBtn}>□</i><i style={{ ...ps.tbBtn, background: '#c33', color: '#fff' }}>×</i></span>
      </div>
      <div style={ps.body}>
        <div style={ps.tools}>
          {['◢', '✱', '▭', '○', '✎', 'T', '◐', '✂', '⌧', '◇'].map((t, i) =>
          <div key={i} style={{ ...ps.tool, ...(i === 5 ? ps.toolActive : null) }}>{t}</div>
          )}
        </div>
        <div style={ps.canvas}>
          <div style={ps.psPage}>
            <div style={ps.psHeader}>
              <div style={ps.psLogo}>★ MyWebSite</div>
              <div style={ps.psNav}><span>Home</span><span>About</span><span>Products</span><span>Contact!!</span></div>
            </div>
            <div style={ps.psHero}>
              <div style={ps.psHeroTxt}>
                <div style={ps.psH1}>WELCOME!</div>
                <div style={ps.psH2}>Best Solutions for Your Business</div>
                <div style={ps.psBtn}>Click Here →</div>
              </div>
              <div style={ps.psHeroImg}>
                <div style={{ position: 'absolute', inset: 0, background: 'conic-gradient(from 30deg, #ffd, #fc6, #f96, #ffd)' }} />
                <div style={{ position: 'relative', zIndex: 1, fontFamily: '"Comic Sans MS",cursive', fontSize: 10, color: '#222', textShadow: '1px 1px 0 #fff' }}>3D MAN</div>
              </div>
            </div>
            <div style={ps.psBoxes}>
              {['Quality', 'Service', 'Support'].map((t, i) =>
              <div key={i} style={ps.psBox}>
                  <div style={{ fontSize: 14 }}>✓</div>
                  <div style={{ fontWeight: 700, fontSize: 8, marginTop: 1 }}>{t}</div>
                  <div style={{ fontSize: 7, color: '#555', marginTop: 1 }}>Lorem ipsum</div>
                </div>
              )}
            </div>
          </div>
          <div style={ps.ants} />
        </div>
        <div style={ps.layers}>
          <div style={ps.layHd}>Layers</div>
          {['Header', 'Hero BG', 'Buttons', 'Text', 'Logo', 'Bg'].map((l, i) =>
          <div key={i} style={{ ...ps.layRow, ...(i === 2 ? ps.layActive : null) }}>
              <span>👁</span><span style={ps.layThumb} /><span style={{ flex: 1 }}>{l}</span>
            </div>
          )}
        </div>
      </div>
      <div style={ps.statusbar}>Doc: 2.3M / 8.7M  ▸  Click and drag to make a selection</div>
    </div>);

}

function StageTerminal({ active }) {
  const lines = [
  { t: '$ npx create-next-app stepvoy', d: 60 },
  { t: '✓ TypeScript … Yes', d: 50 },
  { t: '✓ Tailwind CSS  … Yes', d: 50 },
  { t: '✓ App Router    … Yes', d: 50 },
  { t: '$ git remote add origin', d: 60 },
  { t: '  github.com/anthonystepvoy/stepvoy.git', d: 30, dim: true },
  { t: '$ npm run dev', d: 70 },
  { t: '▸ ready on http://localhost:3000', d: 60, ok: true },
  { t: '$ vercel --prod', d: 80 },
  { t: '✓ Deployed', d: 60, ok: true }];

  const [shown, setShown] = useStateH(0);
  const [partial, setPartial] = useStateH('');
  useEffectH(() => {
    if (!active) {setShown(0);setPartial('');return;}
    let cancelled = false;let i = 0;
    async function run() {
      while (!cancelled && i < lines.length) {
        const line = lines[i];
        for (let c = 0; c <= line.t.length; c++) {
          if (cancelled) return;
          setPartial(line.t.slice(0, c));
          await new Promise((r) => setTimeout(r, 14 + Math.random() * 18));
        }
        if (cancelled) return;
        setShown(i + 1);setPartial('');
        await new Promise((r) => setTimeout(r, line.d || 50));
        i++;
      }
    }
    run();
    return () => {cancelled = true;};
  }, [active]);
  return (
    <div style={tm.root}>
      <div style={tm.bar}>
        <span style={{ ...tm.dot, background: '#ff5f57' }} />
        <span style={{ ...tm.dot, background: '#febc2e' }} />
        <span style={{ ...tm.dot, background: '#28c840' }} />
        <span style={tm.title}>~/projects/stepvoy — zsh</span>
      </div>
      <div style={tm.body}>
        {lines.slice(0, shown).map((l, i) =>
        <div key={i} style={{ color: l.ok ? '#7CFF6B' : l.dim ? '#888' : '#e8e8e8' }}>{l.t}</div>
        )}
        {shown < lines.length &&
        <div style={{ color: '#e8e8e8' }}>{partial}<span style={tm.caret}>▌</span></div>
        }
      </div>
    </div>);

}

function StageProduct({ active }) {
  const [chartT, setChartT] = useStateH(0);
  useEffectH(() => {
    if (!active) {setChartT(0);return;}
    let raf,t0 = performance.now();
    function tick(now) {
      const t = Math.min(1, (now - t0) / 1200);
      setChartT(t);
      if (t < 1) raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active]);
  const pts = [12, 18, 14, 22, 20, 28, 24, 34, 30, 40, 38, 46, 50, 58, 62];
  const w = 320,h = 90,max = Math.max(...pts),min = Math.min(...pts);
  const path = pts.map((v, i) => {
    const x = i / (pts.length - 1) * w;
    const y = h - (v - min) / (max - min) * h * 0.85 - 6;
    return (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1);
  }).join(' ');
  const area = path + ` L ${w},${h} L 0,${h} Z`;
  return (
    <div style={pr.root}>
      <div style={pr.side}>
        <div style={pr.brand}><div style={pr.brandMark} /><span style={pr.brandTxt}>Stepvoy</span></div>
        {[['◇', 'Overview', true], ['☰', 'Projects', false], ['◐', 'Analytics', false], ['◇', 'Settings', false]].map(([g, l, a], i) =>
        <div key={i} style={{ ...pr.nav, ...(a ? pr.navActive : null) }}>
            <span style={pr.navIcon}>{g}</span><span>{l}</span>
          </div>
        )}
      </div>
      <div style={pr.main}>
        <div style={pr.topbar}>
          <div>
            <div style={pr.crumbs}>Home / Overview</div>
            <div style={pr.h1}>Good morning, Anthony</div>
          </div>
          <div style={pr.userBox}><div style={pr.userDot} /><span>AS</span></div>
        </div>
        <div style={pr.kpis}>
          {[['Revenue', '$24,580', '12.4%'], ['Users', '3,218', '8.1%'], ['Sessions', '11.2K', '4.6%']].map(([l, v, t], i) =>
          <div key={i} style={pr.kpi}>
              <div style={pr.kpiLbl}>{l}</div>
              <div style={pr.kpiVal}>{v}</div>
              <div style={{ ...pr.kpiTrend, color: '#16a34a' }}>↗ {t}</div>
            </div>
          )}
        </div>
        <div style={pr.chart}>
          <div style={pr.chartHd}>
            <span>Performance</span>
            <span style={pr.chartTabs}>
              <span style={pr.chartTabActive}>7d</span><span>30d</span><span>90d</span>
            </span>
          </div>
          <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="90" preserveAspectRatio="none" style={{ display: 'block' }}>
            <defs>
              <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#0a0a0a" stopOpacity=".18" />
                <stop offset="1" stopColor="#0a0a0a" stopOpacity="0" />
              </linearGradient>
              <clipPath id="cl1"><rect x="0" y="0" width={w * chartT} height={h} /></clipPath>
            </defs>
            <g clipPath="url(#cl1)">
              <path d={area} fill="url(#g1)" />
              <path d={path} fill="none" stroke="#0a0a0a" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </g>
          </svg>
        </div>
      </div>
    </div>);

}

function HeroDemo() {
  const [stage, setStage] = useStateH(0);
  const [trans, setTrans] = useStateH(false);
  useEffectH(() => {
    let cancelled = false;
    const durations = [4200, 5400, 4800];
    function next() {
      if (cancelled) return;
      setTrans(true);
      setTimeout(() => {
        if (cancelled) return;
        setStage((s) => (s + 1) % 3);
        setTrans(false);
      }, 320);
    }
    const id = setTimeout(next, durations[stage]);
    return () => {cancelled = true;clearTimeout(id);};
  }, [stage]);
  const labels = ['Photoshop · the past', 'Terminal · the craft', 'Product · the result'];
  return (
    <div style={hd.shell}>
      <div style={hd.frame}>
        <div style={hd.viewport}>
          <div style={{ ...hd.stage, opacity: stage === 0 ? 1 : 0, transform: stage === 0 ? 'scale(1)' : 'scale(.96)' }}><StagePhotoshop /></div>
          <div style={{ ...hd.stage, opacity: stage === 1 ? 1 : 0, transform: stage === 1 ? 'scale(1)' : 'scale(.96)' }}><StageTerminal active={stage === 1} /></div>
          <div style={{ ...hd.stage, opacity: stage === 2 ? 1 : 0, transform: stage === 2 ? 'scale(1)' : 'scale(.96)' }}><StageProduct active={stage === 2} /></div>
          <div style={{ ...hd.wipe, transform: trans ? 'translateX(0)' : 'translateX(-101%)' }} />
        </div>
        <div style={hd.meta}>
          <div style={hd.metaLeft}>
            <div style={hd.dots}>
              {[0, 1, 2].map((i) =>
              <button key={i} aria-label={labels[i]}
              onClick={() => {setTrans(true);setTimeout(() => {setStage(i);setTrans(false);}, 320);}}
              style={{ ...hd.dot, ...(i === stage ? hd.dotActive : null) }} />
              )}
            </div>
            <span style={hd.metaLabel}>{labels[stage]}</span>
          </div>
          <div style={hd.metaRight}><span style={{ color: '#7CFF6B' }}>●</span>&nbsp;same person · 12 yrs</div>
        </div>
      </div>
    </div>);

}

function Hero() {
  const [time, setTime] = useStateH(() => fmtTime(new Date()));
  useEffectH(() => {
    const id = setInterval(() => setTime(fmtTime(new Date())), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <header style={styH.root}>
      <div style={styH.bgGrid} aria-hidden />
      <div style={styH.vignette} aria-hidden />
      <div className="wrap" style={styH.wrap}>
        <div style={styH.split}>
          <div style={styH.copy}>
            <h1 style={styH.h1}>
              <span style={styH.h1Strong}>Designs it.</span><br />
              <span style={styH.h1Soft}>Then builds it.</span>
            </h1>
            <p style={styH.lede}>
              Anthony Stepvoy — designer turned full-stack builder.
              Products end-to-end: from the first sketch to production deploy.
            </p>
            <div style={styH.byline}>
              <BylineCol k="DOES" v="UI/UX · Frontend · Full-stack" />
              <BylineCol k="STACK" v="React · TS · Solana" />
              <BylineCol k="STATUS" v={<><span style={styH.live} /> Shipping</>} />
            </div>
            <div style={styH.ctas}>
              <a href="#projects" style={styH.btnPri} className="hero-btn-pri">
                <span>View projects</span>
                <span className="arr" style={styH.btnArrow}>↗</span>
              </a>
              <a href="https://github.com/anthonystepvoy" target="_blank" rel="noreferrer" style={styH.btnSec}>
                <span>GitHub</span><span style={{ color: 'var(--ink-3)' }}>↗</span>
              </a>
            </div>
          </div>
          <div style={styH.demoCol}><HeroDemo /></div>
        </div>
        <div style={styH.foot}>
          <div style={styH.stats}>
            <Stat n="$100K+" label="Earned · Upwork" />
            <Stat n="25K+" label="Audience" />
            <Stat n="40+" label="Projects shipped" />
            <Stat n="5y" label="Building" />
          </div>
        </div>
      </div>
      <a href="#projects" className="mono" style={styH.scroll} aria-label="Scroll">
        <span>scroll</span><span style={styH.scrollLine} />
      </a>
    </header>);

}

function BylineCol({ k, v }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>{k}</div>
      <div style={{ fontSize: 14, color: 'var(--ink)', display: 'flex', alignItems: 'center', gap: 8 }}>{v}</div>
    </div>);

}
function Stat({ n, label }) {
  return (
    <div style={styH.stat}>
      <div style={styH.statN}>{n}</div>
      <div className="mono" style={styH.statL}>{label}</div>
    </div>);

}

const styH = {
  root: { position: 'relative', minHeight: '100vh', overflow: 'hidden', borderBottom: '1px solid var(--rule)' },
  bgGrid: { position: 'absolute', inset: 0, zIndex: 0, opacity: .35,
    backgroundImage: `radial-gradient(circle, rgba(245,245,240,.18) 1px, transparent 1px)`,
    backgroundSize: '28px 28px' },
  vignette: { position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
    background: 'radial-gradient(ellipse at 65% 50%, transparent 30%, rgba(10,10,10,.92) 90%)' },
  wrap: { position: 'relative', zIndex: 2, minHeight: '100vh', padding: '80px var(--pad) 40px',
    display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 64 },
  meta: { display: 'flex', justifyContent: 'space-between', paddingTop: 8, borderBottom: '1px solid var(--rule)', paddingBottom: 12 },
  metaTxt: { fontSize: 11, color: 'var(--ink-3)', letterSpacing: '.06em' },
  split: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 520px), 1fr))', gap: 'clamp(48px, 8vw, 80px)',
    alignItems: 'center' },
  copy: { display: 'flex', flexDirection: 'column', gap: 32 },
  eyebrow: { fontSize: 11, letterSpacing: '.08em', color: 'var(--ink-2)', textTransform: 'uppercase' },
  h1: { margin: 0, fontWeight: 500, lineHeight: .95, letterSpacing: '-.035em',
    fontSize: 'clamp(48px, 8vw, 96px)' },
  h1Strong: { color: 'var(--ink)' },
  h1Soft: { color: 'var(--ink-3)', fontWeight: 400 },
  lede: { fontSize: 'clamp(16px, 1.4vw, 20px)', lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 520, margin: 0 },
  byline: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 24, paddingTop: 24, borderTop: '1px solid var(--rule)' },
  live: { display: 'inline-block', width: 7, height: 7, background: '#7CFF6B', borderRadius: '50%', boxShadow: '0 0 8px #7CFF6B' },
  demoCol: { position: 'relative', width: '100%', display: 'flex', justifyContent: 'center' },
  ctas: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' },
  btnPri: { display: 'inline-flex', alignItems: 'center', gap: 14, padding: '16px 24px',
    background: 'var(--ink)', color: '#0a0a0a', fontSize: 14, fontWeight: 500, letterSpacing: '.01em', cursor: 'pointer' },
  btnArrow: { display: 'inline-block', transition: 'transform .25s ease' },
  btnSec: { display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 24px',
    border: '1px solid var(--rule-strong)', color: 'var(--ink)', fontSize: 14, fontWeight: 400, letterSpacing: '.01em' },
  foot: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'end', gap: 32, paddingTop: 32, borderTop: '1px solid var(--rule)' },
  stats: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: 'clamp(24px, 4vw, 56px)', flex: 1 },
  stat: { display: 'flex', flexDirection: 'column', gap: 4 },
  statN: { fontSize: 'clamp(24px, 3vw, 36px)', fontWeight: 500, letterSpacing: '-.02em' },
  statL: { fontSize: 10, letterSpacing: '.08em', color: 'var(--ink-3)', textTransform: 'uppercase' },
  clock: { fontSize: 11, color: 'var(--ink-2)', letterSpacing: '.04em', justifySelf: 'end', fontVariantNumeric: 'tabular-nums' },
  scroll: { position: 'absolute', bottom: 24, right: 'var(--pad)', zIndex: 3,
    display: 'flex', alignItems: 'center', gap: 10, fontSize: 10, letterSpacing: '.16em', color: 'var(--ink-2)', textTransform: 'uppercase' },
  scrollLine: { display: 'inline-block', width: 54, height: 1, background: 'var(--rule)' }
};

const hd = {
  shell: { width: '100%', maxWidth: 640 },
  frame: { position: 'relative', background: '#1a1a1a', border: '1px solid rgba(245,245,240,.18)',
    boxShadow: '0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(245,245,240,.04)', overflow: 'hidden' },
  viewport: { position: 'relative', aspectRatio: '4/2.85', background: '#0a0a0a', overflow: 'hidden' },
  stage: { position: 'absolute', inset: 0, transition: 'opacity .42s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)' },
  wipe: { position: 'absolute', inset: 0, background: 'var(--ink)', transition: 'transform .32s cubic-bezier(.5,.05,.5,.95)', transformOrigin: 'left' },
  meta: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 14px',
    borderTop: '1px solid rgba(245,245,240,.12)', background: 'rgba(20,20,20,.8)',
    fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.06em', color: 'var(--ink-2)', textTransform: 'uppercase' },
  metaLeft: { display: 'flex', alignItems: 'center', gap: 14 },
  dots: { display: 'flex', gap: 6 },
  dot: { width: 10, height: 10, padding: 0, border: '1px solid rgba(245,245,240,.25)', background: 'transparent', cursor: 'pointer',
    transition: 'background .2s, border-color .2s' },
  dotActive: { background: 'var(--ink)', borderColor: 'var(--ink)' },
  metaLabel: { color: 'var(--ink)', letterSpacing: '.08em' },
  metaRight: { color: 'var(--ink-3)' }
};
if (!document.getElementById('hd-css')) {
  const s = document.createElement('style');s.id = 'hd-css';
  s.textContent = `.hero-btn-pri:hover .arr{transform:translate(3px,-3px)}`;
  document.head.appendChild(s);
}

const ps = {
  root: { width: '100%', height: '100%', background: 'linear-gradient(180deg, #d8d8d8, #b8b8b8)',
    fontFamily: '"Times New Roman", Times, serif', color: '#000', fontSize: 11, display: 'flex', flexDirection: 'column' },
  titlebar: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 8px',
    background: 'linear-gradient(180deg,#3b6ea8,#1c4a86)', color: '#fff', fontFamily: 'Tahoma,Geneva,sans-serif',
    fontSize: 11, fontWeight: 700, borderBottom: '1px solid #08376e' },
  tbBtns: { display: 'flex', gap: 2 },
  tbBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 18, height: 16,
    background: '#c9c9c9', border: '1px outset #ddd', color: '#000', fontStyle: 'normal', fontSize: 11, fontWeight: 700 },
  body: { flex: 1, display: 'grid', gridTemplateColumns: '40px 1fr 130px', minHeight: 0 },
  tools: { background: '#c0c0c0', borderRight: '1px solid #888', padding: 4, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2, alignContent: 'start' },
  tool: { width: 16, height: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
    border: '1px outset #e0e0e0', background: '#c0c0c0', fontSize: 10 },
  toolActive: { border: '1px inset #999', background: '#a8a8a8' },
  canvas: { position: 'relative', background: 'repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0/16px 16px', padding: 14, overflow: 'hidden' },
  psPage: { position: 'relative', background: '#fff', height: '100%', border: '1px solid #555', display: 'flex', flexDirection: 'column', overflow: 'hidden' },
  psHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 10px', background: 'linear-gradient(180deg,#990000,#600)', color: '#ffd' },
  psLogo: { fontFamily: '"Comic Sans MS",cursive', fontSize: 13, fontWeight: 700, color: '#ffeb3b', textShadow: '1px 1px 0 #000' },
  psNav: { display: 'flex', gap: 8, fontSize: 9, fontWeight: 700, textDecoration: 'underline' },
  psHero: { display: 'grid', gridTemplateColumns: '1fr 80px', gap: 8, padding: 8, background: 'linear-gradient(180deg,#ffe680,#ffaa00)' },
  psHeroTxt: { display: 'flex', flexDirection: 'column', gap: 4, justifyContent: 'center' },
  psH1: { fontSize: 18, fontWeight: 900, color: '#c00', textShadow: '2px 2px 0 #ff0', fontStyle: 'italic' },
  psH2: { fontSize: 9, color: '#000', fontStyle: 'italic' },
  psBtn: { alignSelf: 'flex-start', marginTop: 4, padding: '3px 10px', border: '2px outset #5cb85c',
    background: 'linear-gradient(180deg,#7c7,#393)', color: '#fff', fontWeight: 700, fontSize: 9 },
  psHeroImg: { position: 'relative', background: '#cdd', border: '1px solid #999', overflow: 'hidden',
    display: 'flex', alignItems: 'center', justifyContent: 'center' },
  psBoxes: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, padding: '6px 8px 10px', background: '#f3f3e8' },
  psBox: { padding: 6, background: '#fff', border: '1px solid #888', textAlign: 'center',
    boxShadow: 'inset 0 0 0 1px #fff, 1px 1px 0 #aaa' },
  ants: { position: 'absolute', left: 30, top: 60, width: 160, height: 60, pointerEvents: 'none',
    border: '1px dashed #000', mixBlendMode: 'difference', animation: 'ants 0.6s linear infinite' },
  layers: { background: '#c0c0c0', borderLeft: '1px solid #888', padding: 4, display: 'flex', flexDirection: 'column', gap: 2, fontSize: 9 },
  layHd: { padding: '2px 4px', background: '#888', color: '#fff', fontWeight: 700, letterSpacing: '.04em' },
  layRow: { display: 'flex', alignItems: 'center', gap: 4, padding: '2px 4px', background: '#dcdcdc', border: '1px solid #aaa' },
  layActive: { background: '#3b6ea8', color: '#fff', borderColor: '#1c4a86' },
  layThumb: { display: 'inline-block', width: 14, height: 10, background: 'linear-gradient(45deg,#fcc,#9cf)', border: '1px solid #666' },
  statusbar: { padding: '3px 8px', background: '#c0c0c0', borderTop: '1px solid #888',
    fontFamily: 'Tahoma,sans-serif', fontSize: 9, color: '#000' }
};
if (!document.getElementById('ps-anim')) {
  const s = document.createElement('style');s.id = 'ps-anim';
  s.textContent = `@keyframes ants{from{outline-offset:0}to{outline-offset:6px}}`;
  document.head.appendChild(s);
}

const tm = {
  root: { width: '100%', height: '100%', background: '#0c0c0c', display: 'flex', flexDirection: 'column', fontFamily: 'var(--mono)' },
  bar: { display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', background: '#1d1d1d', borderBottom: '1px solid #2a2a2a' },
  dot: { width: 11, height: 11, borderRadius: '50%', display: 'inline-block' },
  title: { flex: 1, textAlign: 'center', fontSize: 11, color: '#888', letterSpacing: '.02em' },
  body: { flex: 1, padding: '14px 18px', fontSize: 12, lineHeight: 1.65, color: '#e8e8e8', overflow: 'hidden', whiteSpace: 'pre', fontVariantLigatures: 'none' },
  caret: { display: 'inline-block', width: 8, marginLeft: 1, color: '#7CFF6B', animation: 'tcaret 1s steps(1) infinite' }
};
if (!document.getElementById('tm-anim')) {
  const s = document.createElement('style');s.id = 'tm-anim';
  s.textContent = `@keyframes tcaret{50%{opacity:0}}`;
  document.head.appendChild(s);
}

const pr = {
  root: { width: '100%', height: '100%', background: '#fafaf7', color: '#0a0a0a',
    fontFamily: 'var(--sans)', display: 'grid', gridTemplateColumns: '160px 1fr', fontSize: 12 },
  side: { background: '#fff', borderRight: '1px solid #eaeae6', padding: '18px 12px', display: 'flex', flexDirection: 'column', gap: 4 },
  brand: { display: 'flex', alignItems: 'center', gap: 10, padding: '4px 6px 14px', borderBottom: '1px solid #eaeae6', marginBottom: 8 },
  brandMark: { width: 14, height: 14, background: '#0a0a0a' },
  brandTxt: { fontWeight: 600, letterSpacing: '-.01em', fontSize: 13 },
  nav: { display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', color: '#5a5a55', fontSize: 12, letterSpacing: '-.005em' },
  navActive: { background: '#f3f3ee', color: '#0a0a0a', fontWeight: 500 },
  navIcon: { display: 'inline-block', width: 14, textAlign: 'center', color: '#888' },
  main: { padding: '18px 22px', display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' },
  topbar: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' },
  crumbs: { fontSize: 10, color: '#888', letterSpacing: '.04em', textTransform: 'uppercase', marginBottom: 4, fontFamily: 'var(--mono)' },
  h1: { fontSize: 20, fontWeight: 500, letterSpacing: '-.02em', margin: 0 },
  userBox: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: '#fff', border: '1px solid #eaeae6', fontSize: 11, fontWeight: 500 },
  userDot: { width: 18, height: 18, borderRadius: '50%', background: '#0a0a0a' },
  kpis: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 },
  kpi: { padding: '12px 14px', background: '#fff', border: '1px solid #eaeae6' },
  kpiLbl: { fontSize: 10, color: '#888', letterSpacing: '.04em', textTransform: 'uppercase', fontFamily: 'var(--mono)' },
  kpiVal: { fontSize: 18, fontWeight: 600, letterSpacing: '-.02em', marginTop: 4 },
  kpiTrend: { fontSize: 10, marginTop: 3, fontWeight: 500 },
  chart: { padding: '14px 16px 6px', background: '#fff', border: '1px solid #eaeae6', flex: '1 1 auto', display: 'flex', flexDirection: 'column', gap: 8, minHeight: 0 },
  chartHd: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, fontWeight: 500 },
  chartTabs: { display: 'flex', gap: 8, fontFamily: 'var(--mono)', fontSize: 10, color: '#888', letterSpacing: '.04em', textTransform: 'uppercase' },
  chartTabActive: { color: '#0a0a0a', borderBottom: '1px solid #0a0a0a', paddingBottom: 1 }
};

Object.assign(window, { Hero });