// Hero — asymmetric composition with rotating copy, stacked browser frames
// showing the two real live sites, a circular seal, and stats strip.

window.AtHero = () => {
  const words = ['websites.', 'automations.', 'AI systems.', 'mobile apps.', 'cloud infrastructure.'];
  const [w, setW] = React.useState('');
  const [wI, setWI] = React.useState(0);
  const [wD, setWD] = React.useState(false);
  const [scroll, setScroll] = React.useState(0);

  React.useEffect(() => {
    const h = () => setScroll(window.scrollY);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  React.useEffect(() => {
    const c = words[wI];
    if (!wD && w === c) { const t = setTimeout(() => setWD(true), 1800); return () => clearTimeout(t); }
    if (wD && w === '') { setWD(false); setWI((i) => (i + 1) % words.length); return; }
    const t = setTimeout(() => setW(wD ? c.slice(0, w.length - 1) : c.slice(0, w.length + 1)), wD ? 28 : 72);
    return () => clearTimeout(t);
  }, [w, wD, wI]);

  return (
    <section id="top" style={{
      position: 'relative',
      padding: '48px 40px 72px',
      maxWidth: 1480, margin: '0 auto',
    }}>
      {/* subtle textured backdrop */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(circle at 80% 30%, rgba(176,74,46,0.06) 0%, transparent 50%)',
      }} />

      <div style={{
        position: 'relative',
        display: 'grid', gridTemplateColumns: '1.15fr 0.85fr',
        gap: 48, minHeight: 640, alignItems: 'start',
      }}>
        {/* LEFT */}
        <div style={{ paddingTop: 40, position: 'relative', zIndex: 2 }}>
          <Eyebrow>A Los Angeles team · est. 2016</Eyebrow>

          <h1 style={{
            fontFamily: TC.serif,
            fontSize: 'clamp(56px, 8.6vw, 124px)',
            lineHeight: 0.92,
            letterSpacing: -3,
            fontWeight: 400,
            margin: '32px 0 56px',
            color: TC.ink,
          }}>
            We build<br />
            <span style={{ position: 'relative', display: 'inline-block', paddingBottom: '0.12em' }}>
              <span style={{ fontStyle: 'italic', color: TC.terraDeep }}>
                {w || '\u00A0'}
              </span>
              <span className="at-caret">|</span>
            </span>
          </h1>

          <p style={{
            fontSize: 20, lineHeight: 1.5,
            color: TC.inkSoft, maxWidth: 540, marginBottom: 40,
          }}>
            Guama.dev is a small team for businesses that'd rather talk to
            humans than sit through a sales funnel. We build websites,
            automation, AI systems, and work in the cloud.
          </p>

          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#contact" className="at-btn at-btn-pri">
              Start a project
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8">
                <path d="M3 11L11 3M11 3H5M11 3V9" strokeLinecap="round" />
              </svg>
            </a>
            <a href="#work" className="at-btn at-btn-ghost">
              See the work
            </a>
          </div>

          {/* clients strip */}
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: `1px solid ${TC.line}` }}>
            <div style={{ fontFamily: TC.mono, fontSize: 11,
              color: TC.mute, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 16 }}>
              Recently shipped
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px 20px', alignItems: 'center' }}>
              {[
                'Hamilton SRLA', 'Glance', 'Meridian Dental',
                'Forge & Fern', 'Northbound HVAC',
              ].map((c, i) => (
                <React.Fragment key={c}>
                  {i > 0 && <span style={{ width: 3, height: 3, borderRadius: 2, background: TC.muteLight }} />}
                  <span style={{
                    fontFamily: TC.serif, fontSize: 19, letterSpacing: -0.3,
                    color: TC.inkSoft, fontStyle: i % 2 ? 'italic' : 'normal',
                  }}>{c}</span>
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — stacked frames */}
        <div style={{ position: 'relative', minHeight: 640 }}>
          {/* top frame — SRLA */}
          <div style={{
            position: 'absolute',
            top: 20, right: 0, width: 380,
            borderRadius: 6, overflow: 'hidden',
            boxShadow: '0 24px 48px -16px rgba(26,22,18,0.25), 0 0 0 1px rgba(26,22,18,0.08)',
            zIndex: 2,
            transform: `translate(${Math.min(scroll * 0.02, 12)}px, ${scroll * 0.03}px) rotate(-3deg)`,
            transition: 'transform 0.05s linear',
            background: '#fff',
          }}>
            <BrowserBar url="srla.hamiltonhs.org" dark />
            <div style={{ height: 240, position: 'relative', overflow: 'hidden' }}>
              <img src="atelier/assets/srla-screenshot.png" alt="Hamilton SRLA"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
            </div>
          </div>

          {/* bottom frame — Glance */}
          <div style={{
            position: 'absolute',
            bottom: 80, left: -16, width: 340,
            borderRadius: 6, overflow: 'hidden',
            boxShadow: '0 24px 48px -16px rgba(26,22,18,0.3), 0 0 0 1px rgba(26,22,18,0.08)',
            zIndex: 3,
            transform: `translate(0, ${-scroll * 0.04}px) rotate(4deg)`,
            transition: 'transform 0.05s linear',
            background: '#fff',
          }}>
            <BrowserBar url="glance.guama.dev" dark />
            <div style={{ height: 220, position: 'relative', overflow: 'hidden', background: '#0b0b0b' }}>
              <img src="atelier/assets/glance-screenshot.png" alt="Glance"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
            </div>
          </div>

          {/* label strip */}
          <div style={{
            position: 'absolute', bottom: 10, right: 0,
            display: 'flex', alignItems: 'center', gap: 10,
            fontFamily: TC.mono, fontSize: 10, color: TC.mute,
            letterSpacing: 2, textTransform: 'uppercase',
          }}>
            <span style={{ width: 20, height: 1, background: TC.line }} />
            Recently shipped
          </div>
        </div>
      </div>

      {/* stats row */}
      <div style={{
        marginTop: 80, paddingTop: 32,
        borderTop: `1px solid ${TC.line}`,
        display: 'grid', gridTemplateColumns: '1fr repeat(4, auto)',
        gap: 48, alignItems: 'baseline',
      }}>
        <div style={{ fontFamily: TC.mono, fontSize: 11, color: TC.mute,
          letterSpacing: 2, textTransform: 'uppercase' }}>
          ↓ Ten years of measured work
        </div>
        {[
          ['52', 'projects shipped'],
          ['10', 'years in practice'],
          ['3', 'people, deeply'],
          ['2,400', 'hours automated'],
        ].map(([n, l]) => (
          <div key={l} style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: TC.serif, fontSize: 40, lineHeight: 1,
              letterSpacing: -1.2, color: TC.ink,
            }}>{n}</div>
            <div style={{ fontSize: 12, color: TC.mute, marginTop: 6, letterSpacing: 0.2 }}>
              {l}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

window.AtMarquee = () => (
  <div style={{
    background: TC.ink, color: TC.bone,
    padding: '20px 0', overflow: 'hidden',
    borderTop: `1px solid ${TC.ink90}`,
    borderBottom: `1px solid ${TC.ink90}`,
  }}>
    <div style={{
      display: 'flex', whiteSpace: 'nowrap',
      animation: 'atMarqueeSlow 50s linear infinite',
      fontFamily: TC.serif, fontSize: 28, fontStyle: 'italic',
      letterSpacing: -0.5,
    }}>
      {Array.from({ length: 3 }).map((_, j) => (
        <div key={j} style={{ display: 'flex', alignItems: 'center', paddingRight: 48, flexShrink: 0 }}>
          {['Websites', 'Automation', 'AI systems', 'Mobile apps', 'Cloud infrastructure', 'Internal tools', 'E-commerce', 'Data pipelines']
            .map((t, i) => (
              <React.Fragment key={i}>
                <span>{t}</span>
                <span style={{ color: TC.terra, margin: '0 32px', fontFamily: 'sans-serif', fontSize: 16, fontStyle: 'normal' }}>✦</span>
              </React.Fragment>
            ))}
        </div>
      ))}
    </div>
    <style>{`
      @keyframes atMarqueeSlow { to { transform: translateX(-33.333%); } }
    `}</style>
  </div>
);