/* Hero — the impact opener.
   Left: messaging + CTAs.
   Right: a cinematic "report writing itself" mockup — MRI scan with scanline + crosshair,
   structured fields typing themselves out, confidence meter, live status. */

function useTypewriter(text, active, delay = 0, speed = 22) {
  const [out, setOut] = React.useState("");
  React.useEffect(() => {
    if (!active) { setOut(""); return; }
    let cancel = false;
    let timeout;
    const start = () => {
      let i = 0;
      const tick = () => {
        if (cancel) return;
        setOut(text.slice(0, i));
        if (i < text.length) {
          i++;
          timeout = setTimeout(tick, speed + Math.random() * 30);
        }
      };
      tick();
    };
    timeout = setTimeout(start, delay);
    return () => { cancel = true; clearTimeout(timeout); };
  }, [text, active, delay, speed]);
  return out;
}

function ReportMock() {
  const [phase, setPhase] = React.useState(0); // 0..3 cycling
  React.useEffect(() => {
    const t = setTimeout(() => setPhase(p => (p + 1) % 4), [2200, 3000, 3400, 2400][phase]);
    return () => clearTimeout(t);
  }, [phase]);

  const t1 = useTypewriter("Resonancia Magnética de cerebro en múltiples planos y secuencias.", phase >= 0, 200, 14);
  const t2 = useTypewriter("Área focal de engrosamiento cortical y discreta irregularidad de la unión córtico-subcortical en la región parietal izquierda.",
                            phase >= 1, 100, 12);
  const t3 = useTypewriter("Hallazgos compatibles con displasia cortical focal en región parietal izquierda.",
                            phase >= 2, 100, 14);
  const showCursor = phase < 3;

  return (
    <div className="hero-mock" aria-hidden="true">
      <div className="titlebar">
        <div className="dots"><i/><i/><i/></div>
        <div className="titletext">DeltAi Report · informe-4587-21.draft</div>
        <span className="live"><i/>en vivo</span>
      </div>
      <div className="body">
        <div className="scan">
          <img src={(window.__resources && window.__resources.heroReport) || "assets/product-report-laptop.png"} alt="" style={{filter:"blur(0px) brightness(0.7) saturate(1.1)", objectPosition:"left center"}} />
          <div className="scanline" />
          <div className="crosshair" />
          <div className="overlay-pin">
            <span className="pin">FLAIR · ax</span>
            <span className="pin">Parietal · izq</span>
            <span className="pin">ROI · 95%</span>
          </div>
        </div>
        <div className="report">
          <div className="row">
            <span className="label">Técnica</span>
            <div className="typed">{t1}{showCursor && phase === 0 && <span className="cursor" />}</div>
          </div>
          <div className="row">
            <span className="label">Hallazgos</span>
            <div className="typed">{t2}{showCursor && phase === 1 && <span className="cursor" />}</div>
          </div>
          <div className="row">
            <span className="label">Conclusión</span>
            <div className="conclusion">
              {t3}{showCursor && phase === 2 && <span className="cursor" />}
            </div>
          </div>
          <div className="footrow">
            <div className="confidence">
              <span>Confianza IA</span>
              <div className="bar"><i/></div>
              <span className="v">95%</span>
            </div>
            <span className="timer">02:48</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero({ onTrial, onDemo }) {
  return (
    <section className="container hero" id="top">
      <div>
        <div className="eyebrow-row">
          <span className="hero-chip"><span className="pulse" /> AI-DRIVEN RADIOLOGY</span>
          <span className="meta-pill" style={{fontSize:11, color:"var(--fg-3)", letterSpacing:"0.08em", textTransform:"uppercase"}}>
            <I.Award /> Diseñado por radiólogos
          </span>
        </div>
        <h1>
          Eficiencia e inteligencia<br/>
          en <span className="grad">Radiología.</span>
        </h1>
        <p className="sub">
          Tu asistente radiológico: <strong style={{color:"var(--fg-1)"}}>redactor y consultor</strong> potenciado por IA.
          Reducí el tiempo del informe a la mitad — sin perder calidad ni rigor académico.
        </p>
        <div className="actions">
          <button className="btn btn-primary btn-pill btn-lg" onClick={onTrial}>
            Empezá tus 15 informes gratis <I.Arrow style={{width:16, height:16}}/>
          </button>
          <button className="btn btn-ghost btn-lg" onClick={onDemo}>
            <I.Play style={{width:14, height:14, color:"var(--brand-cian-clinico)"}}/> Ver demo de 30s
          </button>
        </div>
        <div className="meta-row">
          <span className="meta-pill"><I.Shield/> Confidencial</span>
          <span className="meta-pill"><I.Doc/> Evidencia clínica</span>
          <span className="meta-pill"><I.Plug/> Compatible RIS/PACS</span>
          <span className="meta-pill"><I.Lock/> HIPAA-aligned</span>
        </div>
      </div>
      <div className="hero-visual">
        <ReportMock />
        <div className="float-card">
          <span className="ico-halo ico-sm ico-mint"><I.Check/></span>
          <div>
            <div className="l">Tiempo ahorrado · hoy</div>
            <div className="v">+2:14 hs</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;