// v2-app.jsx — single-file Apple-style v2
const { useState, useEffect, useRef } = React;

const T = {
  pt: {
    nav:{how:"Como funciona",specs:"Especialidades",plans:"Planos",app:"App",faq:"FAQ",cta:"Agendar"},
    hero:{
      pill:"Telemedicina · Atendimento 24h",
      t1:"Saúde,", t2:"simplificada.",
      lede:"Médicos especialistas a um toque de distância. Para você. Para sua família. Onde estiver.",
      cta1:"Começar agora", cta2:"Conheça os planos",
      m1:"Sem fidelidade", m2:"Cancele quando quiser", m3:"Cadastro em 1 minuto",
      scroll:"role para descobrir"
    },
    band:[{v:"1.200+",l:"Médicos especialistas"},{v:"850k",l:"Consultas realizadas"},{v:"4.9★",l:"Avaliação dos pacientes"},{v:"<12min",l:"Tempo médio de espera"}],
    feat:{title:"Pensado para a vida moderna.", lede:"Cada detalhe foi desenhado para que cuidar da saúde seja tão natural quanto pegar o celular."},
    tiles:[
      {h:"Vídeo em HD.\nMédico em segundos.", p:"Conexão estável até em 4G. Criptografia ponta a ponta.", art:"pulse"},
      {h:"Receita digital\ncom QR.", p:"Aceita em qualquer farmácia do Brasil.", art:"rx"},
      {h:"Sua família,\nem um só lugar.", p:"Até 4 dependentes com prontuário próprio.", art:"avs"},
      {h:"Agende em segundos.", p:"15 minutos para um especialista. Ou marque para quando preferir.", art:"cal"},
    ],
    how:{title:"Quatro passos.\nDa consulta à receita.", lede:"Sem cadastro complicado, sem instalação."},
    steps:[
      {t:"Escolha a especialidade",d:"Mais de 40 áreas, com filtro por idioma, gênero e disponibilidade."},
      {t:"Marque o horário",d:"Em até 15 minutos. Ou agende para quando preferir."},
      {t:"Conecte-se ao médico",d:"Vídeo HD criptografado. No celular ou no laptop."},
      {t:"Receita e prontuário",d:"QR code válido em todo o Brasil. Tudo salvo no app."},
    ],
    specs:{title:"Cuidamos de tudo,\npara toda a família.", lede:"Mais de 40 especialidades médicas."},
    plans:{title:"Planos para cada\nestilo de vida.", lede:"Cancelamento gratuito a qualquer momento.", monthly:"Mensal", yearly:"Anual", save:"−20%", per:"/mês", billed:"Cobrado anualmente",
      a:{type:"Individual", name:"Essencial", desc:"Para começar a sua jornada de saúde digital.", price:39,
         feats:["Consultas ilimitadas com clínico geral","5 consultas/ano com especialistas","Receita digital com QR","Prontuário pessoal"], dim:["Atendimento 24h prioritário","Pronto-atendimento pediátrico"]},
      b:{type:"Família", name:"Família+", desc:"Cuide de até 4 pessoas. Sem complicação.", badge:"Mais escolhido", price:89,
         feats:["Até 4 dependentes inclusos","Consultas ilimitadas em todas especialidades","Pronto-atendimento 24h","Prontuário familiar compartilhado","Pedido de exames online","Receita renovação automática"], dim:[]},
      c:{type:"Empresarial", name:"Empresa", desc:"Saúde para sua equipe. A partir de 10 pessoas.", price:49, perEmp:"/colaborador",
         feats:["Painel de RH e relatórios","Programa de saúde mental","Médico do trabalho online","Onboarding dedicado"], dim:["Dependentes (opcional)"]},
      pickPrim:"Assinar plano", pickAlt:"Falar com vendas"
    },
    app:{title:"Sua saúde.\nNo seu bolso.", lede:"Consulte, agende, receba receitas e organize o histórico médico de toda a família.",
      f:[
        {t:"Videoconsulta em HD",d:"Conexão estável mesmo em 4G. Criptografia ponta a ponta."},
        {t:"Receita com QR",d:"Aceita em qualquer farmácia. Renovação automática para uso contínuo."},
        {t:"Prontuário familiar",d:"Histórico organizado por membro. Acesso seguro com biometria."},
      ],
      android:"Disponível na", playstore:"Google Play", apple:"Baixe na", appstore:"App Store"},
    tm:{title:"Histórias reais.\nDe famílias reais.",
      l:[
        {q:"Marquei pediatra para a Manu às 22h de domingo. 30 minutos depois ela já estava na consulta. Mudou tudo.", n:"Letícia M.", l:"Mãe · São Paulo", i:"LM"},
        {q:"Tenho meu pai em outra cidade. Com o plano Família+ consigo agendar consultas para ele e ver tudo. Sossego de espírito.", n:"Rafael C.", l:"Engenheiro · Curitiba", i:"RC"},
        {q:"Como autônoma, não tinha plano. Agora pago menos por mês do que uma única consulta presencial e tenho especialista quando precisar.", n:"Beatriz S.", l:"Designer · Recife", i:"BS"},
      ]},
    faq:{title:"Perguntas frequentes.",
      qs:[
        {q:"A receita digital é válida em qualquer farmácia?",a:"Sim. Emitida com QR code e assinatura digital ICP-Brasil, válida em todo o território nacional, em farmácias físicas e online."},
        {q:"Posso cancelar quando quiser?",a:"Sim, sem multa e sem fidelidade. Cancele direto pelo app, com efeito ao fim do ciclo de cobrança."},
        {q:"Quem pode entrar no plano Família+?",a:"Até 4 dependentes: cônjuge, filhos, pais ou quem você escolher. Cada membro tem login próprio."},
        {q:"Atende no fim de semana e feriado?",a:"Sim, nossa equipe está disponível 24h por dia, 7 dias por semana, incluindo feriados."},
        {q:"Como funciona para crianças?",a:"Pediatras especializados, com avaliação por vídeo e orientação para os pais. Em casos que precisem de exame físico, encaminhamos para parceiro presencial."},
      ]},
    cta:{title:"Comece hoje.", lede:"Sem cartão de crédito, sem fidelidade. Crie sua conta em 1 minuto.", btn:"Começar agora"},
    foot:{tag:"Saúde digital para a família toda. Onde estiver. Quando precisar.",
      a:"Produto", aI:["Como funciona","Especialidades","Médicos","Planos","App"],
      b:"Empresa", bI:["Sobre","Carreiras","Imprensa","Para empresas"],
      c:"Suporte", cI:["Central de ajuda","Contato","Termos","Privacidade"],
      copy:"© 2026 Telemedicina DoctorFriend.", certs:"ANS · CFM · LGPD · ISO 27001"}
  },
  en: {
    nav:{how:"How it works",specs:"Specialties",plans:"Plans",app:"App",faq:"FAQ",cta:"Book"},
    hero:{
      pill:"Telehealth · 24/7 care",
      t1:"Health,", t2:"simplified.",
      lede:"Specialist doctors one tap away. For you. For your family. Wherever you are.",
      cta1:"Get started", cta2:"See plans",
      m1:"No lock-in", m2:"Cancel anytime", m3:"Sign up in 1 minute",
      scroll:"scroll to discover"
    },
    band:[{v:"1,200+",l:"Specialist doctors"},{v:"850k",l:"Visits completed"},{v:"4.9★",l:"Patient rating"},{v:"<12min",l:"Average wait time"}],
    feat:{title:"Built for modern life.", lede:"Every detail designed so caring for your health feels as natural as picking up your phone."},
    tiles:[
      {h:"HD video.\nDoctor in seconds.", p:"Stable on 4G. End-to-end encrypted.", art:"pulse"},
      {h:"Digital Rx\nwith QR.", p:"Accepted at any pharmacy.", art:"rx"},
      {h:"Your family,\nin one place.", p:"Up to 4 dependents with their own record.", art:"avs"},
      {h:"Book in seconds.", p:"15 minutes to a specialist. Or schedule whenever.", art:"cal"},
    ],
    how:{title:"Four steps.\nFrom visit to Rx.", lede:"No tricky signup, no install."},
    steps:[
      {t:"Pick a specialty",d:"40+ areas, filtered by language, gender and availability."},
      {t:"Pick a time",d:"In 15 minutes. Or schedule for later."},
      {t:"Meet the doctor",d:"HD encrypted video. Phone or laptop."},
      {t:"Rx and records",d:"QR-code prescription. Saved in the app."},
    ],
    specs:{title:"Care for everyone,\nin the family.", lede:"40+ medical specialties."},
    plans:{title:"Plans for every\nlifestyle.", lede:"Free cancellation anytime.", monthly:"Monthly", yearly:"Yearly", save:"−20%", per:"/mo", billed:"Billed annually",
      a:{type:"Individual", name:"Essential", desc:"To start your digital-health journey.", price:39,
         feats:["Unlimited family-medicine visits","5 specialist visits per year","Digital Rx with QR","Personal record"], dim:["24/7 priority care","Pediatric urgent care"]},
      b:{type:"Family", name:"Family+", desc:"Care for up to 4 people. Hassle-free.", badge:"Most picked", price:89,
         feats:["Up to 4 dependents included","Unlimited visits across all specialties","24/7 urgent care","Shared family record","Online lab orders","Auto-refill prescriptions"], dim:[]},
      c:{type:"Business", name:"Company", desc:"Health for your team. From 10 employees.", price:49, perEmp:"/employee",
         feats:["HR dashboard and reports","Mental-health program","Online occupational doctor","Dedicated onboarding"], dim:["Dependents add-on (optional)"]},
      pickPrim:"Get this plan", pickAlt:"Talk to sales"
    },
    app:{title:"Your health.\nIn your pocket.", lede:"Book, talk to doctors, get prescriptions and organize your family's medical history.",
      f:[
        {t:"HD video visits",d:"Stable on 4G. End-to-end encrypted."},
        {t:"Rx with QR",d:"Accepted at any pharmacy. Auto-refill for chronic care."},
        {t:"Family record",d:"Organized by member. Secure biometric access."},
      ],
      android:"Get it on", playstore:"Google Play", apple:"Download on the", appstore:"App Store"},
    tm:{title:"Real stories.\nReal families.",
      l:[
        {q:"Booked pediatrics for Manu at 10pm on Sunday. 30 minutes later she was in the visit. Game changer.", n:"Leticia M.", l:"Mom · São Paulo", i:"LM"},
        {q:"My dad lives in another city. With Family+ I book visits for him and see everything. Peace of mind.", n:"Rafael C.", l:"Engineer · Curitiba", i:"RC"},
        {q:"As a freelancer I had no insurance. Now I pay less per month than one in-person visit and get a specialist on demand.", n:"Beatriz S.", l:"Designer · Recife", i:"BS"},
      ]},
    faq:{title:"Frequently asked.",
      qs:[
        {q:"Is the digital prescription accepted everywhere?",a:"Yes. Issued with QR code and digital signature, accepted nationwide at physical and online pharmacies."},
        {q:"Can I cancel anytime?",a:"Yes, no fee and no lock-in. Cancel in the app — effective at the end of your billing cycle."},
        {q:"Who can be added to Family+?",a:"Up to 4 dependents: spouse, kids, parents or anyone you choose. Each has their own login."},
        {q:"Open on weekends and holidays?",a:"Yes, our urgent-care team is available 24/7, including holidays."},
        {q:"How does it work for kids?",a:"Trained pediatricians, video assessments and parent guidance. We refer to in-person partners when needed."},
      ]},
    cta:{title:"Start today.", lede:"No credit card, no lock-in. Create your account in 1 minute.", btn:"Get started"},
    foot:{tag:"Digital health for the whole family. Wherever, whenever.",
      a:"Product", aI:["How it works","Specialties","Doctors","Plans","App"],
      b:"Company", bI:["About","Careers","Press","For business"],
      c:"Support", cI:["Help center","Contact","Terms","Privacy"],
      copy:"© 2026 Telemedicina DoctorFriend.", certs:"ANS · CFM · LGPD · ISO 27001"}
  }
};

const SPECS = [
  {pt:"Cardiologia",en:"Cardiology",n:142},
  {pt:"Pediatria",en:"Pediatrics",n:98},
  {pt:"Dermatologia",en:"Dermatology",n:76},
  {pt:"Psiquiatria",en:"Psychiatry",n:64},
  {pt:"Ginecologia",en:"Gynecology",n:88},
  {pt:"Ortopedia",en:"Orthopedics",n:71},
  {pt:"Endocrinologia",en:"Endocrinology",n:53},
  {pt:"Clínica Geral",en:"Family Medicine",n:210},
  {pt:"Nutrição",en:"Nutrition",n:42},
  {pt:"Oftalmologia",en:"Ophthalmology",n:36},
  {pt:"Urologia",en:"Urology",n:29},
  {pt:"Neurologia",en:"Neurology",n:51},
];

// ─────────────────────────────────────────────────────────────────
function Nav({t,theme,setTheme,lang,setLang,scrolled}){
  return (
    <nav className={`nav ${scrolled?'scrolled':''}`}>
      <div className="nav-inner">
        <a href="#" className="nav-brand">
          <span className="lg"></span>
          <span>DoctorFriend<span style={{color:'var(--accent-2)'}}>+</span></span>
        </a>
        <div className="nav-links">
          <a href="#how">{t.nav.how}</a>
          <a href="#specs">{t.nav.specs}</a>
          <a href="#plans">{t.nav.plans}</a>
          <a href="#app">{t.nav.app}</a>
          <a href="#faq">{t.nav.faq}</a>
        </div>
        <div className="nav-actions">
          <button className="lang-tog" onClick={()=>setLang(lang==='pt'?'en':'pt')}>{lang==='pt'?'PT':'EN'}</button>
          <button className="theme-tog" onClick={()=>setTheme(theme==='dark'?'light':'dark')} aria-label="theme">
            {theme==='dark' ? (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
            )}
          </button>
          <button className="btn btn-primary btn-sm" style={{display:'none'}}>{t.nav.cta}</button>
        </div>
      </div>
    </nav>
  );
}

function Hero({t}){
  return (
    <section className="hero-v2">
      <div className="hero-v2-inner">
        <div className="hero-v2-eyebrow">{t.hero.pill}</div>
        <h1 className="hero-v2-title">
          {t.hero.t1} <span className="grad">{t.hero.t2}</span>
        </h1>
        <p className="hero-v2-lede">{t.hero.lede}</p>
        <div className="hero-v2-cta">
          <a href="#plans" className="hero-v2-link primary">
            {t.hero.cta1}
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6"><path d="M9 5l7 7-7 7"/></svg>
          </a>
          <a href="#how" className="hero-v2-link">
            {t.hero.cta2}
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6"><path d="M9 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function Band({t}){
  return (
    <section className="reveal">
      <div className="band">
        {t.band.map((it,i)=>(
          <div className="it" key={i}>
            <div className="v">{it.v}</div>
            <div className="l">{it.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function TileArt({k}){
  if(k==='pulse') return (
    <div className="art-pulse">
      <svg viewBox="0 0 400 200">
        <path className="ln" d="M 0 100 L 80 100 L 100 60 L 120 140 L 140 80 L 160 120 L 180 100 L 400 100"/>
      </svg>
    </div>
  );
  if(k==='cal') return (
    <div className="art-cal">
      {Array.from({length:21}).map((_,i)=>(
        <div key={i} className={`c ${i===10?'on':''} ${i<3||i>17?'dim':''}`}>{i+1}</div>
      ))}
    </div>
  );
  if(k==='avs') return (
    <div className="art-avs">
      <div className="av">M<span className="live"></span></div>
      <div className="av b">P</div>
      <div className="av c">L</div>
      <div className="av d">F</div>
    </div>
  );
  if(k==='rx') return (
    <div style={{position:'absolute',right:30,top:30,width:160,height:200,borderRadius:14,
      background:'var(--bg-3)',border:'1px solid var(--line-2)',padding:18,
      transform:'rotate(-4deg)',boxShadow:'0 20px 40px -10px rgba(0,0,0,.3)',
      display:'flex',flexDirection:'column',gap:6}}>
      <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:'.14em',color:'var(--ink-3)'}}>RECEITA · QR-RX</div>
      <div style={{height:6,borderRadius:3,background:'var(--surf-2)'}}></div>
      <div style={{height:6,borderRadius:3,background:'var(--surf-2)',width:'70%'}}></div>
      <div style={{height:6,borderRadius:3,background:'var(--surf-2)',width:'85%'}}></div>
      <div style={{flex:1}}></div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:2}}>
        {Array.from({length:49}).map((_,i)=>(
          <div key={i} style={{aspectRatio:'1',background:Math.random()>.4?'var(--ink)':'transparent',borderRadius:1}}></div>
        ))}
      </div>
    </div>
  );
  return null;
}

function Mosaic({t}){
  return (
    <section className="section reveal">
      <div className="wrap">
        <h2 className="h-section">{t.feat.title}</h2>
        <p className="lede">{t.feat.lede}</p>
        <div className="mosaic">
          <div className="tile span-3 t-grad">
            <TileArt k={t.tiles[0].art}/>
            <h4 style={{whiteSpace:'pre-line',position:'relative'}}>{t.tiles[0].h}</h4>
            <p style={{position:'relative'}}>{t.tiles[0].p}</p>
          </div>
          <div className="tile span-3 t-grad-2">
            <TileArt k={t.tiles[1].art}/>
            <h4 style={{whiteSpace:'pre-line',position:'relative'}}>{t.tiles[1].h}</h4>
            <p style={{position:'relative'}}>{t.tiles[1].p}</p>
          </div>
          <div className="tile span-3">
            <TileArt k={t.tiles[2].art}/>
            <h4 style={{whiteSpace:'pre-line',position:'relative'}}>{t.tiles[2].h}</h4>
            <p style={{position:'relative'}}>{t.tiles[2].p}</p>
          </div>
          <div className="tile span-3">
            <TileArt k={t.tiles[3].art}/>
            <h4 style={{whiteSpace:'pre-line',position:'relative'}}>{t.tiles[3].h}</h4>
            <p style={{position:'relative'}}>{t.tiles[3].p}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Story({t}){
  const icons = [
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>,
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>,
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M22 8l-6 4 6 4V8z"/></svg>,
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>,
  ];
  return (
    <section className="section reveal" id="how">
      <div className="wrap">
        <h2 className="h-section" style={{whiteSpace:'pre-line'}}>{t.how.title}</h2>
        <p className="lede">{t.how.lede}</p>
        <div className="story">
          {t.steps.map((s,i)=>(
            <div className="story-card" key={i}>
              <div>
                <div className="num">{String(i+1).padStart(2,'0')} / 04</div>
                <div className="ic" style={{marginTop:18}}>{icons[i]}</div>
              </div>
              <div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Specialties({t,lang}){
  return (
    <section className="section reveal" id="specs">
      <div className="wrap">
        <h2 className="h-section" style={{whiteSpace:'pre-line'}}>{t.specs.title}</h2>
        <p className="lede">{t.specs.lede}</p>
        <div className="chips">
          {SPECS.map((s,i)=>(
            <div className="chip-l" key={i}>
              <span>{lang==='pt'?s.pt:s.en}</span>
              <span className="num">{s.n}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Check(){return(<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12l5 5L20 7"/></svg>)}
function X(){return(<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M6 6l12 12M18 6L6 18"/></svg>)}

function Plans({t}){
  const [yearly,setYearly] = useState(true);
  const m = yearly?0.8:1;
  const Pl = ({p,featured}) => {
    const price = Math.round(p.price*m);
    return (
      <div className={`plan ${featured?'featured':''}`}>
        {p.badge && <span className="badge">★ {p.badge}</span>}
        <div className="ptype">{p.type}</div>
        <h4>{p.name}</h4>
        <p className="desc">{p.desc}</p>
        <div className="price">
          <span className="cur">R$</span>
          <span className="val">{price}</span>
          <span className="per">{p.perEmp || t.plans.per}</span>
        </div>
        <div className="billed">{yearly?t.plans.billed:'\u00a0'}</div>
        <ul>
          {p.feats.map((f,i)=>(<li key={i}><Check/><span>{f}</span></li>))}
          {p.dim.map((f,i)=>(<li key={'d'+i} className="dim"><X/><span>{f}</span></li>))}
        </ul>
        <button className={`btn ${featured?'btn-primary':'btn-ghost'}`} style={{width:'100%'}}>
          {featured?t.plans.pickPrim:t.plans.pickAlt}
        </button>
      </div>
    );
  };
  return (
    <section className="section reveal" id="plans">
      <div className="wrap">
        <div className="plans-head">
          <div>
            <h2 className="h-section" style={{whiteSpace:'pre-line'}}>{t.plans.title}</h2>
            <p className="lede">{t.plans.lede}</p>
          </div>
          <div className="plan-toggle">
            <button className={!yearly?'on':''} onClick={()=>setYearly(false)}>{t.plans.monthly}</button>
            <button className={yearly?'on':''} onClick={()=>setYearly(true)}>{t.plans.yearly} <span className="save">{t.plans.save}</span></button>
          </div>
        </div>
        <div className="plans">
          <Pl p={t.plans.a}/>
          <Pl p={t.plans.b} featured/>
          <Pl p={t.plans.c}/>
        </div>
      </div>
    </section>
  );
}

function AppBlock({t}){
  const icons=[
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M22 8l-6 4 6 4V8z"/></svg>,
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>,
  ];
  return (
    <section className="section reveal" id="app">
      <div className="wrap">
        <div className="showcase">
          <div>
            <h2 className="h-section" style={{whiteSpace:'pre-line'}}>{t.app.title}</h2>
            <p className="lede">{t.app.lede}</p>
            <div className="feat-list">
              {t.app.f.map((f,i)=>(
                <div className="it" key={i}>
                  <div className="ic">{icons[i]}</div>
                  <div>
                    <h5>{f.t}</h5>
                    <p>{f.d}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="dl-row">
              <a className="dl-btn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 1.8L13 12 3.6 22.2c-.4-.3-.6-.8-.6-1.3V3.1c0-.5.2-1 .6-1.3z"/></svg>
                <div><div className="lab">{t.app.android}</div><div className="nm">{t.app.playstore}</div></div>
              </a>
              <a className="dl-btn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04c0-2.94 2.4-4.36 2.5-4.42-1.36-2-3.49-2.27-4.24-2.3-1.8-.18-3.52 1.06-4.43 1.06-.93 0-2.34-1.04-3.85-1-1.97.03-3.81 1.15-4.83 2.92-2.07 3.59-.53 8.9 1.49 11.8 1 1.42 2.18 3.01 3.7 2.96 1.49-.06 2.05-.96 3.85-.96 1.79 0 2.3.96 3.86.93 1.6-.03 2.6-1.45 3.57-2.87 1.12-1.65 1.59-3.25 1.61-3.34-.04-.01-3.08-1.18-3.13-4.68z"/></svg>
                <div><div className="lab">{t.app.apple}</div><div className="nm">{t.app.appstore}</div></div>
              </a>
            </div>
          </div>
          <div className="phone-big">
            <div className="scr">
              <div className="nch"></div>
              <div className="ct">
                <div className="stb"><span>9:41</span><span>●●● 5G</span></div>
                <div>
                  <div className="greet">Bom dia,</div>
                  <div className="nm">Letícia 👋</div>
                </div>
                <div className="next">
                  <div className="lab">Próxima consulta</div>
                  <div className="doc">
                    <div className="av">FA</div>
                    <div>
                      <div style={{fontWeight:600,fontSize:14}}>Dr. Felipe A.</div>
                      <div style={{fontSize:11,opacity:.85}}>Pediatria</div>
                    </div>
                  </div>
                  <div className="when">
                    <span className="t">14:30 · Hoje</span>
                    <span className="join">Entrar</span>
                  </div>
                </div>
                <div className="qg">
                  <div className="q">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M22 8l-6 4 6 4V8z"/></svg>
                    Consulta
                  </div>
                  <div className="q">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>
                    Receita
                  </div>
                  <div className="q">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M19 14c1-2 2-3 2-5a8 8 0 10-16 0c0 6 8 13 8 13s2-2 4-4"/></svg>
                    Exames
                  </div>
                </div>
                <div className="lst">
                  <div className="r">
                    <div className="ic">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z"/></svg>
                    </div>
                    <div className="info"><div className="t">Pressão arterial</div><div className="s">120/80 · 2h</div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials({t}){
  return (
    <section className="section reveal">
      <div className="wrap">
        <h2 className="h-section" style={{whiteSpace:'pre-line'}}>{t.tm.title}</h2>
        <div className="tms">
          {t.tm.l.map((it,i)=>(
            <div className="tm" key={i}>
              <div className="stars">★★★★★</div>
              <p className="quote">"{it.q}"</p>
              <div className="who">
                <div className="av">{it.i}</div>
                <div>
                  <div className="nm">{it.n}</div>
                  <div className="lc">{it.l}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ({t}){
  const [open,setOpen] = useState(0);
  return (
    <section className="section reveal" id="faq">
      <div className="wrap">
        <h2 className="h-section" style={{textAlign:'center'}}>{t.faq.title}</h2>
        <div className="faq">
          {t.faq.qs.map((qa,i)=>(
            <div className={`qa ${open===i?'open':''}`} key={i}>
              <div className="qa-q" onClick={()=>setOpen(open===i?-1:i)}>
                <span>{qa.q}</span>
                <span className="pl">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M12 5v14M5 12h14"/></svg>
                </span>
              </div>
              <div className="qa-a"><div style={{paddingTop:2}}>{qa.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({t}){
  return (
    <section className="reveal">
      <div className="wrap">
        <div className="cta-banner">
          <h2 className="h-section">{t.cta.title}</h2>
          <p className="lede" style={{margin:'0 auto 30px'}}>{t.cta.lede}</p>
          <button className="btn btn-grad" style={{height:54,padding:'0 28px',fontSize:15}}>
            {t.cta.btn}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

function Footer({t}){
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="nav-brand">
              <span className="lg"></span>
              <span>DoctorFriend<span style={{color:'var(--accent-2)'}}>+</span></span>
            </div>
            <p className="foot-tag">{t.foot.tag}</p>
          </div>
          <div className="foot"><h6>{t.foot.a}</h6><ul>{t.foot.aI.map((x,i)=><li key={i}><a>{x}</a></li>)}</ul></div>
          <div className="foot"><h6>{t.foot.b}</h6><ul>{t.foot.bI.map((x,i)=><li key={i}><a>{x}</a></li>)}</ul></div>
          <div className="foot"><h6>{t.foot.c}</h6><ul>{t.foot.cI.map((x,i)=><li key={i}><a>{x}</a></li>)}</ul></div>
        </div>
        <div className="foot-bottom">
          <span>{t.foot.copy}</span>
          <span>{t.foot.certs}</span>
        </div>
      </div>
    </footer>
  );
}

function App(){
  const [theme,setThemeState] = useState(localStorage.getItem('df-theme')||'light');
  const [lang,setLang] = useState(localStorage.getItem('df-lang')||'pt');
  const [scrolled,setScrolled] = useState(false);
  const t = T[lang];

  useEffect(()=>{
    document.documentElement.setAttribute('data-theme',theme);
    localStorage.setItem('df-theme',theme);
  },[theme]);
  useEffect(()=>{ localStorage.setItem('df-lang',lang); },[lang]);

  const setTheme = (v)=>setThemeState(v);

  useEffect(()=>{
    const onS = ()=>setScrolled(window.scrollY>20);
    window.addEventListener('scroll',onS,{passive:true}); onS();
    return ()=>window.removeEventListener('scroll',onS);
  },[]);

  useEffect(()=>{
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting)e.target.classList.add('in'); }),{threshold:.12});
    els.forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  },[lang]);

  return (
    <React.Fragment>
      <Nav t={t} theme={theme} setTheme={setTheme} lang={lang} setLang={setLang} scrolled={scrolled}/>
      <Hero t={t}/>
      <Band t={t}/>
      <Mosaic t={t}/>
      <Story t={t}/>
      <Specialties t={t} lang={lang}/>
      <Plans t={t}/>
      <AppBlock t={t}/>
      <Testimonials t={t}/>
      <FAQ t={t}/>
      <CTA t={t}/>
      <Footer t={t}/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
