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

// Interactive 3D-stack carousel for the hero. Three live sites rotate
// through featured / left-thumb / right-thumb positions. Hover pauses
// the auto-rotate, click advances. Frames stay perfectly upright.
window.AtHeroCarousel = () => {
  const sites = [
    {
      key: 'srla',
      url: 'srla.hamiltonhs.org',
      label: 'Hamilton SRLA',
      tag: 'Education',
      img: 'atelier/assets/srla-screenshot.png',
      bg: '#1E3A5F',
    },
    {
      key: 'metro',
      url: 'metrocitycleanout.com',
      label: 'Metro Citywide Cleanout',
      tag: 'Service biz',
      img: 'atelier/assets/metro-screenshot.png',
      bg: '#1B2230',
    },
    {
      key: 'glance',
      url: 'glance.guama.dev',
      label: 'Glance',
      tag: 'Product',
      img: 'atelier/assets/glance-screenshot.png',
      bg: '#0b0b0b',
    },
  ];

  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [hoverFrame, setHoverFrame] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setActive((a) => (a + 1) % sites.length), 3800);
    return () => clearInterval(id);
  }, [paused]);

  // positions: -1 = left thumb, 0 = center featured, 1 = right thumb
  const positionFor = (i) => {
    const d = ((i - active) % sites.length + sites.length) % sites.length;
    if (d === 0) return 0;
    if (d === 1) return 1;
    return -1;
  };

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: 'relative',
        height: 560,
        perspective: 1400,
      }}
    >
      {sites.map((s, i) => {
        const p = positionFor(i);
        const isCenter = p === 0;
        // diagonal layout: cards step down/right while staying upright
        const x = p === 0 ? 0 : p === -1 ? -180 : 180;
        const y = p === 0 ? 0 : p === -1 ? -70 : 70;
        const scale = p === 0 ? 1 : 0.74;
        const z = p === 0 ? 3 : 1;
        const opacity = p === 0 ? 1 : 0.5;
        const lift = isCenter && hoverFrame ? -8 : 0;
        return (
          <a
            key={s.key}
            href={`https://${s.url}`}
            target="_blank"
            rel="noopener"
            onClick={(e) => {
              if (!isCenter) {
                e.preventDefault();
                setActive(i);
              }
            }}
            onMouseEnter={() => isCenter && setHoverFrame(true)}
            onMouseLeave={() => setHoverFrame(false)}
            style={{
              position: 'absolute',
              top: 80, left: '50%',
              width: 400,
              marginLeft: -200,
              transform: `translate3d(${x}px, ${y + lift}px, 0) scale(${scale})`,
              transformOrigin: '50% 50%',
              transition: 'transform .7s cubic-bezier(.2,.7,.3,1), opacity .5s ease, box-shadow .35s',
              opacity,
              zIndex: z,
              borderRadius: 8,
              overflow: 'hidden',
              background: '#fff',
              boxShadow: isCenter
                ? (hoverFrame
                    ? '0 40px 70px -22px rgba(26,22,18,0.42), 0 0 0 1px rgba(26,22,18,0.10)'
                    : '0 28px 56px -18px rgba(26,22,18,0.32), 0 0 0 1px rgba(26,22,18,0.08)')
                : '0 12px 28px -10px rgba(26,22,18,0.22), 0 0 0 1px rgba(26,22,18,0.06)',
              cursor: 'pointer',
              textDecoration: 'none', color: 'inherit',
              filter: isCenter ? 'none' : 'saturate(0.85)',
              willChange: 'transform',
            }}
          >
            <BrowserBar url={s.url} dark />
            <div style={{ height: 250, position: 'relative', overflow: 'hidden', background: s.bg }}>
              <img src={s.img} alt={s.label}
                style={{ width: '100%', height: '100%', objectFit: 'cover',
                  objectPosition: 'top center', display: 'block',
                  transform: isCenter && hoverFrame ? 'scale(1.04)' : 'scale(1)',
                  transition: 'transform .8s cubic-bezier(.2,.7,.3,1)' }} />

              {/* center-only Live indicator (bottom-right, no overlay covering thumbnail) */}
              {isCenter && (
                <div style={{
                  position: 'absolute', bottom: 12, right: 12,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '6px 10px', borderRadius: 999,
                  background: 'rgba(15,23,42,0.72)', backdropFilter: 'blur(8px)',
                  color: TC.bone, fontFamily: TC.mono, fontSize: 10,
                  letterSpacing: 1.5, textTransform: 'uppercase',
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: 3,
                    background: '#7FE08A', animation: 'atPulse 1.6s ease-in-out infinite' }} />
                  Live
                </div>
              )}
            </div>
          </a>
        );
      })}

      {/* dot indicators + auto-rotate progress */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14,
      }}>
        {sites.map((s, i) => (
          <button
            key={s.key}
            onClick={() => setActive(i)}
            aria-label={`Show ${s.label}`}
            style={{
              position: 'relative',
              width: i === active ? 36 : 8, height: 8,
              borderRadius: 4, border: 0,
              background: i === active ? TC.terra : 'rgba(15,23,42,0.18)',
              transition: 'width .4s cubic-bezier(.2,.7,.3,1), background .3s',
              cursor: 'pointer', padding: 0, overflow: 'hidden',
            }}
          >
            {i === active && !paused && (
              <span style={{
                position: 'absolute', inset: 0,
                background: 'rgba(255,255,255,0.55)',
                animation: 'atCarouselFill 3.8s linear forwards',
                transformOrigin: 'left',
              }} />
            )}
          </button>
        ))}
      </div>

      <style>{`
        @keyframes atCarouselFill {
          from { transform: scaleX(0); }
          to   { transform: scaleX(1); }
        }
      `}</style>
    </div>
  );
};

window.AtHero = () => {
  const words = ['websites.', 'automations.', 'AI systems.', 'mobile apps.', 'cloud infra.'];
  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: 'clamp(16px, 2vw, 24px) clamp(24px, 4vw, 56px) 48px',
      maxWidth: 1800, 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: 16, 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={{ display: 'flex', flexWrap: 'wrap', gap: '10px 20px', alignItems: 'center' }}>
              {[
                'Hamilton SRLA', 'Glance', 'Metro Citywide Cleanout',
                '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 — interactive carousel of live sites */}
        <div style={{ position: 'relative', minHeight: 640 }}>
          <AtHeroCarousel />

          {/* 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: 56, paddingTop: 28,
        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>
);