/* global React, Reveal */
const { useState: useStateP } = React;

function Tarifs({ onNav }) {
  const [open, setOpen] = useStateP(0);

  const offers = [
    {
      tag: ["/ Offre 01", null],
      name: ["Vitrine", "Simple"],
      amount: ["500 — 800€", "TTC · projet"],
      desc: "Pour les commerces locaux, indépendants et artisans qui veulent une présence claire et rapide.",
      list: [
        "Jusqu'à 5 pages",
        "Design sur mesure",
        "Mobile-first, responsive",
        "Formulaire de contact",
        "SEO de base + Google Business",
        "Hébergement 1ʳᵉ année incluse",
      ],
      delivery: "Livré en 7 jours",
    },
    {
      tag: ["/ Offre 02", "Le + choisi"],
      name: ["Vitrine", "Complète"],
      amount: ["800 — 1500€", "TTC · projet"],
      desc: "Pour les PME qui ont besoin de plus de profondeur — services, équipe, blog, prise de rendez-vous.",
      list: [
        "Jusqu'à 12 pages",
        "Design sur mesure approfondi",
        "Blog ou actualités",
        "Système de prise de rendez-vous",
        "SEO local avancé + audit",
        "Animations & transitions soignées",
        "Hébergement 1ʳᵉ année incluse",
      ],
      delivery: "Livré en 14 jours",
      featured: true,
    },
    {
      tag: ["/ Offre 03", null],
      name: ["Sur", "mesure"],
      amount: ["Sur devis", "à partir de 2 000€"],
      desc: "Projets spécifiques : e-commerce, applications légères, intranets, refontes complexes, intégrations.",
      list: [
        "Cahier des charges détaillé",
        "Pages illimitées",
        "Fonctionnalités custom",
        "Intégrations API & paiement",
        "Espace client / back-office",
        "Stratégie SEO complète",
        "Suivi & itérations post-lancement",
      ],
      delivery: "Délai selon scope",
    },
  ];

  const faqs = [
    ["Combien de temps pour livrer un site ?",
     "En moyenne 7 jours pour une vitrine simple, 14 jours pour une vitrine complète. Cela dépend surtout de la rapidité avec laquelle vous me fournissez les contenus (textes, photos, accès). Une fois tout reçu, je m'engage sur un délai ferme."],
    ["Le contenu est-il inclus ?",
     "Je peux rédiger les textes pour vous (option à 200€/page) ou retravailler vos contenus existants. Pour les photos, je peux vous orienter vers des banques d'images de qualité ou un photographe local."],
    ["Que se passe-t-il après la livraison ?",
     "Vous avez 30 jours pour signaler tout ajustement inclus. Au-delà, soit vous prenez la maintenance mensuelle (49€/mois), soit on travaille au coup par coup (60€/h). Vous restez 100% propriétaire de votre site et de votre code."],
    ["Acceptez-vous les paiements échelonnés ?",
     "Oui. 30% à la signature, 40% à la validation des maquettes, 30% à la livraison. Pour les projets sur mesure au-delà de 3 000€, on peut découper en 4 ou 5 fois sans frais."],
    ["Puis-je modifier mon site moi-même ?",
     "Selon le projet. Pour la plupart des vitrines, je livre une interface d'édition simple (texte, images, sections) où vous pouvez modifier sans toucher au code. Sinon, l'option maintenance prend 1h/mois pour les ajustements."],
    ["Travaillez-vous partout en France ?",
     "Oui, 100% en remote. Visio pour les réunions, Notion partagé pour le suivi, Loom pour les démos. La majorité de mes clients sont en région — Lyon, Bordeaux, Nantes, Lille. Aucune différence avec un client parisien."],
  ];

  return (
    <div className="vw-page">
      <header className="vw-page-head">
        <Reveal>
          <div className="vw-eyebrow" style={{ marginBottom: 24 }}>/ Tarifs</div>
          <h1 className="vw-page-head__title">
            Prix <em>clairs.</em><br/>
            <span className="accent">Pas</span> de surprise.
          </h1>
        </Reveal>
        <Reveal>
          <p className="vw-page-head__lede">
            Trois formules, des prix affichés. Devis ferme sous 48h après notre premier échange. Pas de coûts cachés, pas d'abonnement déguisé.
          </p>
        </Reveal>
      </header>

      <Reveal className="vw-prices">
        {offers.map((o, i) => (
          <div key={i} className={`vw-price ${o.featured ? "vw-price--featured" : ""}`}>
            <div className="vw-price__tag">
              <span>{o.tag[0]}</span>
              {o.tag[1] && <span className="badge">{o.tag[1]}</span>}
            </div>
            <h3 className="vw-price__name">{o.name[0]}<br/><em>{o.name[1]}</em></h3>
            <div className="vw-price__amount">
              <span>{o.amount[0]}</span>
              <span className="vw-price__amount-label">{o.amount[1]}</span>
            </div>
            <p className="vw-price__desc">{o.desc}</p>
            <ul className="vw-price__list">
              {o.list.map((it, j) => <li key={j}>{it}</li>)}
            </ul>
            <div className="vw-price__delivery">{o.delivery}</div>
            <a href="#contact" onClick={(e)=>{e.preventDefault(); onNav("contact");}}
               className={`vw-btn ${o.featured ? "vw-btn--accent" : ""}`}
               style={{ marginTop: "auto" }}>
              <span className="vw-btn__dot"></span>
              <span>Choisir cette offre →</span>
            </a>
          </div>
        ))}
      </Reveal>

      <section className="vw-faq">
        <div className="vw-faq__head">
          <Reveal>
            <div className="vw-eyebrow" style={{ marginBottom: 24 }}>/ Questions fréquentes</div>
            <h2 className="vw-faq__title">Vous vous <em>demandez</em>...</h2>
          </Reveal>
          <Reveal>
            <p style={{ color: "var(--fg-muted)", fontSize: 16, lineHeight: 1.55, maxWidth: 480, paddingBottom: 12 }}>
              Pas trouvé votre réponse ? Écrivez-moi directement à <a href="mailto:veloxweb@yahoo.com" style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)" }}>veloxweb@yahoo.com</a> — je réponds en moins de 24h.
            </p>
          </Reveal>
        </div>

        <div className="vw-faq__list">
          {faqs.map(([q, a], i) => (
            <div key={i} className={`vw-faq__item ${open === i ? "is-open" : ""}`}>
              <button className="vw-faq__btn" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="vw-faq__num">/ 0{i + 1}</span>
                <span className="vw-faq__q">{q}</span>
                <span className="vw-faq__icon">+</span>
              </button>
              <div className="vw-faq__answer">
                <div className="vw-faq__answer-inner">
                  <div>{a}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

window.Tarifs = Tarifs;