/* Hero — headline, CTAs, glass product preview illustration */
function Hero({ onDemo }) {
  return (
    <section className="lab-hero" id="hero">
      <div className="lab-hero-glow" />
      <div className="lab-container">
        <div className="lab-hero-grid">
          <div>
            <Reveal><Eyebrow>Holding de Tecnologia · MicroSaaS &amp; IA</Eyebrow></Reveal>
            <Reveal delay={60} as="h1" className="">Construímos <span className="ds-gradient-text">softwares inteligentes</span> para transformar negócios.</Reveal>
            <Reveal delay={120}><p className="sub">A Lab MicroSaaS desenvolve soluções SaaS e Inteligência Artificial para empresas que desejam crescer com tecnologia.</p></Reveal>
            <Reveal delay={180}>
              <div className="lab-hero-cta">
                <Button size="lg" href="#produtos" iconRight="arrow-right">Conhecer Produtos</Button>
                <Button size="lg" variant="outline" onClick={onDemo}>Agendar Demonstração</Button>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div className="lab-hero-meta">
                <div className="stat"><b>4</b><span>SaaS no ecossistema</span></div>
                <div className="stat"><b>+IA</b><span>Automações integradas</span></div>
                <div className="stat"><b>100%</b><span>Foco em nichos</span></div>
              </div>
            </Reveal>
          </div>
          <Reveal delay={160} className="lab-preview">
            <div className="lab-preview-card">
              <div className="bar"><i /><i /><i /></div>
              <div className="lab-preview-inner">
                <div className="lab-prev-row">
                  <div className="lab-prev-tile"><Icon name="layout-dashboard" size={20} color="#fff" /></div>
                  <div style={{ flex: 1 }}>
                    <div className="lab-prev-line" style={{ width: "55%", marginBottom: 7 }} />
                    <div className="lab-prev-line" style={{ width: "78%" }} />
                  </div>
                </div>
                <div className="lab-prev-chart">
                  {[42, 64, 38, 80, 56, 96, 70].map((h, i) => <span key={i} style={{ height: h + "%" }} />)}
                </div>
                <div className="lab-prev-row">
                  <div className="lab-prev-line" style={{ width: "100%", height: 7 }} />
                </div>
              </div>
            </div>
            <div className="lab-float f1"><span className="ic" style={{ background: "var(--gradient-brand)" }}><Icon name="brain-circuit" size={16} color="#fff" /></span> IA ativa</div>
            <div className="lab-float f2"><span className="ic" style={{ background: "#25D366" }}><Icon name="trending-up" size={16} color="#fff" /></span> +38% eficiência</div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;