const Hero = () => {
  const stats = [
    ["+42%", "em agendamentos"],
    ["24/7", "atendimento sem pausa"],
    ["−65%", "tempo da equipe no WhatsApp"],
    ["−4x", "menos pacientes perdidos"],
  ];
  return (
    <section id="home" style={{position:"relative", paddingTop:74, overflow:"hidden"}}>
      {/* ambient backdrop */}
      <div aria-hidden style={{position:"absolute", inset:0, zIndex:0,
        background:`radial-gradient(60% 50% at 78% 12%, rgba(255,107,53,.16), transparent 60%),
                   radial-gradient(50% 50% at 8% 30%, rgba(0,206,201,.10), transparent 60%)`}}/>
      <div aria-hidden style={{position:"absolute", inset:0, zIndex:0, opacity:.5,
        backgroundImage:"linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px)",
        backgroundSize:"64px 64px",
        maskImage:"radial-gradient(75% 60% at 50% 25%, #000 30%, transparent 85%)",
        WebkitMaskImage:"radial-gradient(75% 60% at 50% 25%, #000 30%, transparent 85%)"}}/>

      <div className="wrap" style={{position:"relative", zIndex:1, paddingTop:32, paddingBottom:40}}>
        <div style={{display:"grid", gridTemplateColumns:"1.05fr .95fr", gap:40, alignItems:"start"}} className="hero-grid">
          <div>
            <span className="eyebrow" data-reveal>Sistema inteligente para clínicas de estética</span>
            <h1 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(30px, 4.4vw, 54px)", margin:"22px 0 0", lineHeight:1.12}}>
              Transformamos o atendimento da sua clínica em um processo <span className="grad-text">inteligente, organizado e escalável.</span>
            </h1>
            <p data-reveal data-reveal-delay="2" style={{fontSize:"clamp(15.5px,1.4vw,20px)", color:"var(--ink-dim)", maxWidth:540, margin:"24px 0 0", fontWeight:300}}>
              Implantamos um sistema exclusivo de automação para clínicas de estética que desejam aumentar os agendamentos, reduzir o tempo gasto com atendimento e oferecer uma experiência premium aos pacientes.
            </p>

            <ul data-reveal data-reveal-delay="2" style={{listStyle:"none", padding:0, margin:"22px 0 0", display:"grid", gap:10}} className="hero-checklist">
              {["Atendimento automático","Integração com WhatsApp","IA treinada para seu negócio","Implantação rápida"].map(item=>(
                <li key={item} style={{display:"flex", alignItems:"center", gap:10, fontSize:15.5, color:"var(--ink)"}}>
                  <Icon name="check" size={18} stroke="var(--accent)" style={{flexShrink:0}}/>
                  {item}
                </li>
              ))}
            </ul>

            <div data-reveal data-reveal-delay="3" style={{display:"flex", gap:14, flexWrap:"wrap", margin:"30px 0 0"}} className="hero-ctas">
              <a href="#contato" className="btn btn-primary" style={{padding:"16px 28px", fontSize:16}}>
                Solicitar uma avaliação da clínica
                <Icon name="arrow" size={18}/>
              </a>
              <a href="#metodologia" className="btn btn-ghost" style={{padding:"16px 24px", fontSize:15}}>
                <Icon name="play" size={16}/>
                Ver a metodologia
              </a>
            </div>

            <div data-reveal data-reveal-delay="4" style={{display:"flex", alignItems:"center", gap:12, margin:"30px 0 0", color:"var(--ink-mute)", fontSize:13}}>
              <div style={{display:"flex"}}>
                {["assets/clinica-1.png","assets/clinica-2.png","assets/clinica-3.png","assets/clinica-4.png"].map((src,i)=>(
                  <img key={i} src={src} alt="Clínica parceira" width={30} height={30}
                    style={{width:30,height:30,borderRadius:"50%",border:"2px solid var(--bg)",marginLeft:i?-9:0,flexShrink:0,objectFit:"cover"}}/>
                ))}
              </div>
              <span>Um número limitado de <strong style={{color:"var(--ink)"}}>clínicas parceiras</strong> atendendo com a Aura</span>
            </div>
          </div>

          {/* 3D gem */}
          <div data-reveal data-reveal-delay="2" style={{position:"relative", display:"flex", alignItems:"center", justifyContent:"center", marginTop:36}} className="hero-visual">
            <Gem height={420} className="hero-gem"/>
            {/* floating chat bubble */}
            <div style={{position:"absolute", left:"4%", bottom:"14%", zIndex:3}} className="hero-bubble hero-bubble-left">
              <FloatBubble side="left" text="Oi! Queria marcar minha limpeza de pele 😊" who="Paciente" delay={0}/>
            </div>
            <div style={{position:"absolute", right:"2%", top:"18%", zIndex:3}} className="hero-bubble hero-bubble-right">
              <FloatBubble side="right" text="Claro! Tenho amanhã 14h ou 16h. Qual prefere?" who="Aura · IA" delay={1.2}/>
            </div>
          </div>
        </div>

        {/* stats bar */}
        <div data-reveal style={{marginTop:54, display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:14}} className="hero-stats">
          {stats.map(([n,l],i)=>(
            <div key={i} className="card" style={{padding:"22px 24px"}}>
              <div className="grad-text hero-stat-num" style={{fontSize:36, fontWeight:800, letterSpacing:"-0.04em"}}>{n}</div>
              <div style={{fontSize:13.5, color:"var(--ink-dim)", marginTop:4}}>{l}</div>
            </div>
          ))}
        </div>

        {/* trust strip */}
        <div data-reveal style={{marginTop:46, display:"flex", alignItems:"center", gap:34, flexWrap:"wrap", justifyContent:"center", opacity:.6}}>
          <span style={{fontSize:12, letterSpacing:".18em", textTransform:"uppercase", color:"var(--ink-mute)"}}>Integra com</span>
          {[["whatsapp","WhatsApp"],["instagram","Instagram"],["calendar","Agenda da clínica"],["globe","Seu site"]].map(([ic,l])=>(
            <span key={l} style={{display:"inline-flex",alignItems:"center",gap:8,fontSize:15,fontWeight:500,color:"var(--ink-dim)"}}>
              <Icon name={ic} size={18} stroke="var(--ink-dim)"/>{l}
            </span>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 920px){
          .hero-grid{ grid-template-columns:1fr !important; }
          .hero-stats{ grid-template-columns:repeat(2,1fr) !important; }
        }
        @media (max-width: 640px){
          .hero-gem{ height:280px !important; }
          .hero-bubble{ max-width:56vw; }
          .hero-bubble-left{ left:0 !important; bottom:4% !important; }
          .hero-bubble-right{ right:0 !important; top:6% !important; }
          .hero-stat-num{ font-size:26px !important; }
          .hero-ctas .btn{ width:100%; }
          .hero-checklist li{ font-size:14px !important; }
        }
        @media (max-width: 380px){
          .hero-bubble{ display:none; }
        }
      `}</style>
    </section>
  );
};

const FloatBubble = ({ side, text, who, delay }) => (
  <div style={{
    maxWidth:230, padding:"12px 15px", borderRadius:16,
    borderBottomLeftRadius: side==="left"?4:16, borderBottomRightRadius: side==="right"?4:16,
    background: side==="right" ? "linear-gradient(180deg,#FF8757,#FF6B35)" : "rgba(22,27,28,.92)",
    color: side==="right" ? "#fff" : "var(--ink)",
    border: side==="right" ? "none" : "1px solid var(--glass-border)",
    backdropFilter:"blur(10px)",
    boxShadow:"0 18px 40px -18px rgba(0,0,0,.7)",
    animation:`floaty 5s ease-in-out ${delay}s infinite`,
  }}>
    <div style={{fontSize:10, fontWeight:700, letterSpacing:".08em", textTransform:"uppercase", opacity:.7, marginBottom:4}}>{who}</div>
    <div style={{fontSize:13.5, lineHeight:1.4}}>{text}</div>
    <style>{`@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}`}</style>
  </div>
);

window.Hero = Hero;