// sections-mid.jsx — HowItWorks, About, Objections

// ── OFFER — Oferta clara ──
function Offer() {
  return (
    <section style={{background:'var(--petrol)', padding:'80px 5%'}} id="oferta">
      <div style={{maxWidth:'860px', margin:'0 auto', textAlign:'center'}}>
        <div className="reveal">
          <span className="section-label" style={{color:'var(--gold)'}}>O que você recebe</span>
          <h2 className="section-title light">Avaliação completa + plano<br/>personalizado na sua casa</h2>
          <p className="section-sub light" style={{margin:'0 auto 40px'}}>Sem precisar sair de casa. Sem lista de espera. Tudo que você precisa para começar a melhorar.</p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'20px', marginBottom:'40px'}} className="offer-grid reveal">
          {[
            { icon: '🔍', title: 'Avaliação completa', desc: 'Análise detalhada da postura, movimento e histórico de dor — identificamos a causa raiz.' },
            { icon: '📋', title: 'Plano personalizado', desc: 'Protocolo de tratamento montado especificamente para o seu caso e rotina.' },
            { icon: '🏠', title: 'Na sua casa', desc: 'A Dra. Ana leva todo o equipamento necessário. Você não precisa se mover.' },
          ].map((item, i) => (
            <div key={i} style={{background:'rgba(255,255,255,0.06)', border:'1px solid rgba(197,166,110,0.2)', borderRadius:'16px', padding:'28px 22px'}}>
              <div style={{fontSize:'2rem', marginBottom:'12px'}}>{item.icon}</div>
              <h3 style={{color:'white', fontWeight:'700', fontSize:'.97rem', marginBottom:'8px', fontFamily:'Inter,sans-serif'}}>{item.title}</h3>
              <p style={{color:'rgba(255,255,255,.55)', fontSize:'.85rem', lineHeight:'1.65'}}>{item.desc}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{background:'rgba(197,166,110,0.1)', border:'1.5px solid rgba(197,166,110,0.35)', borderRadius:'14px', padding:'20px 28px', marginBottom:'32px', display:'inline-block'}}>
          <p style={{color:'white', fontWeight:'700', fontSize:'1rem', margin:0}}>
            Tudo isso sem você sair do sofá — a Dra. Ana vai até você.
          </p>
        </div>
        <div className="reveal">
          <a className="btn-wa" href={window.WA_LINK} target="_blank" rel="noopener" style={{fontSize:'1rem', padding:'16px 36px', boxShadow:'0 6px 28px rgba(37,211,102,0.4)'}}>
            <svg style={{width:'18px',height:'18px',fill:'white',flexShrink:0}} 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>
            Quero minha avaliação em casa
          </a>
          <p style={{color:'rgba(255,255,255,.35)', fontSize:'.74rem', marginTop:'10px'}}>Sem compromisso · Resposta em minutos · Icoaraci e região</p>
        </div>
      </div>
    </section>
  );
}

// ── COMO FUNCIONA — 3 passos simples ──
function HowItWorks() {
  const steps = [
    {
      num: '01',
      icon: '💬',
      title: 'Mande uma mensagem',
      desc: 'Fale pelo WhatsApp. Em minutos você recebe retorno e já agenda sua avaliação sem sair de casa.',
    },
    {
      num: '02',
      icon: '🏠',
      title: 'A Dra. vai até você',
      desc: 'Ana Caroline chega no horário combinado com tudo que precisa. Você não precisa se preocupar com nada.',
    },
    {
      num: '03',
      icon: '💪',
      title: 'Você melhora de verdade',
      desc: 'Tratamento focado na causa da dor. Cada sessão te deixa mais próximo de viver sem limitações.',
    },
  ];
  return (
    <section style={{background:'var(--petrol-dark)', padding:'90px 5%'}} id="como-funciona">
      <div style={{maxWidth:'1000px', margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center', marginBottom:'52px'}}>
          <span className="section-label" style={{color:'var(--gold)'}}>Simples assim</span>
          <h2 className="section-title light">Como funciona em 3 passos</h2>
          <p className="section-sub light" style={{margin:'0 auto'}}>Do primeiro contato à sua recuperação — tudo fácil, tudo em casa.</p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'24px'}} className="steps-3-grid">
          {steps.map((s, i) => (
            <div key={i} className="reveal" style={{transitionDelay:`${i*0.12}s`, textAlign:'center', padding:'36px 28px', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(197,166,110,0.15)', borderRadius:'16px'}}>
              <div style={{fontSize:'2.2rem', marginBottom:'16px'}}>{s.icon}</div>
              <div style={{fontFamily:'Cormorant Garamond,serif', fontSize:'3rem', fontWeight:'700', color:'rgba(197,166,110,0.2)', lineHeight:'1', marginBottom:'8px'}}>{s.num}</div>
              <h3 style={{color:'white', fontSize:'1.05rem', fontWeight:'700', marginBottom:'10px', fontFamily:'Inter,sans-serif'}}>{s.title}</h3>
              <p style={{color:'rgba(255,255,255,.55)', fontSize:'.88rem', lineHeight:'1.7'}}>{s.desc}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{textAlign:'center', marginTop:'44px'}}>
          <a className="btn-wa" href={window.WA_LINK} target="_blank" rel="noopener" style={{fontSize:'1rem', padding:'15px 32px'}}>
            <svg style={{width:'18px',height:'18px',fill:'white',flexShrink:0}} 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>
            Começar agora pelo WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

// ── ABOUT / AUTORIDADE ──
function About() {
  return (
    <section style={{background:'white', padding:'90px 5%'}} id="sobre">
      <div style={{maxWidth:'1100px', margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:'70px', alignItems:'center'}} className="about-grid">
        <div className="reveal-left">
          <div className="thesis-photos-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px'}}>
            <div style={{borderRadius:'16px', overflow:'hidden', boxShadow:'var(--shadow-lg)'}}>
              <img src="assets/atendimento1.jpg" alt="Dra. Ana Caroline atendendo paciente" style={{width:'100%', height:'280px', objectFit:'cover', objectPosition:'top', display:'block'}} />
            </div>
            <div style={{borderRadius:'16px', overflow:'hidden', boxShadow:'var(--shadow-lg)', marginTop:'28px'}}>
              <img src="assets/atendimento2.jpg" alt="Atendimento fisioterapêutico domiciliar" style={{width:'100%', height:'280px', objectFit:'cover', objectPosition:'top', display:'block'}} />
            </div>
          </div>
        </div>
        <div className="reveal-right">
          <span className="section-label">Quem vai te atender</span>
          <h2 className="section-title">Dra. Ana Caroline Araujo</h2>
          <p style={{color:'var(--text-muted)', lineHeight:'1.82', fontSize:'.97rem', marginBottom:'20px'}}>
            Fisioterapeuta com 8 anos de experiência clínica, com tratamento focado em dores crônicas, reabilitação e acompanhamento de pacientes pós-operados. Atende em Icoaraci levando equipamento profissional até sua casa.
          </p>
          <p style={{color:'var(--text-muted)', lineHeight:'1.82', fontSize:'.97rem', marginBottom:'12px'}}>
            O diferencial dela? <strong style={{color:'var(--petrol)'}}>A boa escuta.</strong> Pacientes relatam que ela "leva em consideração o seu bem estar" e vai além do protocolo — trata a pessoa, não só a dor.
          </p>
          <p style={{fontFamily:'Cormorant Garamond, serif', fontSize:'1.1rem', fontStyle:'italic', color:'var(--petrol)', lineHeight:'1.7', marginBottom:'28px', padding:'16px 20px', background:'var(--off-white)', borderRadius:'10px', borderLeft:'3px solid var(--gold)'}}>
            "É ímpar no que faz. Realmente sabe o que é fisioterapia no seu significado de ser terapêutico." — Karina
          </p>
          <div style={{display:'flex', flexDirection:'column', gap:'10px', marginBottom:'32px'}}>
            {[
              'CREFITO ativo — registro profissional regularizado',
              'Tratamento focado em dores crônicas e reabilitação funcional',
              'Reabilitação pós-operatória ortopédica e neurológica',
              'Equipamentos profissionais levados até você',
            ].map((item, i) => (
              <div key={i} style={{display:'flex', alignItems:'flex-start', gap:'10px', fontSize:'.88rem', color:'var(--text-muted)'}}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--gold)" style={{flexShrink:0, marginTop:'2px'}}><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                {item}
              </div>
            ))}
          </div>
          <a className="btn-wa" href={window.WA_LINK} target="_blank" rel="noopener">
            <svg style={{width:'17px',height:'17px',fill:'white'}} 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>
            Falar com a Dra. Ana agora
          </a>
        </div>
      </div>
    </section>
  );
}

// ── OBJECTIONS — Quebra de objeções ──
function Objections() {
  const objs = [
    {
      q: '"Não sei se meu caso precisa de fisioterapia…"',
      a: 'Se você sente dor ou limitação — precisa. Karina tinha uma dor aguda entre as costelas e hoje indica a Carol para todo mundo. Luciana, com artrose severa, voltou a dançar e andar de bicicleta. A avaliação inicial mostra exatamente o que está acontecendo.',
    },
    {
      q: '"Já fiz fisioterapia antes e a dor voltou."',
      a: 'Porque o tratamento foi no sintoma, não na causa. O método da Dra. Ana identifica a origem do problema. Silva tinha dores nas cadeiras e no braço — depois do tratamento, as próprias pessoas ao redor notaram a diferença.',
    },
    {
      q: '"É muito caro para mim…"',
      a: 'Pense quanto custa continuar com dor: remédios, consultas, exames, dias sem conseguir se mover. Luciana conviveu 5 anos limitada antes de buscar ajuda. Hoje pratica capoeira com os filhos. Qual é o custo de continuar esperando?',
    },
    {
      q: '"Será que ela consegue vir até o meu endereço?"',
      a: 'A Dra. Ana atende em Icoaraci e região. Mande mensagem e confirme — é rápido e sem compromisso. Como disse Karina: ela trata você como pessoa, não como paciente.',
    },
  ];
  return (
    <section style={{background:'var(--off-white)', padding:'90px 5%'}} id="objecoes">
      <div style={{maxWidth:'860px', margin:'0 auto'}}>
        <div className="reveal" style={{textAlign:'center', marginBottom:'48px'}}>
          <span className="section-label">Suas dúvidas</span>
          <h2 className="section-title">Talvez você esteja pensando…</h2>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:'16px'}}>
          {objs.map((o, i) => (
            <div key={i} className="reveal" style={{transitionDelay:`${i*0.1}s`, background:'white', borderRadius:'14px', padding:'28px 30px', border:'1px solid rgba(31,63,63,0.07)', boxShadow:'var(--shadow)'}}>
              <p style={{fontFamily:'Cormorant Garamond,serif', fontSize:'1.15rem', fontStyle:'italic', color:'var(--petrol)', marginBottom:'10px', fontWeight:'600'}}>{o.q}</p>
              <p style={{color:'var(--text-muted)', fontSize:'.93rem', lineHeight:'1.72'}}>{o.a}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{textAlign:'center', marginTop:'40px'}}>
          <a className="btn-wa" href={window.WA_LINK} target="_blank" rel="noopener" style={{fontSize:'1rem', padding:'15px 32px'}}>
            <svg style={{width:'17px',height:'17px',fill:'white'}} 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>
            Tirar dúvidas no WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, About, Objections, Offer });
