// Hero with animated terminal + scroll-driven headline
const { useEffect: useEffectH, useState: useStateH, useRef: useRefH } = React;

const HERO_LINES = [
{ t: 'whoami', kind: 'cmd' },
{ t: 'i help solopreneurs make more money in less time.', kind: 'out' },
{ t: 'cat services.json', kind: 'cmd' },
{ t: '{', kind: 'json' },
{ t: '  "websites":    "the kind that turn visitors into buyers",', kind: 'json' },
{ t: '  "automations": "your back-office, running while you sleep",', kind: 'json' },
{ t: '  "leadgen":     "calls booked on autopilot",', kind: 'json' },
{ t: '  "promise":     "two weeks. fixed price. or it\'s free."', kind: 'json' },
{ t: '}', kind: 'json' },
{ t: 'check inbox', kind: 'cmd' },
{ t: '● 3 new bookings overnight — coffee not required', kind: 'ok' },
{ t: 'status', kind: 'cmd' },
{ t: '● 2 spots open this month · founder pricing active', kind: 'ok' }];


function Typewriter({ lines, speed = 14, lineDelay = 90, onDone }) {
  const [rendered, setRendered] = useStateH([]);
  const [li, setLi] = useStateH(0);
  const [ci, setCi] = useStateH(0);

  useEffectH(() => {
    if (li >= lines.length) {onDone && onDone();return;}
    const cur = lines[li].t;
    if (ci < cur.length) {
      const id = setTimeout(() => setCi(ci + 1), speed + (cur[ci] === ' ' ? 6 : 0));
      return () => clearTimeout(id);
    } else {
      const id = setTimeout(() => {
        setRendered((r) => [...r, { ...lines[li], full: true }]);
        setLi(li + 1);
        setCi(0);
      }, lineDelay);
      return () => clearTimeout(id);
    }
  }, [li, ci, lines]);

  const cur = lines[li];
  return (
    <div>
      {rendered.map((ln, i) =>
      <TermLine key={i} {...ln} />
      )}
      {cur &&
      <TermLine {...cur} t={cur.t.slice(0, ci)} typing />
      }
    </div>);

}

function TermLine({ t, kind, typing }) {
  const prompt =
  <span className="term__prompt" style={{ marginRight: 8 }}>
      hadi<span className="term__muted">@systems</span>:<span className="term__prompt-2">~</span>$
    </span>;

  if (kind === 'cmd') {
    return (
      <div className="term__line">
        {prompt}<span>{t}</span>{typing && <span className="term__cursor" />}
      </div>);

  }
  if (kind === 'json') {
    return <div className="term__line" style={{ color: '#C8C2B0' }}>{t}{typing && <span className="term__cursor" />}</div>;
  }
  if (kind === 'ok') {
    return <div className="term__line term__ok">{t}{typing && <span className="term__cursor" />}</div>;
  }
  return <div className="term__line" style={{ color: '#D8D3C2' }}>{t}{typing && <span className="term__cursor" />}</div>;
}

function Hero() {
  const [tilt, setTilt] = useStateH({ x: 0, y: 0 });
  const wrapRef = useRefH(null);

  useEffectH(() => {
    const onMove = (e) => {
      const r = wrapRef.current?.getBoundingClientRect();
      if (!r) return;
      const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
      const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
      setTilt({ x, y });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <header id="top" ref={wrapRef} style={{
      position: 'relative',
      paddingTop: 120,
      paddingBottom: 80,
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      overflow: 'hidden'
    }}>
      {/* gridlines */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
        backgroundSize: '88px 88px',
        backgroundPosition: '0 0',
        opacity: .8,
        maskImage: 'radial-gradient(ellipse at 70% 30%, #000 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 70% 30%, #000 30%, transparent 75%)'
      }} />

      <div className="container hero-top" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24 }}>
        <div className="label">// hadi.systems · est. 2026</div>
        <div className="pill"><span className="dot" />2 spots open · this month</div>
      </div>

      <div className="container hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'center', marginTop: 64, marginBottom: 64 }}>
        <div>
          <Reveal>
            <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>for solopreneurs who are tired of doing it all</span>
          </Reveal>
          <h1 className="display display--xl" style={{ marginTop: 24 }}>
            <Reveal delay={1} as="span" style={{ display: 'block' }}>your business,</Reveal>
            <Reveal delay={2} as="span" style={{ display: 'block' }}>
              running <span className="italic-em">itself</span>
            </Reveal>
            <Reveal delay={3} as="span" style={{ display: 'block' }}>while you</Reveal>
            <Reveal delay={4} as="span" style={{ display: 'block', color: 'var(--accent)' }}>
              <span className="italic-em">sleep.</span>
            </Reveal>
          </h1>

          <Reveal delay={4} style={{ marginTop: 32, maxWidth: 520, fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)', textWrap: 'pretty' }}>
            i build websites that turn strangers into customers and quiet little systems
            that handle the boring stuff — replies, follow-ups, lead chasing — so you can
            actually take a weekend off. <strong style={{ fontWeight: 600, color: 'var(--ink)' }}></strong>
          </Reveal>

          <Reveal delay={4} className="hero-ctas" style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#booking" className="btn">
              get my free game plan
              <span className="arrow">→</span>
            </a>
            <a href="#work" className="btn btn--ghost">see how it works</a>
          </Reveal>
        </div>

        <div style={{
          transform: `perspective(1200px) rotateY(${tilt.x * -2.5}deg) rotateX(${tilt.y * 2}deg)`,
          transition: 'transform .15s ease-out'
        }}>
          <div className="term">
            <div className="term__bar">
              <div className="term__dots"><span /><span /><span /></div>
              <div className="term__title">hadi@systems ~ %</div>
            </div>
            <div className="term__body" style={{ minHeight: 320 }}>
              <Typewriter lines={HERO_LINES} />
            </div>
          </div>

          {/* shadow card behind */}
          <div aria-hidden="true" style={{
            position: 'absolute', zIndex: -1
          }} />
        </div>
      </div>

      <div className="container hero-bottom" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 24, flexWrap: 'wrap' }}>
        <Reveal className="hero-stats" style={{ display: 'flex', gap: 32, alignItems: 'baseline', color: 'var(--ink-2)' }}>
          <Stat n="14 days" l="from idea to live site" />
          <Stat n="10+ hrs" l="back in your week" />
          <Stat n="0 risk" l="guaranteed or it's free" />
        </Reveal>
        <div className="label" style={{ display: 'flex', gap: 16 }}>
          <span>scroll ↓</span>
          <span>or skip ahead</span>
        </div>
      </div>
    </header>);

}

function Stat({ n, l }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em' }}>{n}</div>
      <div className="label" style={{ marginTop: 6 }}>{l}</div>
    </div>);

}

Object.assign(window, { Hero });