/* Animated hero with live terminal */

const HERO_ASCII = String.raw`
██╗    ██╗██╗███╗   ██╗███████╗████████╗██╗      █████╗ ██████╗
██║    ██║██║████╗  ██║██╔════╝╚══██╔══╝██║     ██╔══██╗██╔══██╗
██║ █╗ ██║██║██╔██╗ ██║█████╗     ██║   ██║     ███████║██████╔╝
██║███╗██║██║██║╚██╗██║██╔══╝     ██║   ██║     ██╔══██║██╔══██╗
╚███╔███╔╝██║██║ ╚████║███████╗   ██║   ███████╗██║  ██║██████╔╝
 ╚══╝╚══╝ ╚═╝╚═╝  ╚═══╝╚══════╝   ╚═╝   ╚══════╝╚═╝  ╚═╝╚═════╝
   python · php · docker · nginx · seo  ──  работаю как разработчик
`;

const TERMINAL_SCENES = [
  {
    cmd: 'winetlab status',
    lines: [
      { kind: 'out', text: 'available · принимаю небольшие задачи' },
      { kind: 'muted', text: 'отвечу в течение нескольких часов' },
    ],
  },
  {
    cmd: 'winetlab fix --form contact.php',
    lines: [
      { kind: 'out', text: 'scan: 4 issues found in /forms/contact.php' },
      { kind: 'warn', text: '⚠  PHPMailer creds in plain text · letter goes to spam' },
      { kind: 'warn', text: '⚠  no CSRF token · бот-спам через форму' },
      { kind: 'ok',   text: '✓  applied fixes · отправил тестовое письмо' },
      { kind: 'out', text: 'eta: 2h · цена от 3 000 ₽' },
    ],
  },
  {
    cmd: 'winetlab audit https://your-site.ru',
    lines: [
      { kind: 'out', text: 'crawling 312 pages · robots.txt · sitemap.xml' },
      { kind: 'err',  text: '✗  17 страниц с дублями canonical' },
      { kind: 'err',  text: '✗  schema.org Article невалидна (missing author)' },
      { kind: 'ok',   text: '✓  отчёт + правки готовы · pdf отправил' },
    ],
  },
  {
    cmd: 'winetlab deploy --vps --docker --ssl',
    lines: [
      { kind: 'out', text: 'preparing nginx reverse proxy · letsencrypt · docker-compose' },
      { kind: 'ok',  text: '✓  app online · https://example.ru · uptime 99.9%' },
      { kind: 'muted', text: 'передаю инструкцию по обновлениям' },
    ],
  },
];

function Terminal() {
  const [scene, setScene] = React.useState(0);
  const [phase, setPhase] = React.useState('cmd'); // cmd → out → idle
  const [history, setHistory] = React.useState([]); // completed scenes (cap at 1 previous)
  const current = TERMINAL_SCENES[scene];

  const cmdText = useTyping(current.cmd, {
    speed: 28,
    start: phase === 'cmd',
    onDone: () => setPhase('out'),
  });

  // Reset typing when scene changes
  React.useEffect(() => { setPhase('cmd'); }, [scene]);

  // After output appears, wait then advance
  React.useEffect(() => {
    if (phase !== 'out') return;
    const t = setTimeout(() => setPhase('idle'), 1400 + current.lines.length * 200);
    return () => clearTimeout(t);
  }, [phase, scene]);

  React.useEffect(() => {
    if (phase !== 'idle') return;
    const t = setTimeout(() => {
      // archive current scene into history (cap at last 1 so terminal stays full)
      setHistory((h) => [current].slice(-1));
      setScene((s) => (s + 1) % TERMINAL_SCENES.length);
    }, 1200);
    return () => clearTimeout(t);
  }, [phase]);

  return (
    <div className="terminal">
      <div className="terminal-head">
        <div className="dots"><span /><span /><span /></div>
        <div className="title">~/winetlab — zsh — 80×24</div>
        <div className="tabs">
          <span className="on">main</span>
          <span>logs</span>
        </div>
      </div>
      <div className="terminal-body">
        <pre className="ascii-art">{HERO_ASCII}</pre>

        <div className="term-line muted">— готов к работе. чем помочь?</div>
        <div style={{ height: 6 }} />

        {/* Previous scene (dimmed) */}
        {history.map((h, hi) => (
          <div key={`hist-${hi}-${h.cmd}`} className="term-history">
            <div className="term-line in">
              <span className="prompt">$</span><span>{h.cmd}</span>
            </div>
            {h.lines.map((l, i) => (
              <div key={i} className={`term-line ${l.kind}`}>{l.text}</div>
            ))}
            <div style={{ height: 6 }} />
          </div>
        ))}

        {/* Current scene */}
        <div className="term-line in">
          <span className="prompt">$</span>
          <span>
            {cmdText}
            {phase === 'cmd' && <span className="term-cursor" />}
          </span>
        </div>

        {phase !== 'cmd' && current.lines.map((l, i) => (
          <SceneLine key={`${scene}-${i}`} idx={i} kind={l.kind} text={l.text} />
        ))}

        {phase === 'idle' && (
          <div className="term-line in" style={{ marginTop: 4 }}>
            <span className="prompt">$</span>
            <span className="term-cursor" />
          </div>
        )}
      </div>
    </div>
  );
}

function SceneLine({ idx, kind, text }) {
  // Stagger appearance
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setShow(true), 120 + idx * 180);
    return () => clearTimeout(t);
  }, []);
  return (
    <div
      className={`term-line ${kind}`}
      style={{
        opacity: show ? 1 : 0,
        transform: show ? 'none' : 'translateY(4px)',
        transition: 'opacity 0.25s, transform 0.25s',
      }}
    >
      {text}
    </div>
  );
}

function Hero({ setRoute }) {
  const contact = getPublicContact();
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <Reveal as="div" className="hero-eyebrow">
            <span className="tag">v3.5</span>
            <span>Python · PHP · Docker · Nginx · SEO</span>
          </Reveal>

          <Reveal as="h1" className="hero-title" delay={80}>
            Технические задачи<br />
            для сайтов <span className="accent">без агентств</span><span className="cursor-blink"></span>
          </Reveal>

          <Reveal as="p" className="hero-sub" delay={160}>
            {/* Я — {contact.specialist_name || ''}, <strong>{contact.specialist_title || ''}</strong>.  */}
            Исправляю ошибки, настраиваю SEO, серверы, формы и API. Без длинных договоров: одна
            задача — одно решение — понятная цена.
          </Reveal>

          <Reveal as="div" className="hero-cta-row" delay={240}>
            <Magnetic>
              <a href="#" onClick={(e) => { e.preventDefault(); setRoute('contact'); window.scrollTo(0,0); }} className="btn btn-primary">
                Оставить заявку <span className="btn-arrow">→</span>
              </a>
            </Magnetic>
            <a href="#stack" onClick={(e) => { e.preventDefault(); scrollToId('stack'); }} className="btn btn-ghost">
              <span style={{ color: 'var(--wine)' }}>$</span> что я умею
            </a>
          </Reveal>

          <Reveal as="div" className="hero-meta" delay={320}>
            <div>
              <strong>5+ лет</strong>
              опыта с PHP, Python, Docker
            </div>
            <div>
              <strong>точечные задачи</strong>
              от 2 000 ₽
            </div>
            <div>
              <strong>прямо или через</strong>
              фриланс-площадки
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <Terminal />
        </Reveal>
      </div>

      <Reveal as="div" className="hero-strip" delay={400} style={{ marginTop: 80 }}>
        <div className="container hero-strip-inner" style={{ padding: 0 }}>
          {[
            { k: 'uptime', v: <><em>99.9</em>% по последним проектам</> },
            { k: 'response', v: <>обычно &lt;<em>2</em> часов</> },
            { k: 'start', v: <>от <em>2 000</em> ₽</> },
            { k: 'stack', v: <><em>PHP</em> · Python · Docker · Nginx</> },
            { k: 'format', v: <>напрямую · <em>безопасная сделка</em></> },
          ].map((it, i) => (
            <div key={i} className="hero-strip-item">
              <div className="k"># {it.k}</div>
              <div className="v">{it.v}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

window.Hero = Hero;