// sections-top.jsx — Nav, Hero, SocialProof, Identification
const WA_LINK = "https://wa.me/5591984804975?text=Ol%C3%A1%2C%20vim%20pelo%20an%C3%BAncio%2C%20gostaria%20de%20agendar%20uma%20avalia%C3%A7%C3%A3o%20com%20a%20Dra.%20Ana%20Caroline%20Araujo.%20%23DOMICILIAR";

const WaIcon = () => (
  <svg className="wa-icon" viewBox="0 0 24 24">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
);

// ── NAV ──
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <nav className={`nav${scrolled ? ' scrolled' : ''}`}>
      <div className="nav-logo">
        <img src="assets/logo-icon.png" alt="Ana Caroline Fisioterapeuta" style={{height:'56px', width:'56px', objectFit:'contain', borderRadius:'50%'}} />
      </div>
      <ul className="nav-links">
        {[['#como-funciona','Como funciona'],['#sobre','Sobre'],['#depoimentos','Depoimentos'],['#faq','Perguntas']].map(([h,l]) => (
          <li key={h}><a href={h}>{l}</a></li>
        ))}
      </ul>
      <a className="btn-wa nav-cta" href={WA_LINK} target="_blank" rel="noopener">
        <WaIcon /> Agendar agora
      </a>
      <div className="hamburger"><span/><span/><span/></div>
    </nav>
  );
}

// ── HERO ──
function Hero() {
  return (
    <section className="hero" id="hero">
      <div className="hero-pattern" />
      <div className="hero-inner">
        <div className="reveal-left">

          {/* Badge localização */}
          <div className="hero-tag">📍 Icoaraci · Fisioterapia Domiciliar</div>

          {/* Headline: dor + solução + localização */}
          <h1 className="hero-title">
            Cansado de acordar<br/>com dor todo dia?<br/>
            <em>A fisioterapeuta<br/>vai até você.</em>
          </h1>

          {/* Subheadline: oferta clara */}
          <p className="hero-sub">
            Avaliação completa + plano de tratamento personalizado no conforto da sua casa, em Icoaraci. Sem deslocamento, sem fila. Dor crônica, pós-operatório e reabilitação — <strong style={{color:'rgba(255,255,255,.9)'}}>tratamos a causa, não só o sintoma.</strong>
          </p>

          {/* Pull quote de paciente */}
          <div style={{display:'flex', alignItems:'flex-start', gap:'10px', background:'rgba(255,255,255,0.07)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:'12px', padding:'14px 18px', marginBottom:'20px'}}>
            <span style={{color:'var(--gold)', fontSize:'1.6rem', lineHeight:'1', fontFamily:'Georgia,serif', flexShrink:0, marginTop:'-4px'}}>"</span>
            <p style={{color:'rgba(255,255,255,0.8)', fontSize:'.85rem', lineHeight:'1.6', fontStyle:'italic', margin:0}}>Hoje não sinto mais dor. Danço, ando de bicicleta e pratico capoeira com meus filhos. <strong style={{color:'white', fontStyle:'normal'}}>— Luciana Jardim</strong></p>
          </div>

          {/* Prova social inline */}
          <div style={{display:'flex', alignItems:'center', gap:'12px', marginBottom:'28px', padding:'10px 16px', background:'rgba(255,255,255,0.07)', borderRadius:'50px', width:'fit-content', border:'1px solid rgba(255,255,255,0.1)'}}>
            <div style={{display:'flex'}}>
              {['MR','CS','JP','LM','RS'].map((i,k) => (
                <div key={k} style={{width:'30px',height:'30px',borderRadius:'50%',background:`hsl(${k*40+160},30%,35%)`,border:'2px solid rgba(255,255,255,0.25)',marginLeft:k>0?'-7px':'0',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'.62rem',fontWeight:'700',color:'white',zIndex:5-k,position:'relative'}}>{i}</div>
              ))}
            </div>
            <span style={{color:'rgba(255,255,255,0.75)', fontSize:'.8rem', fontWeight:'500'}}>+200 pacientes · "Indico sempre!" · ⭐⭐⭐⭐⭐</span>
          </div>

          {/* CTAs */}
          <div className="hero-actions">
            <a className="btn-wa" href={WA_LINK} target="_blank" rel="noopener" style={{fontSize:'1rem', padding:'15px 30px', boxShadow:'0 6px 28px rgba(37,211,102,0.4)'}}>
              <WaIcon /> Quero agendar minha avaliação
            </a>
          </div>

          {/* Micro-copy de segurança */}
          <p style={{marginTop:'14px', fontSize:'.76rem', color:'rgba(255,255,255,.38)', display:'flex', alignItems:'center', gap:'6px'}}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
            Sem compromisso · Resposta rápida · Atendimento em Icoaraci
          </p>

          {/* KPIs */}
          <div className="hero-kpis" style={{marginTop:'32px'}}>
            <div className="hero-kpi">
              <div className="hero-kpi-num">8+</div>
              <div className="hero-kpi-label">Anos de experiência</div>
            </div>
            <div className="hero-kpi">
              <div className="hero-kpi-num">100%</div>
              <div className="hero-kpi-label">Atendimento em casa</div>
            </div>
            <div className="hero-kpi">
              <div className="hero-kpi-num">1ª</div>
              <div className="hero-kpi-label">Avaliação incluída</div>
            </div>
          </div>
        </div>

        {/* Foto hero */}
        <div className="hero-photo-col reveal-right">
          <div style={{position:'relative', width:'100%', maxWidth:'1100px'}}>
            <div style={{position:'absolute',inset:'-2px',borderRadius:'18px',background:'linear-gradient(135deg,rgba(197,166,110,0.5),rgba(197,166,110,0.05),rgba(197,166,110,0.4))',zIndex:0}}/>
            <div style={{position:'absolute',inset:0,borderRadius:'18px',background:'linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.06) 50%,transparent 60%)',animation:'shimmer 3.5s ease-in-out infinite',zIndex:2,pointerEvents:'none'}}/>
            <img src="assets/hero-brand.png" alt="Dra. Ana Caroline Araujo — Fisioterapeuta Domiciliar Icoaraci" style={{width:'100%',display:'block',objectFit:'contain',borderRadius:'18px',position:'relative',zIndex:1,boxShadow:'0 0 60px rgba(197,166,110,0.18), 0 30px 70px rgba(0,0,0,0.45)'}}/>
          </div>
          <style>{`
            @keyframes shimmer{0%{transform:translateX(-100%)}60%{transform:translateX(200%)}100%{transform:translateX(200%)}}
          `}</style>
        </div>
      </div>
    </section>
  );
}

// ── IDENTIFICATION — "Você se identifica?" ──
function Identification() {
  const pains = [
    { icon: '😣', text: 'Acorda com dor nas costas, costelas ou pescoço todo dia' },
    { icon: '🦵', text: 'Sente dor nas cadeiras, joelho ou braço ao se movimentar' },
    { icon: '🛌', text: 'A dor interfere no sono e você já não descansa direito' },
    { icon: '💊', text: 'Toma analgésico com frequência e a dor sempre volta' },
    { icon: '🚗', text: 'Parou de dançar, caminhar ou praticar atividades por causa da dor' },
    { icon: '😔', text: 'Já fez tratamento antes mas a dor voltou depois de um tempo' },
  ];
  return (
    <section style={{background:'white', padding:'90px 5%'}} id="identificacao">
      <div style={{maxWidth:'900px', margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center', marginBottom:'48px'}}>
          <span className="section-label">Você se identifica?</span>
          <h2 className="section-title">Se alguma dessas situações<br/>parece com a sua vida…</h2>
          <p className="section-sub" style={{margin:'0 auto'}}>Pacientes com artrose, dores crônicas e pós-cirúrgico recuperaram a vida. O tratamento pode vir até você.</p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:'14px'}} className="pains-grid">
          {pains.map((p, i) => (
            <div key={i} className="reveal" style={{transitionDelay:`${i*0.07}s`, display:'flex', alignItems:'flex-start', gap:'14px', padding:'18px 20px', background:'#faf9f7', borderRadius:'12px', border:'1px solid rgba(31,63,63,0.06)'}}>
              <span style={{fontSize:'1.4rem', flexShrink:0}}>{p.icon}</span>
              <p style={{fontSize:'.9rem', color:'var(--text-muted)', lineHeight:'1.55', fontWeight:'500'}}>{p.text}</p>
            </div>
          ))}
        </div>

        {/* Gatilho: 2 ou mais */}
        <div className="reveal" style={{margin:'32px auto 0', maxWidth:'680px', background:'linear-gradient(135deg,rgba(31,63,63,0.06),rgba(197,166,110,0.08))', border:'1.5px solid rgba(197,166,110,0.35)', borderRadius:'16px', padding:'24px 28px', textAlign:'center'}}>
          <p style={{fontSize:'1.05rem', fontWeight:'700', color:'var(--petrol)', marginBottom:'6px'}}>Se você se identificou com 2 ou mais situações acima…</p>
          <p style={{fontSize:'.92rem', color:'var(--text-muted)', lineHeight:'1.6', marginBottom:'0'}}>Seu corpo já está pedindo ajuda. Quanto mais tempo passa, mais difícil fica. A boa notícia: o tratamento pode começar <strong>ainda esta semana, na sua casa.</strong></p>
        </div>

        <div className="reveal" style={{textAlign:'center', marginTop:'28px'}}>
          <a className="btn-wa" href={WA_LINK} target="_blank" rel="noopener" style={{fontSize:'1rem', padding:'15px 32px'}}>
            <WaIcon /> Quero resolver isso agora
          </a>
          <p style={{marginTop:'10px', fontSize:'.76rem', color:'var(--text-muted)'}}>Sem compromisso · Resposta rápida · Atendimento em Icoaraci</p>
        </div>
      </div>
    </section>
  );
}

// ── MARQUEE ──
function Marquee() {
  const words = ['Sem deslocamento','Avaliação personalizada','Foco na causa','Icoaraci','Dor crônica','Reabilitação','8 anos de experiência','Atendimento individual','Fisioterapia domiciliar'];
  const doubled = [...words, ...words];
  return (
    <div className="marquee-section">
      <div className="marquee-track">
        {doubled.map((w, i) => (
          <div className="marquee-item" key={i}>{w}</div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Identification, WA_LINK, WaIcon });
