// Landing page sections — Clínica Parque da Cidade
// Brand book aligned: Acid Grotesk Bold for display, JetBrains Mono for technical labels.
// Palette: Ink #1A2434, Mist #B9C7D2, Paper #FAF8F3.

const Wordmark = ({ variant = 'navy', height = 36 }) => {
  const src = variant === 'mist' ? 'assets/logo-cpc-mist.png' : 'assets/logo-cpc-navy.png';
  return (
    <img
      src={src}
      alt="Clínica Parque da Cidade"
      className="wordmark-img"
      style={{ height, width: 'auto', display: 'block' }}
    />
  );
};

const TopNav = ({ onCta }) => (
  <div className="topnav">
    <Wordmark variant="navy" height={32} />
    <button className="btn btn-primary btn-sm" onClick={onCta}>Marcar consulta</button>
  </div>
);

const Hero = ({ onCta }) => (
  <section className="hero">
    <div>
      <div className="hero-eyebrow">All-on-4 · Para emigrantes</div>
      <h1>Volte a sorrir, em poucos dias.</h1>
      <p className="lead">
        Reabilitação completa com implantes dentários All-on-4, planeada à medida da sua estadia em Portugal, para que regresse ao estrangeiro com dentes fixos e definitivos.
      </p>
      <div className="hero-ctas">
        <button className="btn btn-primary" onClick={onCta}>Marcar avaliação</button>
      </div>
      <div className="hero-meta">
        <div><strong>20 anos</strong><br/>de experiência clínica</div>
        <div><strong>5 / 5</strong><br/>Google · 1200+ avaliações</div>
        <div><strong>Matosinhos</strong><br/>Porto, Portugal</div>
      </div>
    </div>
    <div className="hero-image">
      <img src="assets/hero-portrait.png" alt="Sorriso natural" />
    </div>
  </section>
);

const Problem = () => {
  const items = [
    { n: '01', t: 'Vergonha a sorrir', d: 'Evita fotografias, esconde a boca a falar, deixou de comer em público sem pensar duas vezes.' },
    { n: '02', t: 'Próteses removíveis', d: 'Soltam-se a comer, irritam a gengiva e nunca se sente seguro a falar ou a rir.' },
    { n: '03', t: 'Adiamentos a cada visita', d: 'Em cada vinda a Portugal volta o problema - e fica para a próxima.' },
    { n: '04', t: 'Tratamento no estrangeiro', d: 'Preços incomportáveis e dificuldade de comunicação em momentos delicados.' },
  ];
  return (
    <section className="problem pad-x pad-y">
      <div className="sec-head">
        <div className="sec-eyebrow">O problema</div>
        <h2>Anos a viver com um sorriso que não é seu.</h2>
        <p>Conhecemos a história. É comum entre quem vive longe - e tem solução.</p>
      </div>
      <ul className="problem-list">
        {items.map(i => (
          <li key={i.n}>
            <span className="num">{i.n}</span>
            <div className="body">
              <strong>{i.t}</strong>
              <span>{i.d}</span>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
};

const Solution = () => (
  <section className="solution pad-x pad-y">
    <div className="two-col">
      <div className="sec-head" style={{marginBottom: 0}}>
        <div className="sec-eyebrow">A solução · All-on-4</div>
        <h2>Uma arcada inteira fixa em apenas 4 implantes.</h2>
        <p>Uma técnica consolidada há mais de 25 anos, indicada para quem perdeu vários dentes ou usa próteses removíveis.</p>
      </div>
      <div>
        <div className="solution-image">
          <img src="assets/solution-couple.png" alt="Casal sorridente" />
        </div>
        <div className="benefits">
          <div className="benefit">
            <div className="ico">i</div>
            <div><strong>Dentes fixos no próprio dia</strong><span>Sai da clínica com a sua nova prótese provisória colocada - sem prótese removível.</span></div>
          </div>
          <div className="benefit">
            <div className="ico">ii</div>
            <div><strong>Solução para a vida</strong><span>Os implantes integram-se ao osso e funcionam como dentes naturais durante décadas.</span></div>
          </div>
          <div className="benefit">
            <div className="ico">iii</div>
            <div><strong>Volta a comer de tudo</strong><span>Mastiga com firmeza, sente sabor e textura - sem medo de soltar nada.</span></div>
          </div>
          <div className="benefit">
            <div className="ico">iv</div>
            <div><strong>Estética natural</strong><span>Forma, cor e proporção desenhadas individualmente para o seu rosto.</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Emigrants = () => {
  const cards = [
    { n: 'I', t: 'Pensado para férias curtas', d: 'Tudo planeado em consulta antes da cirurgia. Cá, apenas os dias estritamente necessários.' },
    { n: 'II', t: 'Equipa que fala consigo', d: 'Acompanhamento em português, francês e inglês - antes, durante e depois da estadia.' },
    { n: 'III', t: 'Acompanhamento à distância', d: 'Seguimento clínico próximo quando voltar a França, Suíça, Luxemburgo ou Reino Unido.' },
  ];
  return (
    <section className="emigrants pad-x pad-y">
      <div className="sec-head">
        <div className="sec-eyebrow">Para quem vive lá fora</div>
        <h2>Tratamento à medida dos seus dias em Portugal.</h2>
        <p>Não desenhámos um tratamento padrão e adaptámo-lo a si. Desenhámos o tratamento a partir de si.</p>
      </div>
      <div className="cards">
        {cards.map(c => (
          <div className="card" key={c.n}>
            <div className="num">{c.n}</div>
            <strong>{c.t}</strong>
            <span>{c.d}</span>
          </div>
        ))}
      </div>
    </section>
  );
};

const Process = () => {
  const steps = [
    { when: 'Antes da viagem', title: 'Vídeo-consulta preparatória', desc: 'À distância, antes de viajar, falamos consigo para esclarecer dúvidas, rever a medicação que toma e ajudar a organizar a viagem e a estadia.', bullets: ['Esclarecimento de dúvidas', 'Revisão da medicação habitual', 'Apoio na organização da viagem'] },
    { when: 'Dia 1 do tratamento', title: 'Avaliação e diagnóstico', desc: 'Consulta de avaliação na clínica em Matosinhos: diagnóstico completo, plano de tratamento e todos os exames necessários para planear a cirurgia.', bullets: ['Raio-X e CBCT (tomografia 3D)', 'Fotografias e scan intraoral', 'Plano de tratamento e orçamento por escrito'] },
    { when: 'Dia 2 do tratamento', title: 'Cirurgia', desc: 'Colocação dos 4 implantes com planeamento digital. Sai da clínica com a prótese provisória fixa no mesmo dia.', bullets: ['Cirurgia minimamente invasiva', 'Dentes fixos provisórios à saída'] },
    { when: 'Dias seguintes', title: 'Recuperação e ajustes', desc: 'Acompanhamento próximo durante a sua estadia, com consultas curtas para ajustes de mordida e conforto.', bullets: ['Suporte 24/7 da coordenação', 'Ajustes feitos no momento'] },
    { when: 'Após regressar', title: 'Prótese definitiva', desc: 'Numa segunda viagem, após cicatrização (3 a 6 meses), colocamos a prótese definitiva em zircónio ou cerâmica.', bullets: ['Acabamento estético final'] },
  ];
  return (
    <section className="process pad-x pad-y">
      <div className="sec-head">
        <div className="sec-eyebrow">Como funciona</div>
        <h2>Cinco etapas. Zero surpresas.</h2>
        <p>Tudo o que precisa de saber antes de marcar o voo.</p>
      </div>
      <div className="timeline">
        {steps.map((s, i) => (
          <div className="step" key={i}>
            <div className="when">{s.when}</div>
            <div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              {s.bullets && (<ul>{s.bullets.map(b => <li key={b}>{b}</li>)}</ul>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const Trust = () => (
  <section className="trust pad-x pad-y">
    <div className="sec-head">
      <div className="sec-eyebrow">Quem o vai tratar</div>
      <h2>Uma equipa multidisciplinar de referência no Porto.</h2>
      <p>Implantologia, reabilitação, cirurgia oral e prótese - tudo na mesma clínica, sob coordenação do Dr. António Malheiro.</p>
    </div>

    <div className="stat-grid">
      <div className="stat"><div className="num">20+</div><div className="lbl">anos a tratar pacientes</div></div>
      <div className="stat"><div className="num">7 000+</div><div className="lbl">implantes colocados</div></div>
      <div className="stat"><div className="num">98%</div><div className="lbl">taxa de sucesso All-on-4</div></div>
      <div className="stat"><div className="num">5/5</div><div className="lbl">★ Google · 1200+ avaliações</div></div>
    </div>
  </section>
);

const Offer = ({ onCta, showPrice }) => (
  <section className="offer pad-x pad-y">
    <div className="sec-head">
      <div className="sec-eyebrow">A sua avaliação</div>
      <h2>Avaliação sem compromisso.</h2>
      <p>Antes de marcar viagem, falamos consigo. Sem pressão.</p>
    </div>

    <div className="offer-card">
      <div className="head">
        <strong>Plano All-on-4</strong>
      </div>

      {showPrice && (
        <div className="price-row">
          <span className="from">Desde</span>
          <span className="price">4 900&thinsp;€</span>
        </div>
      )}

      <ul>
        <li>Avaliação clínica e tomografia 3D</li>
        <li>Plano de tratamento personalizado</li>
        <li>4 implantes + prótese provisória fixa</li>
        <li>Coordenação de viagem e estadia</li>
        <li>Acompanhamento clínico de longa duração</li>
      </ul>

      <button className="btn btn-primary" onClick={onCta}>Pedir avaliação</button>
      <p className="offer-fineprint">Resposta em menos de 24h úteis. Sem compromisso.</p>
    </div>
  </section>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'Vou ter dor durante o tratamento?', a: 'A cirurgia é feita com sedação consciente - está confortável e sem ansiedade. No pós-operatório a dor é ligeira e bem controlada com medicação. A maioria dos nossos pacientes regressa às atividades normais no dia seguinte.' },
    { q: 'Quantos dias preciso de estar em Portugal?', a: 'Tipicamente 5 a 7 dias na primeira viagem (cirurgia, prótese provisória e ajustes) e 3 a 5 dias numa segunda viagem, alguns meses depois, para colocar a prótese definitiva. Adaptamos o calendário às suas datas.' },
    { q: 'Quanto custa um tratamento All-on-4?', a: 'O nosso plano All-on-4 começa em 4 900€ por arcada, incluindo cirurgia, 4 implantes e prótese provisória fixa. O orçamento final depende do caso clínico e é entregue por escrito após a avaliação inicial.' },
    { q: 'Como é o acompanhamento depois de regressar ao estrangeiro?', a: 'Mantemos contacto regular com a equipa de coordenação para qualquer dúvida ou intercorrência. Em caso de necessidade, articulamos com colegas de confiança no seu país de residência.' },
    { q: 'E se já não tenho osso suficiente?', a: 'A técnica All-on-4 foi precisamente desenvolvida para casos com perda óssea - os implantes são colocados em zonas de osso nativo, evitando enxertos na grande maioria dos casos. Avaliamos com tomografia 3D antes de qualquer decisão.' },
    { q: 'Falam francês? Inglês?', a: 'Sim. A equipa de coordenação fala português, francês e inglês. Acompanhamos pacientes regulares de França, Suíça, Luxemburgo, Reino Unido, EUA e Canadá.' },
  ];
  return (
    <section className="faq pad-x pad-y">
      <div className="sec-head">
        <div className="sec-eyebrow">Perguntas frequentes</div>
        <h2>O que costumam perguntar-nos.</h2>
      </div>
      <div className="faq-list">
        {items.map((it, i) => (
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{it.q}</span>
              <span className="plus">+</span>
            </button>
            <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
          </div>
        ))}
      </div>
    </section>
  );
};

const FinalCTA = ({ onCta }) => (
  <section className="final-cta">
    <div className="sec-eyebrow">Próximo passo</div>
    <h2 style={{marginTop: 12}}>Volte ao estrangeiro com um sorriso novo.</h2>
    <p>Conte-nos a sua história. Em 24h propomos-lhe um plano que cabe nos seus dias em Portugal.</p>
    <div className="btns">
      <button className="btn btn-primary" onClick={onCta}>Marcar avaliação</button>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <Wordmark variant="mist" height={32} />
    <div className="footer-info" style={{marginTop: 18}}>
      <strong>Matosinhos · Porto</strong><br/>
      Rua José Joaquim Gomes da Silva, 214<br/>
      4450-171 Matosinhos, Portugal<br/>
      +351 22 938 51 88<br/>
      geral@clinicaparquedacidade.pt
    </div>
    <div className="footer-links">
      <a href="#">Sobre nós</a>
      <a href="#">Equipa</a>
      <a href="#">Casos clínicos</a>
      <a href="#">Política de privacidade</a>
    </div>
    <div className="footer-fine">© 2026 Clínica Parque da Cidade · Todos os direitos reservados</div>
  </footer>
);

const StickyCTA = ({ onCta }) => (
  <div className="sticky-cta">
    <button className="btn btn-primary btn-sm" onClick={onCta}>Marcar avaliação</button>
  </div>
);

const Testimonials = () => {
  const items = [
    {
      quote: 'Vivo em Lyon há 18 anos. Fiz a cirurgia numa terça e na quinta já estava a almoçar com os meus pais sem prótese. Em 6 dias estava no avião de volta, sem dor.',
      name: 'Manuel R.',
      where: 'Lyon, França · 62 anos',
      photo: 'assets/testimonial-manuel.png',
    },
    {
      quote: 'O que me assustava mais era a dor da cirurgia. No fim, no dia seguinte só tomei um analgésico. Quando voltei a Londres, a coordenadora ligou-me a saber como estava.',
      name: 'Fernanda P.',
      where: 'Londres, Reino Unido · 58 anos',
      photo: 'assets/testimonial-fernanda.png',
    },
    {
      quote: 'No Luxemburgo tinham-me orçamentado o triplo. Vim numa semana de férias, deixei tudo planeado e na segunda viagem coloquei a definitiva. Volto uma vez por ano para revisão.',
      name: 'José A.',
      where: 'Esch-sur-Alzette, Luxemburgo · 67 anos',
      photo: 'assets/testimonial-jose.png',
    },
  ];
  return (
    <section className="testimonials pad-x pad-y">
      <div className="sec-head">
        <div className="sec-eyebrow">Quem já voltou a sorrir</div>
        <h2>Histórias de pacientes que vivem fora.</h2>
        <p>Emigrantes portugueses que vieram tratar-se a Matosinhos. As suas dúvidas eram as mesmas que as suas.</p>
      </div>
      <div className="test-list">
        {items.map((t, i) => (
          <div className="test-card" key={i}>
            <p className="test-quote">“{t.quote}”</p>
            <div className="test-meta">
              <div className="test-avatar"><img src={t.photo} alt={t.name} /></div>
              <div className="test-info">
                <strong>{t.name}</strong>
                <span>{t.where}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const Cases = () => {
  const cases = [
    { img: 'assets/case-01.png', label: 'Caso 01', meta: 'Reabilitação total · All-on-4' },
    { img: 'assets/case-02.png', label: 'Caso 02', meta: 'Reabilitação total · All-on-4' },
    { img: 'assets/case-03.png', label: 'Caso 03', meta: 'Reabilitação total · All-on-4' },
  ];
  return (
    <section className="cases pad-x pad-y">
      <div className="sec-head">
        <div className="sec-eyebrow">Antes &amp; depois</div>
        <h2>O resultado fala por si.</h2>
        <p>Casos reais de pacientes tratados na Clínica Parque da Cidade. Imagens partilhadas com consentimento expresso.</p>
      </div>
      <div className="cases-list">
        {cases.map((c, i) => (
          <figure className="case" key={i}>
            <div className="case-img">
              <img src={c.img} alt={`${c.label} — antes e depois`} />
              <div className="case-divider"></div>
              <span className="case-tag tag-before">Antes</span>
              <span className="case-tag tag-after">Depois</span>
            </div>
            <figcaption className="case-cap">
              <strong>{c.label}</strong>
              <span>{c.meta}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

Object.assign(window, {
  Wordmark, TopNav, Hero, Problem, Solution, Emigrants, Process,
  Trust, Cases, Testimonials, Offer, FAQ, FinalCTA, Footer, StickyCTA,
});