// Hero — apresentação + 2 CTAs (Doctoralia / WhatsApp)
function Hero() {
  const words = ['Um', 'lugar', 'pra', 'respirar.'];
  const [m, setM] = React.useState(false);
  React.useEffect(() => { setM(true); }, []);
  const anim = (i) => ({
    display: 'inline-block', marginRight: '.26em',
    transform: m ? 'none' : 'translateY(40px)', opacity: m ? 1 : 0,
    transition: `transform .7s var(--ease-out) ${i * 0.08}s, opacity .7s var(--ease-out) ${i * 0.08}s`,
  });
  const fade = (d) => ({ transform: m ? 'none' : 'translateY(16px)', opacity: m ? 1 : 0,
    transition: `transform .6s var(--ease-out) ${d}s, opacity .6s var(--ease-out) ${d}s` });
  return (
    <section id="topo" style={{ position: 'relative', overflow: 'hidden', paddingTop: 92 }}>
      <HeroMesh />
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 56, alignItems: 'center', paddingTop: 40, paddingBottom: 96 }}>
          <div>
            <div style={fade(0.4)}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 15px', borderRadius: 999,
                background: 'var(--paper)', border: '1px solid var(--line)', fontSize: 13, fontWeight: 500, color: 'var(--ink-2)', boxShadow: 'var(--shadow-sm)' }}>
                <Star /> Doctoralia · 5,0 · 16 avaliações
              </span>
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(40px, 5vw, 72px)',
              lineHeight: 1.04, letterSpacing: '-.02em', color: 'var(--ink-2)', margin: '24px 0 0', textWrap: 'balance' }}>
              {words.map((w, i) => <span key={i} style={anim(i)}>{w}</span>)}
              <br />
              <span style={{ ...anim(4), fontStyle: 'italic', color: 'var(--brand)' }}>Pra você, pra dois, pra família.</span>
            </h1>
            <p style={{ ...fade(0.7), fontSize: 19, lineHeight: 1.6, color: 'var(--muted)', margin: '24px 0 0', maxWidth: '44ch' }}>
              Psicoterapia <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>individual, de casal e familiar</strong> em Curitiba —
              presencial no Bigorrilho ou online. Abordagem sistêmica, há quase 20 anos ajudando pessoas a viver melhor.
            </p>
            <div style={{ ...fade(0.82), display: 'flex', gap: 13, marginTop: 30, flexWrap: 'wrap' }}>
              <a href={window.DOCTORALIA} target="_blank" rel="noopener" className="btn btn-primary btn-lg">
                <Icon name="calendar" size={18} color="#fff" /> Agendar pelo Doctoralia
              </a>
              <a href={window.WHATSAPP} target="_blank" rel="noopener" className="btn btn-ghost btn-lg">
                <Icon name="whatsapp" size={18} /> Falar no WhatsApp
              </a>
            </div>
            <div className="meta-row" style={{ ...fade(0.95), marginTop: 26 }}>
              <span className="chk"><Icon name="check" size={16} /> CRP 08/11383</span>
              <span className="chk"><Icon name="check" size={16} /> Presencial · Online</span>
              <span className="chk"><Icon name="check" size={16} /> Adultos · Casais · Famílias</span>
            </div>
          </div>
          <div style={{ ...fade(0.5), transform: m ? 'scale(1)' : 'scale(.95)', transition: 'transform .8s var(--ease-out) .4s, opacity .8s var(--ease-out) .4s' }}>
            <PortraitCard />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroMesh() {
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      <div style={{ position: 'absolute', width: 560, height: 560, left: '-10%', top: '-14%', background: 'radial-gradient(circle, rgba(106,138,122,.18), transparent 65%)', filter: 'blur(60px)' }} />
      <div style={{ position: 'absolute', width: 620, height: 620, right: '-14%', top: '0%', background: 'radial-gradient(circle, rgba(216,230,221,.55), transparent 62%)', filter: 'blur(72px)' }} />
      <div style={{ position: 'absolute', width: 440, height: 440, left: '40%', top: '24%', background: 'radial-gradient(circle, rgba(212,184,150,.22), transparent 60%)', filter: 'blur(80px)' }} />
    </div>
  );
}

// Retrato da Maria Fernanda — foto real, framing 4:5, floating badges
function PortraitCard() {
  return (
    <div style={{ position: 'relative', maxWidth: 440, margin: '0 auto' }}>
      <div className="float" style={{
        aspectRatio: '4/5', borderRadius: 'var(--r-2xl)', overflow: 'hidden',
        backgroundColor: '#e6e2d8',
        boxShadow: 'var(--shadow-lg)', position: 'relative',
      }}>
        <img src="mf-hero.jpg" alt="Maria Fernanda Sebastiani Ribas — psicóloga em Curitiba" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        {/* gradient sutil pra dar profundidade nos badges */}
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 60%, rgba(15,23,21,.18) 100%)' }} />
      </div>
      {/* Floating badges */}
      <div className="float-2" style={{ position: 'absolute', bottom: -22, left: -22, background: '#fff', borderRadius: 18, padding: '14px 18px', boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 40, height: 40, borderRadius: 999, backgroundImage: 'linear-gradient(135deg, #6a8a7a, #4f6b5e)', backgroundColor: '#6a8a7a', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="heart" size={20} color="#fff" />
        </div>
        <div>
          <div style={{ fontSize: 12, color: 'var(--muted)' }}>Desde 2006</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: 'var(--ink-2)' }}>19 anos cuidando</div>
        </div>
      </div>
      <div className="float-3" style={{ position: 'absolute', top: -16, right: -10, background: '#fff', borderRadius: 14, padding: '10px 14px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <Star size={14} color="#c89b5a" />
        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)' }}>5,0 · Doctoralia</span>
      </div>
      <style>{`
        @keyframes flo { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
        @keyframes flo2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
        @keyframes flo3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
        .float { animation: flo 6s ease-in-out infinite; }
        .float-2 { animation: flo2 6s ease-in-out infinite; }
        .float-3 { animation: flo3 5s ease-in-out infinite; }
      `}</style>
    </div>
  );
}

window.Hero = Hero;