// Hero — headline, subhead, CTAs, abstract metric dashboard.
function Hero() {
  const { Button, Card, Stat } = window.OltraSystemsDesignSystem_36063f;
  const { MessageCircle, CalendarX, TrendingDown, ArrowRight, BarChart } = window;
  return (
    <section id="top" data-screen-label="hero" style={{ background: "#0d1117", position: "relative", overflow: "hidden" }}>
      {/* GitHub-style neon glow orbs */}
      <div className="gh-glow gh-glow--purple" style={{ width: 560, height: 560, top: "-160px", right: "-120px" }} />
      <div className="gh-glow gh-glow--blue" style={{ width: 520, height: 520, bottom: "-220px", left: "-140px" }} />
      <div className="gh-glow gh-glow--pink" style={{ width: 300, height: 300, top: "30%", left: "42%", opacity: 0.5 }} />
      <window.Decor kind="molar" opacity={0.035} style={{ top: "60px", left: "-70px" }} />
      {/* glowing beam along the bottom edge */}
      <div className="gh-beam" style={{ position: "absolute", bottom: 0, left: "8%", right: "8%" }} />
      <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "clamp(3.5rem,7vw,6.5rem) 1.5rem", position: "relative", zIndex: 1 }}>
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(2rem,5vw,4.5rem)", alignItems: "center" }}>
          <window.Reveal>
            <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", fontSize: "0.8125rem", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "#8b949e", marginBottom: "1.25rem" }}>
              <span className="gh-pulse" style={{ width: 6, height: 6, borderRadius: 999, background: "#58a6ff", boxShadow: "0 0 10px rgba(88,166,255,0.9)" }} />
              Sistemas para clínicas dentales
            </span>
            <h1 style={{ margin: 0, fontSize: "clamp(2.25rem,5vw,3.75rem)", fontWeight: 800, lineHeight: 1.06, letterSpacing: "-0.03em", color: "#f0f6fc" }}>
              Tu clínica dental pierde pacientes cada día.
              <span className="gh-gradient-text" style={{ display: "block" }}>No por falta de leads. Por falta de sistema.</span>
            </h1>
            <p style={{ margin: "1.5rem 0 0", fontSize: "clamp(1rem,1.4vw,1.1875rem)", lineHeight: 1.6, color: "#c9d1d9", maxWidth: "34rem" }}>
              En Oltra Systems automatizamos la respuesta, el seguimiento y la conversión de pacientes para clínicas dentales privadas. Más pacientes. Menos caos operativo.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem", marginTop: "2rem", alignItems: "center" }}>
              <Button variant="primary" size="lg" href={window.CALENDLY} target="_blank" rel="noopener noreferrer" iconRight={<ArrowRight size={18} />}>Solicitar Diagnóstico Express — Gratis</Button>
              <Button variant="ghost" surface="dark" href="#proceso" iconRight={<ArrowRight size={16} />}>Ver cómo funciona</Button>
            </div>
          </window.Reveal>

          <window.Reveal delay={120}>
            <Card surface="light" padding="1.5rem" style={{ background: "rgba(22,27,34,0.85)", backdropFilter: "blur(6px)", border: "1px solid rgba(188,140,255,0.28)", boxShadow: "0 0 0 1px rgba(188,140,255,0.12), 0 0 56px rgba(163,113,247,0.18), 0 24px 60px -20px rgba(1,4,9,0.8)" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1.25rem" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", fontSize: "0.8125rem", fontWeight: 600, color: "#8b949e" }}>
                  <BarChart size={16} color="#8b949e" /> Panel de la clínica
                </span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.4rem", fontSize: "0.6875rem", fontWeight: 600, color: "#f85149", background: "rgba(248,81,73,0.08)", border: "1px solid rgba(248,81,73,0.2)", padding: "0.25rem 0.5rem", borderRadius: 999 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: "#da3633" }} /> SIN SISTEMA
                </span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.875rem" }}>
                {[
                  { icon: <MessageCircle size={18} />, v: "12", l: "leads sin responder" },
                  { icon: <CalendarX size={18} />, v: "3", l: "no-shows esta semana" },
                ].map((m, i) => (
                  <div key={i} style={{ background: "#0d1117", border: "1px solid rgba(240,246,252,0.1)", borderRadius: 12, padding: "1rem" }}>
                    <Stat value={m.v} label={m.l} tone="danger" surface="light" icon={m.icon} />
                  </div>
                ))}
              </div>
              <div style={{ marginTop: "0.875rem", background: "rgba(248,81,73,0.08)", border: "1px solid rgba(248,81,73,0.16)", borderRadius: 12, padding: "1.125rem 1rem", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div>
                  <div style={{ fontSize: "1.875rem", fontWeight: 700, letterSpacing: "-0.02em", color: "#f85149", lineHeight: 1, textShadow: "0 0 20px rgba(248,81,73,0.5)" }}>€4.200</div>
                  <div style={{ fontSize: "0.8125rem", color: "#8b949e", marginTop: "0.375rem" }}>en oportunidades perdidas</div>
                </div>
                <TrendingDown size={40} color="#ffa198" strokeWidth={1.75} />
              </div>
              {/* mini sparkbars */}
              <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 40, marginTop: "1rem", padding: "0 2px" }}>
                {[40, 55, 38, 62, 30, 48, 26, 58, 22, 44, 18, 34].map((h, i) => (
                  <div key={i} style={{ flex: 1, height: `${h}%`, background: i % 2 ? "rgba(240,246,252,0.08)" : "rgba(240,246,252,0.16)", borderRadius: 2 }} />
                ))}
              </div>
            </Card>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;