// Honoraires.jsx — Page Honoraires (barème complet)

function Honoraires() {
  const pillars = [
    { t: "Sécurité juridique", d: "Chaque transaction bénéficie d'un audit juridique préalable : titres de propriété, servitudes, conformité, risques éventuels. Vous signez chez le notaire sans surprise." },
    { t: "Ancrage local", d: "Une agence de proximité, disponible, qui connaît chaque secteur, chaque village, chaque spécificité du marché local." },
    { t: "Suivi personnalisé", d: "Pas de flux industriel de mandats. Chaque dossier est suivi personnellement, de l'estimation à la remise des clés." },
    { t: "Tarif transparent", d: "Notre barème progressif garantit une juste rémunération, sans effet de seuil ni mauvaise surprise." },
  ];

  const trancheRows = [
    { range: "De 0 à 70 000 €", excl: "5,5 %", simple: "6,0 %", max: "3 850 €" },
    { range: "De 70 001 à 150 000 €", excl: "5,0 %", simple: "5,5 %", max: "4 000 €" },
    { range: "De 150 001 à 250 000 €", excl: "4,5 %", simple: "5,0 %", max: "4 500 €" },
    { range: "De 250 001 à 400 000 €", excl: "3,5 %", simple: "4,0 %", max: "5 250 €" },
    { range: "Au-delà de 400 000 €", excl: "3,0 %", simple: "3,5 %", max: "Variable" },
  ];

  const exampleRows = [
    { tranche: "0 à 70 000 € · taux 5,5 %", calc: "70 000 € × 5,5 %", h: "3 850 €" },
    { tranche: "70 001 à 150 000 € · taux 5,0 %", calc: "80 000 € × 5,0 %", h: "4 000 €" },
    { tranche: "150 001 à 180 000 € · taux 4,5 %", calc: "30 000 € × 4,5 %", h: "1 350 €" },
  ];

  const prestations = [
    "Appel de loyers mensuel, édition et envoi des quittances",
    "Reversement net propriétaire avec compte-rendu de gestion",
    "Révision annuelle du loyer (indice IRL)",
    "Régularisation annuelle des charges locatives",
    "Contrôle des attestations d'assurance locataire",
    "État des lieux de sortie et décompte du dépôt de garantie",
    "Gestion des congés bailleur / locataire",
    "Suivi des impayés — relances amiables (hors procédure judiciaire)",
  ];

  return (
    <section className="ntr-section ntr-legal ntr-honoraires" data-screen-label="Honoraires" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-legal-wrap">
        <header className="ntr-legal-head">
          <div className="ntr-eyebrow"><span className="ntr-rule" /> Barème d'honoraires <span className="ntr-rule" /></div>
          <h1 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
            Découvrez nos<br /><em>tarifs transparents</em><br />et compétitifs.
          </h1>
          <p className="ntr-honoraires-lead">
            Chez NOSTERRA, nous croyons fermement que la transparence est la clé d'une relation de confiance.
            <br /><br />
            Nos tarifs sont conçus pour être clairs, justes et adaptés à votre situation, afin de vous offrir le meilleur service possible tout en respectant votre budget.
            <br /><br />
            Que vous soyez à la recherche d'un bien immobilier ou que vous souhaitiez confier la gestion de votre location, nous avons une offre qui répondra à vos attentes.
          </p>
        </header>

        <nav className="ntr-legal-toc" aria-label="Sommaire">
          <a href="#hono-transaction">I — Transaction</a>
          <span className="ntr-legal-toc-sep">·</span>
          <a href="#hono-estimation">II — Estimation</a>
          <span className="ntr-legal-toc-sep">·</span>
          <a href="#hono-gestion">III — Gestion locative</a>
        </nav>

        {/* ───────── Qui sommes-nous ───────── */}
        <article className="ntr-legal-block">
          <h2 className="ntr-legal-h2">Qui sommes-nous ?</h2>
          <div className="ntr-legal-rule" />
          <p>NOSTERRA est une agence immobilière indépendante implantée sur le plateau ardéchois, au service des propriétaires et acquéreurs de la région de Vernoux-en-Vivarais, Lamastre et des vallées environnantes.</p>
          <p>Notre fondateur est diplômé notaire avec 8 ans d'expérience en étude notariale. Cette expertise juridique est au cœur de notre promesse :</p>
          <div className="ntr-hono-pillars">
            {pillars.map((p, i) => (
              <div key={i} className="ntr-hono-pillar">
                <div className="ntr-hono-pillar-n">0{i + 1}</div>
                <h4 className="ntr-hono-pillar-t">{p.t}</h4>
                <p className="ntr-hono-pillar-d">{p.d}</p>
              </div>
            ))}
          </div>
        </article>

        {/* ───────── 1. Transaction ───────── */}
        <article id="hono-transaction" className="ntr-legal-block">
          <div className="ntr-legal-num"><em>I</em></div>
          <h2 className="ntr-legal-h2">Honoraires de transaction immobilière</h2>
          <div className="ntr-legal-rule" />
          <p className="ntr-hono-note">Honoraires TTC (TVA 20 % incluse) · Charge vendeur · Conformes à l'arrêté du 10 janvier 2017.</p>

          <h3 className="ntr-legal-h3">Le principe du barème progressif</h3>
          <p>Notre barème fonctionne comme le barème de l'impôt sur le revenu : chaque tranche de prix est taxée à son propre taux, appliqué uniquement à la part du prix comprise dans cette tranche. Ainsi, la fixation du prix n'a pas d'impact sur les honoraires qui vous seront appliqués, la progression étant strictement continue.</p>

          <div className="ntr-hono-table-wrap">
            <table className="ntr-hono-table">
              <thead>
                <tr>
                  <th>Tranche de prix</th>
                  <th>Mandat exclusif TTC</th>
                  <th>Mandat simple TTC</th>
                  <th>Max / tranche (exclusif)</th>
                </tr>
              </thead>
              <tbody>
                {trancheRows.map((r, i) => (
                  <tr key={i}>
                    <td>{r.range}</td>
                    <td className="ntr-hono-rate">{r.excl}</td>
                    <td className="ntr-hono-rate ntr-hono-rate--alt">{r.simple}</td>
                    <td>{r.max}</td>
                  </tr>
                ))}
                <tr className="ntr-hono-row-foot">
                  <td><strong>Minimum d'honoraires (toutes situations)</strong></td>
                  <td><strong>3 000 €</strong></td>
                  <td><strong>3 000 €</strong></td>
                  <td>—</td>
                </tr>
              </tbody>
            </table>
          </div>

          <p>Le <strong>mandat exclusif</strong> vous garantit un suivi renforcé, une mise en valeur prioritaire et une négociation encadrée. Le <strong>mandat simple</strong> vous permet de confier votre bien à plusieurs agences simultanément.</p>

          <h3 className="ntr-legal-h3">Exemple — Vente à 180 000 €, mandat exclusif</h3>
          <div className="ntr-hono-table-wrap">
            <table className="ntr-hono-table">
              <thead>
                <tr>
                  <th>Tranche de prix</th>
                  <th>Calcul</th>
                  <th>Honoraires</th>
                </tr>
              </thead>
              <tbody>
                {exampleRows.map((r, i) => (
                  <tr key={i}>
                    <td>{r.tranche}</td>
                    <td>{r.calc}</td>
                    <td className="ntr-hono-rate">{r.h}</td>
                  </tr>
                ))}
                <tr className="ntr-hono-row-total">
                  <td colSpan="2"><strong>Total honoraires TTC</strong></td>
                  <td><strong>9 200 €</strong></td>
                </tr>
                <tr className="ntr-hono-row-foot">
                  <td colSpan="2">Prix net vendeur</td>
                  <td>170 800 €</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p className="ntr-hono-callout">✓ Le taux 4,5 % s'applique uniquement aux 30 000 € compris entre 150 001 € et 180 000 €, pas à la totalité du prix. C'est la garantie d'une progression toujours juste.</p>
        </article>

        {/* ───────── 2. Estimation ───────── */}
        <article id="hono-estimation" className="ntr-legal-block">
          <div className="ntr-legal-num"><em>II</em></div>
          <h2 className="ntr-legal-h2">Estimation de votre bien</h2>
          <div className="ntr-legal-rule" />

          <div className="ntr-hono-table-wrap">
            <table className="ntr-hono-table">
              <thead>
                <tr>
                  <th>Prestation</th>
                  <th>Tarif TTC</th>
                  <th>Conditions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Estimation détaillée — analyse comparative de marché, rapport écrit remis</td>
                  <td className="ntr-hono-rate">150 €</td>
                  <td>Remboursés intégralement si vous nous confiez un mandat exclusif dans les 2 mois suivants</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p>L'estimation comprend : analyse des transactions récentes dans votre secteur, évaluation de l'état du bien, prise en compte des atouts et contraintes spécifiques (exposition, vue, terrain, accessibilité), et remise d'un rapport écrit argumenté.</p>
        </article>

        {/* ───────── 3. Gestion locative ───────── */}
        <article id="hono-gestion" className="ntr-legal-block">
          <div className="ntr-legal-num"><em>III</em></div>
          <h2 className="ntr-legal-h2">Honoraires de gestion locative</h2>
          <div className="ntr-legal-rule" />

          <h3 className="ntr-legal-h3">Gestion courante</h3>
          <div className="ntr-hono-table-wrap">
            <table className="ntr-hono-table">
              <thead>
                <tr>
                  <th>Situation</th>
                  <th>Taux TTC / mois</th>
                  <th>Estimation annuelle (loyer 550 €)</th>
                  <th>Inclus</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1 lot en gestion</td>
                  <td className="ntr-hono-rate">7,5 %</td>
                  <td>495 €</td>
                  <td>Toutes les prestations ci-dessous</td>
                </tr>
                <tr>
                  <td>3 lots et plus (fidélisation)</td>
                  <td className="ntr-hono-rate">7,0 %</td>
                  <td>462 €</td>
                  <td>Tarif dégressif multi-lots</td>
                </tr>
                <tr>
                  <td>GLI — assurance loyers impayés (souscription partenaire, en sus)</td>
                  <td className="ntr-hono-rate ntr-hono-rate--alt">≈ 2,2 %</td>
                  <td>Option</td>
                  <td>Garantie loyers + détériorations</td>
                </tr>
              </tbody>
            </table>
          </div>

          <h3 className="ntr-legal-h3">Prestations incluses dans les honoraires de gestion</h3>
          <ul className="ntr-hono-check-list">
            {prestations.map((p, i) => (
              <li key={i}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 12 10 17 19 7"/></svg>
                <span>{p}</span>
              </li>
            ))}
            <li className="ntr-hono-check-star">
              <span className="ntr-hono-star">★</span>
              <span><strong>Audit juridique du bail inclus</strong> — vérification de la conformité du bail, des clauses et des obligations légales (expertise issue du notariat).</span>
            </li>
          </ul>

          <h3 className="ntr-legal-h3">Mise en location — baux loi 89 (habitation)</h3>
          <div className="ntr-hono-table-wrap">
            <table className="ntr-hono-table">
              <thead>
                <tr>
                  <th>Prestation</th>
                  <th>Charge bailleur</th>
                  <th>Charge locataire</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>Visite, dossier, rédaction du bail</td><td className="ntr-hono-rate">8 €/m² TTC</td><td className="ntr-hono-rate ntr-hono-rate--alt">8 €/m² TTC</td></tr>
                <tr><td>État des lieux d'entrée</td><td className="ntr-hono-rate">3 €/m² TTC</td><td className="ntr-hono-rate ntr-hono-rate--alt">3 €/m² TTC</td></tr>
                <tr><td>Entremise et négociation</td><td className="ntr-hono-rate">30 € TTC</td><td>—</td></tr>
                <tr><td>Avenant ou renouvellement de bail</td><td className="ntr-hono-rate">150 € TTC</td><td>—</td></tr>
                <tr><td>État des lieux de sortie amiable</td><td><em>Gratuit</em></td><td>—</td></tr>
              </tbody>
            </table>
          </div>
          <p className="ntr-hono-note">Honoraires plafonnés à un mois de loyer hors charges pour le bailleur et pour le locataire.</p>

          <h3 className="ntr-legal-h3">Baux commerciaux et professionnels</h3>
          <div className="ntr-hono-table-wrap">
            <table className="ntr-hono-table">
              <thead>
                <tr>
                  <th>Prestation</th>
                  <th>Charge bailleur</th>
                  <th>Charge locataire <small>(sauf convention contraire)</small></th>
                </tr>
              </thead>
              <tbody>
                <tr><td>Forfait : visite, dossier, rédaction du bail, état des lieux d'entrée</td><td>—</td><td className="ntr-hono-rate">8 % TTC du loyer annuel HC</td></tr>
                <tr><td>Avenant ou renouvellement de bail</td><td>—</td><td className="ntr-hono-rate">4 % TTC du loyer annuel HC</td></tr>
                <tr><td>État des lieux de sortie amiable</td><td><em>Gratuit</em></td><td>—</td></tr>
              </tbody>
            </table>
          </div>

          <h3 className="ntr-legal-h3">Autres types de baux</h3>
          <p>Sur devis, nous consulter.</p>
        </article>

        <p className="ntr-hono-disclaimer">
          Honoraires TTC · TVA au taux en vigueur incluse · Arrêté du 10 janvier 2017 relatif à l'information des consommateurs par les professionnels intervenant dans une transaction immobilière · NOSTERRA — Agence immobilière indépendante — 29 route des Cols, 07240 Châteauneuf-de-Vernoux · www.nosterra.fr · Carte professionnelle Transactions et Gestion locative · Document non contractuel — Tarifs susceptibles d'évolution.
        </p>
      </div>
    </section>
  );
}

window.Honoraires = Honoraires;