// Sections.jsx — Content, About, Now, Work-with-me, Footer, Nav
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ─── Nav ──────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useStateS(false);
  const [open, setOpen] = useStateS(false);
  
  useEffectS(() => {
    const onS = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onS, { passive: true });
    onS();
    return () => { window.removeEventListener('scroll', onS); };
  }, []);

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="nav-inner">
          <a href="#top" className="nav-mark" onClick={() => setOpen(false)}>
            <img src="assets/anthonys-logo.ico" alt="Logo" style={{ width: '18px', height: '18px', borderRadius: '4px' }} />
            <span>A.STEPVOY</span>
          </a>
          
          <div className="nav-links">
            <a href="#projects">Projects</a>
            <a href="#content">Content</a>
            <a href="#about">About</a>
            <a href="#now">Now</a>
            <a href="#work">Work</a>
          </div>

          <div className="nav-actions">
            <a href="mailto:anthonystepvoy@gmail.com" className="nav-time hide-mobile">Get in touch ↗</a>
            <button 
              className="nav-burger" 
              onClick={() => setOpen(!open)}
              aria-label="Toggle menu"
            >
              <div className={`burger-line ${open ? 'open' : ''}`} />
            </button>
          </div>
        </div>
      </nav>

      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        <div className="mobile-menu-inner">
          <div className="mobile-links">
            {['Projects', 'Content', 'About', 'Now', 'Work'].map((item) => (
              <a 
                key={item} 
                href={`#${item.toLowerCase()}`} 
                onClick={() => setOpen(false)}
              >
                <span className="mono">0{['Projects', 'Content', 'About', 'Now', 'Work'].indexOf(item) + 2}</span>
                {item}
              </a>
            ))}
          </div>
          <div className="mobile-footer">
            <div className="mono">CONTACT</div>
            <a href="mailto:anthonystepvoy@gmail.com">anthonystepvoy@gmail.com</a>
          </div>
        </div>
      </div>
    </>
  );
}

// ─── Ticker ───────────────────────────────────────────────────────────
function Ticker() {
  const items = [
    'BUILDING ON THE INTERNET','PRODUCTS / DESIGN / CONTENT',
    'DESIGN → CODE → SHIP','LISTENING : MUSIC FOR DEEP WORK',
    'CURRENTLY SHIPPING','BUILDING NEW THINGS','BASED IN URUGUAY',
    '$100K+ FREELANCE','25K+ AUDIENCE','GITHUB / ANTHONYSTEPVOY',
  ];
  const dup = [...items, ...items];
  return (
    <div className="ticker-wrap" aria-hidden>
      <div className="ticker">
        {dup.map((t,i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

// ─── Content / Platforms ──────────────────────────────────────────────
const PLATFORMS = [
  { id:'x',  name:'Twitter / X', handle:'@anthonystepvoy', desc:'Thoughts, builds, ideas',
    href:'https://x.com/anthonystepvoy',
    glyph:(<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2H21.5l-7.51 8.58L23 22h-6.93l-5.43-7.1L4.4 22H1.14l8.04-9.18L1 2h7.06l4.91 6.49L18.244 2Zm-1.22 18h1.93L7.06 4H5.04l11.984 16Z"/></svg>) },
  { id:'tk', name:'TikTok', handle:'@anthonystepvoy', desc:'Short-form, build in public',
    href:'https://www.tiktok.com/@anthonystepvoy',
    glyph:(<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 6.7c-1.6-.3-3-1.2-3.9-2.5-.4-.5-.7-1.2-.8-1.9V2h-3.4v13.6c0 1.4-1.2 2.6-2.6 2.6-.7 0-1.4-.3-1.9-.8a2.6 2.6 0 0 1 0-3.6c.5-.5 1.2-.8 1.9-.8.3 0 .6 0 .8.1V9.7c-.3 0-.6-.1-.8-.1A6 6 0 0 0 4.7 14a5.9 5.9 0 0 0 5.8 5.8 6 6 0 0 0 5.9-5.8V8.7c1.4 1 3.1 1.6 4.9 1.6V6.9c-.6 0-1.2-.1-1.8-.2Z"/></svg>) },
  { id:'yt', name:'YouTube', handle:'@anthonystepvoy', desc:'Long-form essays + demos',
    href:'https://www.youtube.com/@anthonystepvoy',
    glyph:(<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 7.1a3 3 0 0 0-2.1-2.1C19.6 4.5 12 4.5 12 4.5s-7.6 0-9.4.5A3 3 0 0 0 .5 7.1C0 8.9 0 12 0 12s0 3.1.5 4.9a3 3 0 0 0 2.1 2.1C4.4 19.5 12 19.5 12 19.5s7.6 0 9.4-.5a3 3 0 0 0 2.1-2.1c.5-1.8.5-4.9.5-4.9s0-3.1-.5-4.9ZM9.6 15.6V8.4l6.3 3.6-6.3 3.6Z"/></svg>) },
  { id:'in', name:'LinkedIn', handle:'aanthony-stepovoy', desc:'Career notes, signals',
    href:'https://www.linkedin.com/in/aanthony-stepovoy/',
    glyph:(<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2ZM8 19H5V9.5h3V19ZM6.5 8.2A1.7 1.7 0 1 1 8.2 6.5 1.7 1.7 0 0 1 6.5 8.2ZM19 19h-3v-4.7c0-1.1 0-2.6-1.6-2.6S12.6 13 12.6 14.3V19h-3V9.5h2.9v1.3a3.2 3.2 0 0 1 2.9-1.6c3.1 0 3.6 2 3.6 4.7V19Z"/></svg>) },
  { id:'gh', name:'GitHub', handle:'anthonystepvoy', desc:'Code, open source, builds',
    href:'https://github.com/anthonystepvoy',
    glyph:(<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.7.5.5 5.7.5 12a11.5 11.5 0 0 0 7.9 10.9c.6.1.8-.2.8-.6v-2.2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.4-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.7.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.5 11.5 0 0 0 23.5 12C23.5 5.7 18.3.5 12 .5Z"/></svg>) },
];

function Content() {
  return (
    <section id="content" style={{padding:'96px 0'}}>
      <div className="wrap">
        <div className="reveal" style={styS.head}>
          <div>
            <div className="mono section-num">03 / PRESENCE</div>
            <h2 className="section-title" style={{margin:'10px 0 0'}}>Content</h2>
            <p style={{maxWidth:560,marginTop:18,color:'var(--ink-2)',fontSize:18,lineHeight:1.4}}>
              Sharing what I learn along the way. Builds, breakdowns, the occasional take.
            </p>
          </div>
          <div className="mono" style={{textAlign:'right',color:'var(--ink-3)',fontSize:11,letterSpacing:'.04em'}}>
            <div>{PLATFORMS.length} channels</div>
            <div style={{marginTop:4}}>Drag · hover · click</div>
          </div>
        </div>

        <div className="reveal" data-d="1">
          <FloatingPlatforms />
        </div>
      </div>
    </section>
  );
}

// Floating draggable platform glyphs — physics-lite, parallax on cursor
function FloatingPlatforms() {
  const stageRef = useRefS(null);
  const [active, setActive] = useStateS(null);
  const [mx, setMx] = useStateS(0);
  const [my, setMy] = useStateS(0);
  const [drag, setDrag] = useStateS(null); // {id, dx, dy}
  const [pos, setPos] = useStateS(() => {
    // initial scattered positions in % of stage
    return {
      x:  { x: 14, y: 26 },
      tk: { x: 78, y: 18 },
      yt: { x: 50, y: 52 },
      in: { x: 22, y: 70 },
      gh: { x: 80, y: 64 },
    };
  });

  useEffectS(() => {
    const el = stageRef.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setMx((e.clientX - r.left) / r.width - 0.5);
      setMy((e.clientY - r.top) / r.height - 0.5);
      if (drag) {
        const px = ((e.clientX - r.left - drag.dx) / r.width) * 100;
        const py = ((e.clientY - r.top - drag.dy) / r.height) * 100;
        setPos(p => ({ ...p, [drag.id]: { x: Math.max(4, Math.min(96, px)), y: Math.max(8, Math.min(92, py)) } }));
      }
    };
    const onUp = () => setDrag(null);
    el.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => { el.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
  }, [drag]);

  // gentle idle bob via requestAnimationFrame
  const [t, setT] = useStateS(0);
  useEffectS(() => {
    let raf, t0 = performance.now();
    const tick = (now) => { setT((now - t0) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const handleDown = (e, p) => {
    e.preventDefault();
    const r = stageRef.current.getBoundingClientRect();
    const cx = (pos[p.id].x / 100) * r.width;
    const cy = (pos[p.id].y / 100) * r.height;
    setDrag({ id: p.id, dx: e.clientX - r.left - cx, dy: e.clientY - r.top - cy });
    setActive(p.id);
  };

  return (
    <div ref={stageRef} style={styS.fpStage}>
      {/* connector mesh */}
      <svg style={styS.fpMesh} aria-hidden>
        {PLATFORMS.map((p, i) => PLATFORMS.slice(i + 1).map(q => {
          const ax = pos[p.id]?.x ?? 50, ay = pos[p.id]?.y ?? 50;
          const bx = pos[q.id]?.x ?? 50, by = pos[q.id]?.y ?? 50;
          return <line key={p.id+q.id} x1={ax+'%'} y1={ay+'%'} x2={bx+'%'} y2={by+'%'}
            stroke="rgba(245,245,240,.08)" strokeWidth="1"/>;
        }))}
      </svg>
      <div className="mono" style={styS.fpHint}>↺ drag the icons</div>
      {PLATFORMS.map((p, i) => {
        const isActive = active === p.id;
        const isDrag = drag?.id === p.id;
        // idle bob phase per icon
        const bob = Math.sin(t * 0.9 + i * 1.4) * 6;
        const swing = Math.cos(t * 0.7 + i) * 4;
        // parallax follow cursor
        const par = (i - PLATFORMS.length / 2) * 4;
        const tx = mx * par;
        const ty = my * par;
        return (
          <a key={p.id}
             href={p.href}
             target="_blank"
             rel="noreferrer"
             onMouseDown={(e) => handleDown(e, p)}
             onMouseEnter={() => !drag && setActive(p.id)}
             onMouseLeave={() => !drag && setActive(null)}
             onClick={(e) => { if (drag) e.preventDefault(); }}
             style={{
               ...styS.fpItem,
               left: pos[p.id].x + '%',
               top: pos[p.id].y + '%',
               transform: `translate(-50%,-50%) translate(${tx + swing}px, ${ty + bob}px)`,
               zIndex: isActive ? 5 : 1,
               cursor: isDrag ? 'grabbing' : 'grab',
             }}>
            <div className="fp-glyph" style={{
              ...styS.fpGlyph,
              background: isActive ? 'var(--ink)' : 'transparent',
              color: isActive ? '#0a0a0a' : 'var(--ink)',
              borderColor: isActive ? 'var(--ink)' : 'rgba(245,245,240,.18)',
              transform: isActive ? 'scale(1.08)' : 'scale(1)',
            }}>
              {p.glyph}
            </div>
            <div style={{
              ...styS.fpLabel,
              opacity: isActive ? 1 : 0.5,
              transform: isActive ? 'translateY(0)' : 'translateY(-4px)',
            }}>
              <div style={styS.fpName}>{p.name}</div>
              <div className="mono" style={styS.fpHandle}>{p.handle}</div>
              {isActive && <div className="mono" style={styS.fpDesc}>{p.desc} ↗</div>}
            </div>
          </a>
        );
      })}
    </div>
  );
}

// ─── About ───────────────────────────────────────────────────────────
function About() {
  const ref = useRefS(null);
  useEffectS(() => {
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const mx = (e.clientX - r.left)/r.width - 0.5;
      const my = (e.clientY - r.top)/r.height - 0.5;
      el.style.setProperty('--px', mx.toFixed(3));
      el.style.setProperty('--py', my.toFixed(3));
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <section id="about" style={{padding:'96px 0'}}>
      <div className="wrap">
        <div className="reveal" style={styS.head}>
          <div>
            <div className="mono section-num">04 / WHO</div>
            <h2 className="section-title" style={{margin:'10px 0 0'}}>About</h2>
          </div>
        </div>

        <div className="reveal" data-d="1" style={styS.aboutGrid}>
          <div ref={ref} style={styS.aboutMedia} className="about-media">
            <img src="assets/anthony.jpg" alt="Anthony Stepvoy" style={styS.aboutImg}/>
            <div style={styS.aboutCorner} className="mono">A.S — 2026</div>
            <div style={styS.aboutFrame} aria-hidden/>
          </div>

          <div style={styS.aboutText}>
            <p style={styS.aboutLead}>
              Designer turned developer. Now <em style={{fontStyle:'normal',background:'var(--ink)',color:'#0a0a0a',padding:'2px 8px'}}>building products</em> and sharing the process online.
            </p>
            <div style={styS.aboutFacts}>
              <Fact k="Based" v="Uruguay" />
              <Fact k="Past"  v="40+ Upwork projects" />
              <Fact k="Now"   v="Vokter, BetlyTrade" />
              <Fact k="Stack" v="React · TS · Solana" />
              <Fact k="Code"  v="github.com/anthonystepvoy" />
              <Fact k="Hours" v="06:30 — late" />
            </div>

            <div style={styS.aboutCta}>
              <a href="#work" className="mono" style={styS.aboutLink}>
                <span>Hire me</span><span>→</span>
              </a>
              <a href="mailto:anthonystepvoy@gmail.com" className="mono" style={styS.aboutLink}>
                <span>Say hi</span><span>→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Fact({ k, v }) {
  return (
    <div style={{display:'grid',gridTemplateColumns:'90px 1fr',gap:18,padding:'14px 0',
      borderTop:'1px solid var(--rule)'}}>
      <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.06em',textTransform:'uppercase'}}>{k}</div>
      <div style={{fontSize:15}}>{v}</div>
    </div>
  );
}

// ─── Now (mystery) ───────────────────────────────────────────────────
function Now() {
  const [glitch, setGlitch] = useStateS(false);
  useEffectS(() => {
    const id = setInterval(() => {
      setGlitch(true);
      setTimeout(() => setGlitch(false), 180);
    }, 4200);
    return () => clearInterval(id);
  }, []);
  return (
    <section id="now" style={{padding:'120px 0'}}>
      <div className="wrap">
        <div className="reveal" style={styS.head}>
          <div>
            <div className="mono section-num">05 / NEXT</div>
            <h2 className="section-title" style={{margin:'10px 0 0'}}>Now</h2>
          </div>
          <div className="mono" style={{color:'var(--ink-3)',fontSize:11,letterSpacing:'.04em',textAlign:'right'}}>
            <span style={{display:'inline-block',width:7,height:7,background:'#7CFF6B',borderRadius:'50%',marginRight:8,verticalAlign:'middle'}}/>
            ACTIVE · Q2 2026
          </div>
        </div>

        <div className="reveal" data-d="1" style={styS.nowBody}>
          <div style={{...styS.nowBig, opacity: glitch ? .4 : 1, transform: glitch ? 'translate(2px,-1px)' : 'none'}}>
            Before and after
            <br/>
            <span style={{color:'var(--ink-3)'}}>for iA Coding. Soon.</span>
          </div>

          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:40,marginBottom:80}}>
            <img src="assets/siga-ico-logo.svg" alt="siga" style={{width:360,height:360,filter:'brightness(0) invert(1)'}} />
            <div style={styS.nowMeta}>
            <div className="mono" style={styS.nowMetaRow}>
              <span style={{color:'var(--ink-3)'}}>codename</span>
              <span style={{color:'var(--ink)',letterSpacing:'.04em'}}>████</span>
            </div>
            <div className="mono" style={styS.nowMetaRow}>
              <span style={{color:'var(--ink-3)'}}>category</span>
              <span style={{color:'var(--ink-2)'}}>Product · Web</span>
            </div>
            <div className="mono" style={styS.nowMetaRow}>
              <span style={{color:'var(--ink-3)'}}>status</span>
              <span style={{color:'#7CFF6B'}}>● in build</span>
            </div>
            <div className="mono" style={styS.nowMetaRow}>
              <span style={{color:'var(--ink-3)'}}>reveal</span>
              <span style={{color:'var(--ink-2)'}}>soon</span>
            </div>
            <a href="https://x.com/anthonystepvoy" target="_blank" rel="noreferrer" className="mono" style={{...styS.nowMetaRow, marginTop:18, paddingTop:14, borderTop:'1px solid var(--rule)', color:'var(--ink)'}}>
              <span>Follow along on X</span><span>↗</span>
            </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Work with me ────────────────────────────────────────────────────
function Work() {
  return (
    <section id="work" style={{padding:'96px 0'}}>
      <div className="wrap">
        <div className="reveal" style={styS.head}>
          <div>
            <div className="mono section-num">06 / COLLABORATION</div>
            <h2 className="section-title" style={{margin:'10px 0 0'}}>Got something good?</h2>
          </div>
          <div className="mono" style={{color:'var(--ink-3)',fontSize:11,letterSpacing:'.04em',textAlign:'right'}}>
            <span style={{display:'inline-block',width:7,height:7,background:'#FFB23F',borderRadius:'50%',marginRight:8,verticalAlign:'middle'}}/>
            BUSY · SELECTIVE
          </div>
        </div>

        <div className="reveal" data-d="1" style={styS.workGrid}>
          <div style={styS.workLead}>
            <p style={{fontSize:'clamp(22px,2.4vw,32px)',lineHeight:1.35,letterSpacing:'-.01em',margin:0}}>
              Heads up — I'm head-down on my own products and not taking on freelance.
              <span style={{color:'var(--ink-3)'}}>&nbsp;Real product ideas or business opportunities are different. Pitch me.</span>
            </p>
            <div style={{marginTop:32,display:'flex',flexDirection:'column',gap:0}}>
              <Bullet n="01" k="Co-founding / equity" v="Early-stage product needs a builder who can ship. Send your deck." />
              <Bullet n="02" k="Product partnerships" v="Genuine partnerships, not gigs. If it moves the needle, I'm listening." />
              <Bullet n="03" k="Everything else"      v="Saying no to most things. Make your pitch crisp." />
            </div>
          </div>

          <div style={styS.workCta}>
            <div className="mono" style={{fontSize:11,letterSpacing:'.06em',color:'var(--ink-3)',textTransform:'uppercase'}}>Pitch · don't sell</div>
            <a href="mailto:anthonystepvoy@gmail.com?subject=Pitch%20—" style={styS.workEmail}>
              anthonystepvoy@gmail.com
            </a>
            <a href="mailto:anthonystepvoy@gmail.com?subject=Pitch%20—" style={styS.workBtn} className="work-btn">
              <span>Send a pitch</span><span style={{transition:'transform .25s'}}>↗</span>
            </a>
            <div className="mono" style={{fontSize:11,color:'var(--ink-3)',marginTop:14,letterSpacing:'.04em'}}>
              I read everything · reply if it's a fit
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Bullet({ n, k, v }) {
  return (
    <div style={{display:'grid',gridTemplateColumns:'52px 240px 1fr',gap:24,padding:'22px 0',
      borderTop:'1px solid var(--rule)',alignItems:'baseline'}}>
      <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.06em'}}>{n}</div>
      <div style={{fontSize:18,fontWeight:500}}>{k}</div>
      <div style={{color:'var(--ink-2)',fontSize:14,lineHeight:1.5}}>{v}</div>
    </div>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{padding:'64px 0 28px',borderTop:'1px solid var(--rule)',marginTop:40}}>
      <div className="wrap">
        <div className="footer-mark-wrap" aria-hidden>
          <div className="footer-mark"><span className="footer-mark-s"><span className="mono footer-mark-eye">ANTHONY</span>S</span>TEPVOY</div>
        </div>

        <div style={styS.footGrid}>
          <div>
            <div className="mono" style={styS.footK}>EMAIL</div>
            <a href="mailto:anthonystepvoy@gmail.com" style={styS.footV}>anthonystepvoy@gmail.com</a>
          </div>
          <div>
            <div className="mono" style={styS.footK}>SOCIAL</div>
            <div style={{display:'flex',flexDirection:'column',gap:6}}>
              <a href="https://x.com/anthonystepvoy" target="_blank" rel="noreferrer" style={styS.footV}>X / Twitter</a>
              <a href="https://www.tiktok.com/@anthonystepvoy" target="_blank" rel="noreferrer" style={styS.footV}>TikTok</a>
              <a href="https://www.youtube.com/@anthonystepvoy" target="_blank" rel="noreferrer" style={styS.footV}>YouTube</a>
              <a href="https://www.linkedin.com/in/aanthony-stepovoy/" target="_blank" rel="noreferrer" style={styS.footV}>LinkedIn</a>
              <a href="https://github.com/anthonystepvoy" target="_blank" rel="noreferrer" style={styS.footV}>GitHub</a>
            </div>
          </div>
          <div>
            <div className="mono" style={styS.footK}>NOW</div>
            <div style={styS.footV}>Uruguay</div>
            <div style={{...styS.footV,color:'var(--ink-3)',marginTop:4}}>UTC−3 · Building</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div className="mono" style={styS.footK}>COLOPHON</div>
            <div style={{...styS.footV,color:'var(--ink-2)'}}>Space Grotesk · JetBrains Mono</div>
            <div style={{...styS.footV,color:'var(--ink-3)',marginTop:4}}>Built by hand · 2026</div>
          </div>
        </div>

        <div style={styS.footBot}>
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.06em'}}>
            © A. STEPVOY · ALL RIGHTS RESERVED
          </div>
          <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.06em'}}>
            v.2026.04 · MADE IN URUGUAY
          </div>
        </div>
      </div>
    </footer>
  );
}

const styS = {
  head:{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:32,
    padding:'0 0 28px',borderBottom:'1px solid var(--rule)',marginBottom:40},

  // Platforms
  platforms:{borderTop:'1px solid var(--rule)'},
  platRow:{display:'grid',gridTemplateColumns:'52px 1fr 1.4fr 100px 90px 32px',gap:24,
    alignItems:'center',padding:'28px 12px',borderBottom:'1px solid var(--rule)',
    cursor:'pointer',position:'relative',transition:'padding .3s ease'},
  platN:{fontSize:11,color:'var(--ink-3)',letterSpacing:'.06em'},
  platName:{display:'flex',alignItems:'baseline'},
  platDesc:{color:'var(--ink-2)',fontSize:15},
  platStat:{fontSize:18,color:'var(--ink)',letterSpacing:'-.01em',fontVariantNumeric:'tabular-nums'},
  platCad:{fontSize:11,color:'var(--ink-3)',letterSpacing:'.04em',textTransform:'uppercase'},
  platArr:{fontSize:18,color:'var(--ink-3)',textAlign:'right',transition:'transform .25s, color .25s'},

  // About
  aboutGrid:{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 420px), 1fr))',gap:64,alignItems:'start'},
  aboutMedia:{position:'relative',aspectRatio:'1/1',overflow:'hidden',background:'var(--bg-2)',
    border:'1px solid var(--rule-strong)','--px':0,'--py':0},
  aboutImg:{width:'100%',height:'100%',objectFit:'cover',
    filter:'grayscale(100%) contrast(1.05) brightness(.95)',
    transform:'translate(calc(var(--px,0) * -10px), calc(var(--py,0) * -10px)) scale(1.04)',
    transition:'transform .4s cubic-bezier(.2,.7,.2,1), filter .5s ease'},
  aboutCorner:{position:'absolute',top:14,left:16,fontSize:10,letterSpacing:'.08em',color:'var(--ink-2)',
    background:'rgba(10,10,10,.6)',padding:'4px 8px'},
  aboutFrame:{position:'absolute',inset:14,border:'1px solid rgba(245,245,240,.18)',pointerEvents:'none'},
  aboutText:{display:'flex',flexDirection:'column',gap:32},
  aboutLead:{fontSize:'clamp(28px,3.4vw,46px)',lineHeight:1.18,letterSpacing:'-.02em',
    fontWeight:400,margin:0},
  aboutFacts:{},
  aboutCta:{display:'flex',gap:32,paddingTop:14,borderTop:'1px solid var(--rule)',flexWrap:'wrap'},
  aboutLink:{display:'inline-flex',alignItems:'center',gap:10,fontSize:13,letterSpacing:'.04em',
    color:'var(--ink)',transition:'gap .25s ease',textTransform:'uppercase'},

  // Now
  nowBody:{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 420px), 1fr))',gap:64,alignItems:'end'},
  nowBig:{fontSize:'clamp(48px,11vw,180px)',lineHeight:.92,letterSpacing:'-.04em',fontWeight:500,
    transition:'transform .12s ease, opacity .12s'},
  nowMeta:{display:'flex',flexDirection:'column', width:'100%'},
  nowMetaRow:{display:'flex',justifyContent:'space-between',padding:'14px 0',
    borderTop:'1px solid var(--rule)',fontSize:13,letterSpacing:'.04em',textTransform:'uppercase'},

  // Work
  workGrid:{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 420px), 1fr))',gap:64,alignItems:'start'},
  workLead:{},
  workCta:{display:'flex',flexDirection:'column',gap:12,padding:'28px 0',
    borderTop:'1px solid var(--rule-strong)',borderBottom:'1px solid var(--rule-strong)'},
  workEmail:{fontSize:'clamp(20px,2vw,28px)',letterSpacing:'-.01em',color:'var(--ink)',
    fontWeight:400,marginTop:4,wordBreak:'break-all'},
  workBtn:{display:'inline-flex',alignItems:'center',justifyContent:'space-between',
    padding:'18px 22px',background:'var(--ink)',color:'#0a0a0a',fontSize:14,fontWeight:500,
    marginTop:16,letterSpacing:'.01em',transition:'background .25s ease'},

  // Footer
  footGrid:{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))',gap:48,
    paddingTop:32,borderTop:'1px solid var(--rule)',marginTop:24},
  footK:{fontSize:10,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:10,textTransform:'uppercase'},
  footV:{display:'block',color:'var(--ink)',fontSize:14,letterSpacing:'-.005em'},
  footBot:{display:'flex',justifyContent:'space-between',marginTop:48,paddingTop:18,
    borderTop:'1px solid var(--rule)',flexWrap:'wrap',gap:16},

  // Floating Platforms
  fpStage:{position:'relative',width:'100%',height:'min(560px, 70vh)',
    background:'transparent',overflow:'hidden',
    backgroundImage:'radial-gradient(circle at 50% 50%, rgba(245,245,240,.04), transparent 60%), radial-gradient(circle, rgba(245,245,240,.07) 1px, transparent 1px)',
    backgroundSize:'auto, 36px 36px',
    border:'1px solid var(--rule)',userSelect:'none'},
  fpMesh:{position:'absolute',inset:0,width:'100%',height:'100%',pointerEvents:'none',zIndex:0},
  fpHint:{position:'absolute',top:14,left:16,fontSize:10,letterSpacing:'.18em',
    color:'var(--ink-3)',textTransform:'uppercase',zIndex:6},
  fpItem:{position:'absolute',display:'flex',flexDirection:'column',alignItems:'center',gap:14,
    textDecoration:'none',color:'var(--ink)',transition:'transform .18s ease',willChange:'transform'},
  fpGlyph:{width:84,height:84,display:'flex',alignItems:'center',justifyContent:'center',
    border:'1px solid rgba(245,245,240,.18)',borderRadius:'50%',
    transition:'background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease',
    boxShadow:'0 18px 40px -20px rgba(0,0,0,.7)'},
  fpLabel:{textAlign:'center',transition:'opacity .25s, transform .25s',pointerEvents:'none'},
  fpName:{fontSize:14,fontWeight:500,letterSpacing:'-.01em'},
  fpHandle:{fontSize:10,color:'var(--ink-3)',letterSpacing:'.04em',marginTop:2},
  fpDesc:{fontSize:10,color:'var(--ink-2)',letterSpacing:'.04em',marginTop:6,textTransform:'uppercase'},
};

if (!document.getElementById('sec-css')) {
  const s = document.createElement('style'); s.id='sec-css';
  s.textContent = `
    .plat-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .35s cubic-bezier(.2,.7,.2,1)}
    .plat-row:hover::before{width:3px}
    .plat-row:hover{background:rgba(245,245,240,.03)}
    .plat-row:hover [style*="↗"]{transform:translate(3px,-3px);color:var(--ink)}
    .work-btn:hover{background:#fff}
    .work-btn:hover span:last-child{transform:translate(3px,-3px)}
    a:hover .nav-mark .dot{filter:brightness(1.3)}
    [style*="fpGlyph"] svg, .fp-glyph svg{width:36px;height:36px;display:block}
  `;
  document.head.appendChild(s);
}

Object.assign(window, { Nav, Ticker, Content, About, Now, Work, Footer });