/* pages.jsx — Le Cabinet / Équipe / Honoraires */

/* ─── Page text ────────────────────────────────────────────────────────── */
const PAGE_TEXT = {
  fr: {
    cabinet: {
      eyebrow: 'Le cabinet',
      title_1: 'Un cabinet pensé pour',
      title_em: 'votre',
      title_2: 'tranquillité.',
      lede: 'Au cœur du Carré d\'Or monégasque, le Cabinet Maris associe expertise médicale, technologie de pointe et une atmosphère apaisée. Trois praticien·ne·s, quatre fauteuils, un secrétariat dédié.',
      feats: [
        { icon: 'sparkle', t: 'Technologie', p: 'Empreinte optique 3D, radiologie numérique faible dose, lasers de précision.' },
        { icon: 'shield', t: 'Stérilisation', p: 'Protocole hospitalier, traçabilité par lot, contrôles trimestriels.' },
        { icon: 'smile', t: 'Confort', p: 'Fauteuils ergonomiques, casque anti-bruit, sédation consciente sur demande.' },
        { icon: 'pin', t: 'Accessibilité', p: 'Centre-ville, parking sous-immeuble, accès PMR de plain-pied.' },
      ],
      story_t_1: 'Une médecine douce,',
      story_t_em: 'sans compromis',
      story_t_2: ' sur la rigueur.',
      story_p1: 'Fondé en 1992, le Cabinet Maris a accompagné trois générations de Monégasques et de résidents internationaux. Notre approche repose sur le diagnostic minutieux, la pédagogie patient·e et l\'absence de surtraitement.',
      story_p2: 'Tout acte est précédé d\'un devis écrit. Les soins urgents sont pris en charge sous 24 heures. Les patient·e·s anxieux·ses bénéficient d\'un parcours adapté avec consultation préalable sans soin.',
      story_facts: [
        ['Fondé', '1992'],
        ['Praticiens', '3 + 4 collaborateurs'],
        ['Fauteuils', '4'],
        ['Langues', 'FR · EN · IT'],
        ['Agréments', 'HDS · RGPD · Charte qualité Monaco'],
      ],
      photo_main: 'Photo · Salle d\'accueil',
      photo_op: 'Photo · Salle de soins',
      photo_tech: 'Photo · Plateau technique',
      info_address_h: 'Adresse',
      info_hours_h: 'Horaires',
      info_contact_h: 'Contact',
      address: '11 Allée des Camomilles\nMC-98000 Monaco\n1er étage · ascenseur',
      hours: [['Lun – Ven', '8h30 – 19h00'], ['Samedi', '9h00 – 13h00'], ['Dimanche', 'Fermé'], ['Urgences', 'WE & jours fériés sur ligne dédiée']],
      contact: [['Téléphone', '+377 97 70 07 33'], ['Email', 'contact@cabinet-maris.mc'], ['Urgences', '+377 97 70 07 99']],
      cta_t_1: 'Prêt·e à',
      cta_t_em: 'sourire',
      cta_t_2: ' à nouveau ?',
      cta_p: 'Confirmation immédiate, rappel SMS, données sécurisées HDS.',
      cta_book: 'Prendre rendez-vous',
      cta_call: 'Nous appeler',
    },
    equipe: {
      eyebrow: 'Équipe',
      title_1: 'Trois praticien·ne·s,',
      title_em: 'une',
      title_2: ' même exigence.',
      lede: 'Tous formés en France et à l\'international, nos praticien·ne·s partagent une seule règle : ne jamais proposer un soin qu\'ils ne feraient pas pour leur propre famille.',
      staff_t_1: 'Et notre',
      staff_t_em: 'équipe',
      staff_t_2: ' de soutien.',
      staff: [
        { initials: 'SD', name: 'Sophie Dubois', role: 'Assistante dentaire référente · 12 ans d\'expérience' },
        { initials: 'CL', name: 'Camille Leclerc', role: 'Hygiéniste · Spécialiste parodontie' },
        { initials: 'IN', name: 'Isabella Neri', role: 'Secrétariat · FR · IT · EN' },
      ],
      cta_book: 'Prendre rendez-vous',
      bio_label: 'Parcours',
      formations_label: 'Formations',
      langs_label: 'Langues',
      since_label: 'Exerce depuis',
      portraits_label: 'Portrait',
    },
    honoraires: {
      eyebrow: 'Honoraires',
      title_1: 'Tarifs',
      title_em: 'transparents',
      title_2: ', sans surprise.',
      lede: 'Toutes nos honoraires sont déclarées à la Sécurité Sociale monégasque. Un devis écrit est systématiquement remis avant tout acte supérieur à 200 €.',
      reimb_yes: 'Remb. partiel',
      reimb_no: 'Non remboursé',
      duration_label: 'Durée',
      price_label: 'Honoraires',
      aside_devis_t_1: 'Devis sur',
      aside_devis_t_em: 'mesure',
      aside_devis_t_2: '.',
      aside_devis_p: 'Pour tout acte prothétique, implantaire ou esthétique, un devis écrit détaillé vous est remis avant signature. Aucun acte n\'est facturé sans accord préalable.',
      aside_pay_t_1: 'Modes de',
      aside_pay_t_em: 'paiement',
      aside_pay_t_2: '.',
      aside_pay_list: [
        'Carte bancaire (visa, mastercard, amex)',
        'Espèces (jusqu\'à 1 000 €)',
        'Chèque français ou monégasque',
        'Virement bancaire (devis > 1 500 €)',
        'Échelonnement 3× sans frais (sur devis)',
      ],
      aside_remb_t_1: 'Remboursements',
      aside_remb_t_em: '& mutuelles',
      aside_remb_t_2: '.',
      aside_remb_p: 'Nous transmettons votre feuille de soins directement à la Caisse de Prévoyance Sociale monégasque ou à votre CPAM française. Tiers payant accepté pour les patient·e·s CMU et AME.',
      cta_t_1: 'Une question sur un',
      cta_t_em: 'devis',
      cta_t_2: ' ?',
      cta_p: 'Notre secrétariat répond en moins de 24 h ouvrées.',
      cta_call: 'Appeler le secrétariat',
      cta_book: 'Prendre rendez-vous',
    },
  },
  en: {
    cabinet: {
      eyebrow: 'The practice',
      title_1: 'A practice designed for',
      title_em: 'your',
      title_2: 'peace of mind.',
      lede: 'In the heart of Monaco\'s Carré d\'Or, Cabinet Maris combines medical expertise, cutting-edge technology and a calm atmosphere. Three practitioners, four chairs, one dedicated front desk.',
      feats: [
        { icon: 'sparkle', t: 'Technology', p: '3D optical impressions, low-dose digital radiology, precision lasers.' },
        { icon: 'shield', t: 'Sterilisation', p: 'Hospital-grade protocol, batch traceability, quarterly audits.' },
        { icon: 'smile', t: 'Comfort', p: 'Ergonomic chairs, noise-cancelling headphones, conscious sedation on request.' },
        { icon: 'pin', t: 'Accessibility', p: 'City centre, underground parking, full PRM access on level.' },
      ],
      story_t_1: 'Gentle medicine,',
      story_t_em: 'no compromise',
      story_t_2: ' on rigour.',
      story_p1: 'Founded in 1992, Cabinet Maris has cared for three generations of Monégasques and international residents. Our approach rests on careful diagnosis, patient education and the refusal to over-treat.',
      story_p2: 'Every procedure is preceded by a written quote. Urgent care is handled within 24 hours. Anxious patients can book a preliminary visit with no treatment.',
      story_facts: [
        ['Founded', '1992'],
        ['Practitioners', '3 + 4 staff'],
        ['Chairs', '4'],
        ['Languages', 'FR · EN · IT'],
        ['Accreditation', 'HDS · GDPR · Monaco Quality Charter'],
      ],
      photo_main: 'Photo · Reception',
      photo_op: 'Photo · Treatment room',
      photo_tech: 'Photo · Technical bay',
      info_address_h: 'Address',
      info_hours_h: 'Hours',
      info_contact_h: 'Contact',
      address: '11 Allée des Camomilles\nMC-98000 Monaco\n1st floor · lift',
      hours: [['Mon – Fri', '8:30 am – 7 pm'], ['Saturday', '9 am – 1 pm'], ['Sunday', 'Closed'], ['Emergencies', 'Weekends & holidays via dedicated line']],
      contact: [['Phone', '+377 97 70 07 33'], ['Email', 'contact@cabinet-maris.mc'], ['Emergency', '+377 97 70 07 99']],
      cta_t_1: 'Ready to',
      cta_t_em: 'smile',
      cta_t_2: ' again?',
      cta_p: 'Instant confirmation, SMS reminder, HDS-secured data.',
      cta_book: 'Book an appointment',
      cta_call: 'Call us',
    },
    equipe: {
      eyebrow: 'Team',
      title_1: 'Three practitioners,',
      title_em: 'one',
      title_2: ' shared standard.',
      lede: 'All trained in France and abroad, our practitioners follow one rule: never recommend a procedure they wouldn\'t accept for their own family.',
      staff_t_1: 'And our',
      staff_t_em: 'support',
      staff_t_2: ' team.',
      staff: [
        { initials: 'SD', name: 'Sophie Dubois', role: 'Lead dental assistant · 12 years of experience' },
        { initials: 'CL', name: 'Camille Leclerc', role: 'Hygienist · Periodontics specialist' },
        { initials: 'IN', name: 'Isabella Neri', role: 'Front desk · FR · IT · EN' },
      ],
      cta_book: 'Book an appointment',
      bio_label: 'Bio',
      formations_label: 'Education',
      langs_label: 'Languages',
      since_label: 'In practice since',
      portraits_label: 'Portrait',
    },
    honoraires: {
      eyebrow: 'Fees',
      title_1: 'Fees that are',
      title_em: 'transparent',
      title_2: ', no surprises.',
      lede: 'All our fees are filed with Monégasque social security. A written quote is systematically provided before any procedure above €200.',
      reimb_yes: 'Partial reimb.',
      reimb_no: 'Not reimbursed',
      duration_label: 'Duration',
      price_label: 'Fee',
      aside_devis_t_1: 'Tailored',
      aside_devis_t_em: 'quotes',
      aside_devis_t_2: '.',
      aside_devis_p: 'For any prosthetic, implant or cosmetic procedure, a detailed written quote is provided before signing. No procedure is billed without prior agreement.',
      aside_pay_t_1: 'Payment',
      aside_pay_t_em: 'methods',
      aside_pay_t_2: '.',
      aside_pay_list: [
        'Card (Visa, Mastercard, Amex)',
        'Cash (up to €1,000)',
        'French or Monégasque cheque',
        'Bank transfer (quotes over €1,500)',
        'Interest-free 3-instalment plan (on quote)',
      ],
      aside_remb_t_1: 'Reimbursements',
      aside_remb_t_em: '& insurance',
      aside_remb_t_2: '.',
      aside_remb_p: 'We file your care sheet directly with the Monégasque Caisse de Prévoyance Sociale or your French CPAM. Direct billing accepted for CMU and AME patients.',
      cta_t_1: 'A question about a',
      cta_t_em: 'quote',
      cta_t_2: '?',
      cta_p: 'Our front desk replies in under 24 working hours.',
      cta_call: 'Call the front desk',
      cta_book: 'Book an appointment',
    },
  },
};

/* ─── Practitioner extended data (bios + formations) ───────────────────── */
const PRAC_EXT = {
  marchetti: {
    fr: {
      bio: 'Diplômée de l\'Université de Turin en 1998, Élise Marchetti exerce à Monaco depuis 2002. Elle pilote le cabinet et accompagne ses patient·e·s sur les soins esthétiques avancés : facettes céramiques, blanchiment professionnel, smile design. Son approche : diagnostiquer longuement, traiter avec parcimonie.',
      formations: ['DDS — Université de Turin (1998)', 'DU Implantologie — Paris VII (2004)', 'Smile Design — NYU Continuing Ed (2011)', 'Certificat de blanchiment esthétique — Genève (2015)'],
      since: '1998',
    },
    en: {
      bio: 'Graduated from the University of Turin in 1998, Élise Marchetti has practiced in Monaco since 2002. She runs the practice and leads on advanced cosmetic care: ceramic veneers, professional whitening, smile design. Her approach: diagnose slowly, treat sparingly.',
      formations: ['DDS — University of Turin (1998)', 'PG Diploma Implantology — Paris VII (2004)', 'Smile Design — NYU Continuing Ed (2011)', 'Cosmetic whitening certificate — Geneva (2015)'],
      since: '1998',
    },
  },
  vidal: {
    fr: {
      bio: 'Spécialiste en orthodontie diplômé de la Faculté de Médecine de Nice (2005), Thomas Vidal accompagne enfants et adultes vers un sourire aligné, en privilégiant les techniques invisibles (Invisalign, aligneurs sur mesure). Ancien attaché hospitalier au CHU de Nice en pédodontie.',
      formations: ['DDS — Faculté de Nice (2005)', 'DU Orthodontie — Nice Sophia Antipolis (2009)', 'Invisalign Diamond Provider', 'DU Pédodontie — Marseille (2012)'],
      since: '2005',
    },
    en: {
      bio: 'Orthodontics specialist trained at the Faculty of Medicine of Nice (2005), Thomas Vidal guides children and adults toward an aligned smile, favouring invisible techniques (Invisalign, custom aligners). Former hospital attaché at CHU Nice in paediatric dentistry.',
      formations: ['DDS — Faculty of Nice (2005)', 'PG Diploma Orthodontics — Nice Sophia Antipolis (2009)', 'Invisalign Diamond Provider', 'PG Diploma Paediatric Dentistry — Marseille (2012)'],
      since: '2005',
    },
  },
  loriol: {
    fr: {
      bio: 'Chirurgienne reconnue en implantologie et parodontologie, Camille Loriol rejoint le cabinet en 2018 après dix ans d\'exercice à Milan. Elle prend en charge les cas complexes : reconstructions osseuses, implants immédiats, traitements parodontaux.',
      formations: ['DDS — Université de Milan (2008)', 'Master Implantologie — Université de Bologne (2012)', 'Membre de la SFPIO (parodontologie & implantologie orale)'],
      since: '2008',
    },
    en: {
      bio: 'A recognised surgeon in implantology and periodontology, Camille Loriol joined the practice in 2018 after ten years in Milan. She handles complex cases: bone reconstruction, immediate implants, periodontal treatments.',
      formations: ['DDS — University of Milan (2008)', 'Master Implantology — University of Bologna (2012)', 'Member of SFPIO (periodontology & oral implantology)'],
      since: '2008',
    },
  },
};

/* ─── Reimbursement / extended fees data ───────────────────────────────── */
const FEES_EXT = {
  consultation: { reimb: 'yes', remb_fr: 'Remb. 70 % Sécu' },
  detartrage: { reimb: 'yes', remb_fr: 'Remb. partiel' },
  carie: { reimb: 'yes', remb_fr: 'Remb. selon acte' },
  blanchiment: { reimb: 'no', remb_fr: 'Hors nomenclature' },
  facettes: { reimb: 'no', remb_fr: 'Hors nomenclature' },
  orthodontie: { reimb: 'partial', remb_fr: 'Remb. partiel < 16 ans' },
  implant: { reimb: 'partial', remb_fr: 'Couronne remb.' },
  extraction: { reimb: 'yes', remb_fr: 'Remb. 70 % Sécu' },
  canal: { reimb: 'yes', remb_fr: 'Remb. 70 % Sécu' },
};

const CABINET_PHOTOS = {
  main: 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&h=1000&fit=crop&q=80',
};

/* ─── Cabinet page ─────────────────────────────────────────────────────── */
function CabinetPage({ lang, onBook }) {
  const t = PAGE_TEXT[lang].cabinet;
  return (
    <main className="page" data-screen-label="Cabinet">
      <header className="page-head">
        <div>
          <div className="eyebrow">{t.eyebrow}</div>
          <h1>{t.title_1} <em>{t.title_em}</em> {t.title_2}</h1>
        </div>
        <p className="lede">{t.lede}</p>
      </header>

      <div className="cabinet-feats">
        {t.feats.map((f) => (
          <article key={f.t} className="feat-card">
            <div className="feat-ic"><Icon name={f.icon} size={22} /></div>
            <h3>{f.t}</h3>
            <p>{f.p}</p>
          </article>
        ))}
      </div>

      <section className="cabinet-split">
        <div className="cabinet-photo has-photo">
          <img
            src={CABINET_PHOTOS.main}
            onError={(e) => { e.target.src = 'https://picsum.photos/seed/dental-clinic/800/1000'; e.target.onerror = null; }}
            alt=""
          />
        </div>
        <div className="cabinet-text">
          <h2>{t.story_t_1} <em>{t.story_t_em}</em>{t.story_t_2}</h2>
          <p>{t.story_p1}</p>
          <p>{t.story_p2}</p>
          <div className="cabinet-list">
            {t.story_facts.map(([k, v]) => (
              <div className="cabinet-list-item" key={k}>
                <span className="k">{k}</span>
                <span className="v">{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cabinet-info-block">
        <div className="info-block">
          <h4>{t.info_address_h}</h4>
          <p className="big display" style={{ whiteSpace: 'pre-line' }}>{t.address}</p>
        </div>
        <div className="info-block">
          <h4>{t.info_hours_h}</h4>
          {t.hours.map(([d, h]) => (
            <div className="row" key={d}><span>{d}</span><span>{h}</span></div>
          ))}
        </div>
        <div className="info-block">
          <h4>{t.info_contact_h}</h4>
          {t.contact.map(([d, h]) => (
            <div className="row" key={d}><span>{d}</span><span>{h}</span></div>
          ))}
        </div>
      </section>

      <section className="page-cta">
        <div>
          <h3>{t.cta_t_1} <em>{t.cta_t_em}</em>{t.cta_t_2}</h3>
          <p>{t.cta_p}</p>
        </div>
        <div className="actions">
          <button className="btn btn-primary btn-lg" onClick={onBook}>
            {t.cta_book}<Icon name="arrow" size={16} />
          </button>
          <a className="btn btn-ghost btn-lg" href="tel:+37797700733">
            <Icon name="phone" size={16} />{t.cta_call}
          </a>
        </div>
      </section>
    </main>
  );
}

/* ─── Team page ────────────────────────────────────────────────────────── */
function TeamPage({ lang, onBook }) {
  const t = PAGE_TEXT[lang].equipe;
  return (
    <main className="page" data-screen-label="Equipe">
      <header className="page-head">
        <div>
          <div className="eyebrow">{t.eyebrow}</div>
          <h1>{t.title_1} <em>{t.title_em}</em>{t.title_2}</h1>
        </div>
        <p className="lede">{t.lede}</p>
      </header>

      <div className="team-grid">
        {PRACTITIONERS.map((p) => {
          const ext = PRAC_EXT[p.id]?.[lang];
          return (
            <article key={p.id} className="team-row">
              <div className={`team-portrait${p.photo ? ' has-photo' : ''}`}>
                {p.photo
                  ? <img
                      src={p.photo}
                      onError={(e) => { e.target.src = `https://picsum.photos/seed/${p.id}/560/700`; e.target.onerror = null; }}
                      alt={p.name}
                    />
                  : p.initials
                }
              </div>
              <div className="team-body">
                <h2>{p.name}</h2>
                <p className="team-role">{lang === 'fr' ? p.role : p.roleEn}</p>
                <div className="team-tags">
                  {p.tags.map((tag) => <span key={tag} className="prac-tag">{tag}</span>)}
                </div>
                {ext && <p className="bio">{ext.bio}</p>}
                <div className="team-grid-meta">
                  <div>
                    <h5>{t.formations_label}</h5>
                    <ul>
                      {ext?.formations.map((f) => <li key={f}>{f}</li>)}
                    </ul>
                  </div>
                  <div>
                    <h5>{t.langs_label}</h5>
                    <ul>
                      {p.langs.map((l) => <li key={l}>{l}</li>)}
                    </ul>
                  </div>
                  <div>
                    <h5>{t.since_label}</h5>
                    <ul><li>{ext?.since}</li></ul>
                  </div>
                </div>
                <div className="team-cta">
                  <button className="btn btn-soft" onClick={onBook}>
                    {t.cta_book}<Icon name="arrow" size={14} />
                  </button>
                </div>
              </div>
            </article>
          );
        })}
      </div>

      <section className="team-staff">
        <h3>{t.staff_t_1} <em>{t.staff_t_em}</em>{t.staff_t_2}</h3>
        <div className="team-staff-grid">
          {t.staff.map((s) => (
            <div className="staff-card" key={s.name}>
              <span className="av">{s.initials}</span>
              <div className="meta">
                <b>{s.name}</b>
                <span>{s.role}</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

/* ─── Fees page ────────────────────────────────────────────────────────── */
function FeesPage({ lang, onBook }) {
  const t = PAGE_TEXT[lang].honoraires;
  const groups = TREATMENTS[lang].groups;
  return (
    <main className="page" data-screen-label="Honoraires">
      <header className="page-head">
        <div>
          <div className="eyebrow">{t.eyebrow}</div>
          <h1>{t.title_1} <em>{t.title_em}</em>{t.title_2}</h1>
        </div>
        <p className="lede">{t.lede}</p>
      </header>

      <div className="fees-wrap">
        <div>
          {groups.map((g) => (
            <section key={g.title} className="fees-section">
              <div className="fees-section-h">
                <h2>{g.title.replace(g.emTitle, '')}<em>{g.emTitle}</em></h2>
                <small>{g.items.length} {lang === 'fr' ? 'soins' : 'procedures'}</small>
              </div>
              {g.items.map((it) => {
                const ext = FEES_EXT[it.id];
                const remb = ext?.reimb === 'no'
                  ? t.reimb_no
                  : (lang === 'fr' ? ext?.remb_fr : (ext?.reimb === 'yes' ? 'Partly reimbursed' : 'Partial reimb.'));
                return (
                  <div className="fees-row" key={it.id}>
                    <div>
                      <div className="name">{it.name}</div>
                      <div className="desc">{it.desc}</div>
                    </div>
                    <div className="dur">⏱ {it.time}</div>
                    <div className={`reimb ${ext?.reimb === 'no' ? 'none' : ''}`}>{remb}</div>
                    <div className="price">{it.price}</div>
                  </div>
                );
              })}
            </section>
          ))}
        </div>

        <aside className="fees-aside">
          <div className="fees-aside-card dark">
            <h4>{t.aside_devis_t_1} <em>{t.aside_devis_t_em}</em>{t.aside_devis_t_2}</h4>
            <p>{t.aside_devis_p}</p>
          </div>
          <div className="fees-aside-card">
            <h4>{t.aside_pay_t_1} <em>{t.aside_pay_t_em}</em>{t.aside_pay_t_2}</h4>
            <ul>
              {t.aside_pay_list.map((it) => (
                <li key={it}><Icon name="check" size={14} /><span>{it}</span></li>
              ))}
            </ul>
          </div>
          <div className="fees-aside-card">
            <h4>{t.aside_remb_t_1} <em>{t.aside_remb_t_em}</em>{t.aside_remb_t_2}</h4>
            <p>{t.aside_remb_p}</p>
          </div>
        </aside>
      </div>

      <section className="page-cta">
        <div>
          <h3>{t.cta_t_1} <em>{t.cta_t_em}</em>{t.cta_t_2}</h3>
          <p>{t.cta_p}</p>
        </div>
        <div className="actions">
          <a className="btn btn-primary btn-lg" href="tel:+37797700733">
            <Icon name="phone" size={16} />{t.cta_call}
          </a>
          <button className="btn btn-ghost btn-lg" onClick={onBook}>
            {t.cta_book}<Icon name="arrow" size={16} />
          </button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { CabinetPage, TeamPage, FeesPage, PAGE_TEXT, PRAC_EXT });
