// AveraTech — Hero with animated terminal/code demo
const { useEffect, useRef, useState } = React;

const HERO_SEQUENCES = [
  {
    label: 'e-commerce sob medida',
    lines: [
      { t: '$', c: 'mono-prompt', text: 'avera build --target ecommerce' },
      { t: '✓', c: 'mono-ok', text: 'Catálogo, checkout e gestão de pedidos' },
      { t: '✓', c: 'mono-ok', text: 'Integração com ERP e meios de pagamento' },
      { t: '✓', c: 'mono-ok', text: 'Painel para o time da marca' },
      { t: '→', c: 'mono-info', text: 'Loja no ar pronta para escalar' },
    ],
    metric: { value: 'Loja sob medida', label: 'do design à operação' },
  },
  {
    label: 'site institucional',
    lines: [
      { t: '$', c: 'mono-prompt', text: 'avera build --target website' },
      { t: '✓', c: 'mono-ok', text: 'Identidade visual aplicada ao produto digital' },
      { t: '✓', c: 'mono-ok', text: 'Performance e SEO técnico' },
      { t: '✓', c: 'mono-ok', text: 'CMS para o time atualizar sem dor' },
      { t: '→', c: 'mono-info', text: 'Pronto para receber tráfego' },
    ],
    metric: { value: 'Site rápido', label: 'que converte de verdade' },
  },
  {
    label: 'consultoria & sistema interno',
    lines: [
      { t: '$', c: 'mono-prompt', text: 'avera consult --discovery' },
      { t: '✓', c: 'mono-ok', text: 'Diagnóstico do processo atual' },
      { t: '✓', c: 'mono-ok', text: 'Desenho do sistema sob medida' },
      { t: '✓', c: 'mono-ok', text: 'Roadmap por fase, sem surpresa' },
      { t: '→', c: 'mono-info', text: 'Time alinhado, plano em execução' },
    ],
    metric: { value: 'Plano claro', label: 'do problema à entrega' },
  },
];

function Hero() {
  const [seqIdx, setSeqIdx] = useState(0);
  const [typed, setTyped] = useState([]); // array of typed lines (full text so far)
  const [done, setDone] = useState(false);
  const cancelled = useRef(false);

  useEffect(() => {
    cancelled.current = false;
    setTyped([]);
    setDone(false);
    const seq = HERO_SEQUENCES[seqIdx];

    let lineIdx = 0;
    let charIdx = 0;
    let acc = seq.lines.map(() => '');

    const tick = () => {
      if (cancelled.current) return;
      if (lineIdx >= seq.lines.length) {
        setDone(true);
        const hold = setTimeout(() => {
          if (!cancelled.current) setSeqIdx(i => (i + 1) % HERO_SEQUENCES.length);
        }, 2800);
        return () => clearTimeout(hold);
      }
      const cur = seq.lines[lineIdx];
      if (charIdx <= cur.text.length) {
        acc[lineIdx] = cur.text.slice(0, charIdx);
        setTyped([...acc]);
        charIdx++;
        const delay = lineIdx === 0 ? 32 : 18;
        setTimeout(tick, delay);
      } else {
        lineIdx++;
        charIdx = 0;
        setTimeout(tick, 280);
      }
    };
    const start = setTimeout(tick, 250);
    return () => { cancelled.current = true; clearTimeout(start); };
  }, [seqIdx]);

  const seq = HERO_SEQUENCES[seqIdx];

  return (
    <section id="top" className="hero">
      <div className="hero-bg grid-bg" />
      <div className="hero-orb" />
      <div className="container hero-inner">
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="dot" />
            Software sob medida · Sites · Consultoria
          </div>
          <h1 className="hero-title">
            Tecnologia <span className="hero-accent">sob medida</span> para o seu negócio.
          </h1>
          <p className="hero-sub">
            A AveraTech projeta e constrói softwares, sites e sistemas feitos para o jeito que a sua empresa trabalha.
            Sem template engessado — tecnologia que serve a operação, não o contrário.
          </p>
          <div className="hero-ctas">
            <a href="#contato" className="btn btn-primary">
              Começar um projeto
              <span className="arrow">→</span>
            </a>
            <a href="#servicos" className="btn btn-ghost">
              Conhecer os serviços
            </a>
          </div>
          <div className="hero-trust mono">
            <span className="hero-trust-label">Trabalhamos com</span>
            <a href="#clientes" className="hero-trust-link">
              marcas que crescem em paralelo com a gente
              <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div className="hero-term">
          <div className="hero-term-bar">
            <div className="hero-term-lights">
              <span /><span /><span />
            </div>
            <div className="hero-term-title mono">avera-cli — {seq.label}</div>
            <div className="hero-term-pills">
              {HERO_SEQUENCES.map((_, i) => (
                <button
                  key={i}
                  className={"hero-term-pill " + (i === seqIdx ? 'active' : '')}
                  onClick={() => setSeqIdx(i)}
                  aria-label={"Demo " + (i + 1)}
                />
              ))}
            </div>
          </div>
          <div className="hero-term-body mono">
            {seq.lines.map((line, i) => {
              const text = typed[i] ?? '';
              if (!text) return null;
              return (
                <div key={i} className={"hero-term-line " + line.c}>
                  <span className="hero-term-tok">{line.t}</span>
                  <span className="hero-term-text">{text}</span>
                  {i === typed.length - 1 && !done && <span className="hero-term-cursor">▍</span>}
                </div>
              );
            })}
            {done && (
              <div className="hero-term-card fade-up">
                <div className="hero-term-card-metric">{seq.metric.value}</div>
                <div className="hero-term-card-label">{seq.metric.label}</div>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="hero-marquee">
        <div className="hero-marquee-track">
          {[...Array(2)].map((_, k) => (
            <div className="hero-marquee-row mono" key={k}>
              <span>SOFTWARE SOB MEDIDA</span>
              <span className="hero-marquee-sep">✦</span>
              <span>SISTEMAS WEB</span>
              <span className="hero-marquee-sep">✦</span>
              <span>INTEGRAÇÕES</span>
              <span className="hero-marquee-sep">✦</span>
              <span>CONSULTORIA DE PRODUTO</span>
              <span className="hero-marquee-sep">✦</span>
              <span>DEVOPS & CLOUD</span>
              <span className="hero-marquee-sep">✦</span>
              <span>ARQUITETURA</span>
              <span className="hero-marquee-sep">✦</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;