// === Section components ===

const { useState, useEffect, useRef } = React;

// ---------- Header ----------
const Header = ({ active, onCTA, onMenu, mobileOpen }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "accueil", label: "Accueil" },
    { id: "services", label: "Services" },
    { id: "tarifs", label: "Tarifs" },
    { id: "zone", label: "Zone d'intervention" },
    { id: "contact", label: "Contact" },
  ];

  const onClick = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
    onMenu(false);
  };

  return (
    <>
      <header className={`header ${scrolled ? "scrolled" : ""}`}>
        <div className="container header-inner">
          <a href="#accueil" className="logo-mark" onClick={(e) => onClick(e, "accueil")} aria-label="Accueil">
            <LogoSVG height={72} dark={false} />
          </a>
          <nav className="nav" aria-label="Navigation principale">
            {links.map((l) => (
              <a key={l.id} href={`#${l.id}`} className={active === l.id ? "active" : ""}
                 onClick={(e) => onClick(e, l.id)}>{l.label}</a>
            ))}
          </nav>
          <div className="header-cta">
            <button className={`menu-toggle ${mobileOpen ? "open" : ""}`}
                    aria-label={mobileOpen ? "Fermer le menu" : "Ouvrir le menu"}
                    aria-expanded={mobileOpen}
                    onClick={() => onMenu(!mobileOpen)}>
              <span></span>
            </button>
          </div>
        </div>
      </header>

      {/* Mobile nav drawer */}
      <nav className={`mobile-nav ${mobileOpen ? "open" : ""}`} aria-label="Navigation mobile" aria-hidden={!mobileOpen}>
        <ul>
          {links.map((l) => (
            <li key={l.id}>
              <a href={`#${l.id}`} className={active === l.id ? "active" : ""}
                 onClick={(e) => onClick(e, l.id)}>{l.label}</a>
            </li>
          ))}
        </ul>
        <div className="mobile-cta">
          <a className="btn btn-gold" href="#contact" onClick={(e) => onClick(e, "contact")}>
            <MailIcon size={16} /> Me contacter
          </a>
        </div>
      </nav>
    </>
  );
};

// ---------- Hero ----------
const Hero = ({ onCTA }) => (
  <section id="accueil" className="hero">
    <div className="container hero-inner">
      <div className="hero-text">
        <span className="gold-rule"></span>
        <h1>Votre secrétaire indépendante à Pujols, pour les artisans et TPE du Villeneuvois</h1>
        <div className="subtitle">L'administratif simplifié pour les artisans</div>
        <p className="lede">Je gère votre administratif avec rigueur et efficacité — à distance ou sur site dans un rayon de 15 km autour de Pujols (47).</p>
        <div className="hero-actions">
          <button className="btn btn-outline-white" onClick={() => {
            const el = document.getElementById("services");
            if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
          }}>Découvrir mes services</button>
          <button className="btn btn-gold" onClick={onCTA}>Demander un devis gratuit <ArrowIcon size={16} /></button>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Reassurance ----------
const Reassurance = () => {
  const items = [
    { icon: <ClockIcon size={18} />, text: "Disponible Lun & Jeu 9h–17h · adaptable selon vos besoins" },
    { icon: <PinIcon size={18} />, text: "Pujols (47) · 15 km autour" },
    { icon: <ChatIcon size={18} />, text: "Réponse garantie sous 48h" },
    { icon: <SparkleIcon size={18} />, text: "Premier RDV découverte gratuit" },
  ];
  return (
    <section className="reassurance" aria-label="Réassurance">
      <div className="container">
        <div className="reassurance-grid">
          {items.map((it, i) => (
            <div className="reassurance-item" key={i}>
              <div className="icon">{it.icon}</div>
              <div className="text">{it.text}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- About ----------
const About = () => (
  <section className="about" id="apropos">
    <div className="container">
      <div className="about-text">
        <span className="eyebrow">À propos</span>
        <h2>Cassandra Delpech, secrétaire indépendante</h2>
        <div className="role">— rigueur, discrétion, proximité</div>
        <p>Bienvenue. Je suis Cassandra, secrétaire indépendante installée à Pujols, dans le Lot-et-Garonne. J'accompagne les artisans, indépendants et petites entreprises du Villeneuvois dans la gestion quotidienne de leur administratif — pour qu'ils puissent se concentrer sur leur métier.</p>
        <p>Mon approche : un travail soigné, des délais respectés, et un vrai dialogue. Vous me confiez votre paperasse, vos relances, vos devis ; je m'en charge avec la même attention que si c'était la mienne.</p>
        <div className="credentials">
          <span className="credential">Titre Pro Secrétaire Comptable</span>
          <span className="credential">Spécialisée artisans</span>
          <span className="credential">EBP Bâtiment</span>
          <span className="credential">Dream Flore</span>
        </div>
        <div className="gold-divider"></div>
      </div>
    </div>
  </section>
);

// ---------- Services ----------
const Services = () => {
  const [open, setOpen] = useState(null);

  const items = [
    {
      icon: <FolderIcon size={26} stroke={1.4} />,
      title: "Gestion administrative",
      desc: "Classement, organisation des dossiers, tri et traitement de vos emails.",
      details: [
        "Classement de vos documents papier et numériques",
        "Mise en place de méthodes de classement simples et durables",
        "Suivi rigoureux des dossiers clients, fournisseurs et chantiers",
        "Gestion et tri de vos emails professionnels",
        "Archivage et numérisation de documents",
      ],
    },
    {
      icon: <PenIcon size={26} stroke={1.4} />,
      title: "Rédaction & mise en page",
      desc: "Courriers, devis, modèles personnalisés et reformulation professionnelle.",
      details: [
        "Rédaction de courriers professionnels (clients, fournisseurs, administrations)",
        "Création de devis personnalisés et structurés",
        "Mise en page soignée de vos supports et documents",
        "Création de modèles réutilisables adaptés à votre activité",
        "Reformulation et correction de vos textes",
      ],
    },
    {
      icon: <InvoiceIcon size={26} stroke={1.4} />,
      title: "Facturation",
      desc: "Factures dématérialisées, relances clients, suivi des paiements.",
      details: [
        "Création et envoi de vos factures conformes (dématérialisées)",
        "Suivi précis de vos encaissements",
        "Relances clients professionnelles et efficaces",
        "Organisation et classement de vos paiements",
        "Préparation des éléments pour votre comptable",
      ],
    },
    {
      icon: <TaskIcon size={26} stroke={1.4} />,
      title: "Organisation & suivi",
      desc: "Priorités, suivi de chantiers, dossiers en cours, agenda.",
      details: [
        "Suivi de vos tâches et priorités du quotidien",
        "Organisation et structuration de votre activité administrative",
        "Mise en place d'outils simples et efficaces",
        "Suivi administratif de vos dossiers et chantiers en cours",
        "Gestion et optimisation de votre agenda",
      ],
    },
    {
      icon: <HeadsetIcon size={26} stroke={1.4} />,
      title: "Permanence téléphonique",
      desc: "Accueil d'appels, prise de messages, gestion d'agenda.",
      price: "dès 70 €/mois",
      details: [
        "Accueil de vos appels entrants en votre nom",
        "Prise de messages et transmission rapide",
        "Gestion de votre agenda téléphonique",
        "Vous ne manquez plus aucun client quand vous êtes sur le chantier",
        "Tarif sur devis selon volume d'appels",
      ],
    },
    {
      icon: <SocialIcon size={26} stroke={1.4} />,
      title: "Community management",
      desc: "Présence sur les réseaux sociaux, contenus pour artisans.",
      details: [
        "Gestion et animation de vos réseaux sociaux (Facebook, Instagram…)",
        "Création de contenus valorisant vos réalisations",
        "Développement de votre visibilité locale",
        "Planning éditorial adapté à votre activité",
        "Réponses aux commentaires et messages",
      ],
    },
  ];

  const toggle = (i) => setOpen(open === i ? null : i);

  return (
    <section className="services section" id="services">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Prestations</span>
          <h2>Mes services</h2>
          <div className="section-rule"></div>
          <p>Une offre complète pour décharger votre quotidien administratif — modulable selon vos besoins.</p>
        </div>
        <div className="services-grid">
          {items.map((s, i) => (
            <div
              className={`service-card ${open === i ? "expanded" : ""}`}
              key={i}
              onClick={() => toggle(i)}
              role="button"
              aria-expanded={open === i}
              tabIndex={0}
              onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && toggle(i)}
            >
              <div className="svc-icon">{s.icon}</div>
              <div className="svc-header">
                <h3>{s.title}</h3>
                <span className="svc-toggle" aria-hidden="true">{open === i ? "−" : "+"}</span>
              </div>
              <p>{s.desc}</p>
              {s.price && <span className="price-note">{s.price}</span>}
              <div className="svc-details" aria-hidden={open !== i}>
                <ul>
                  {s.details.map((d, j) => <li key={j}>{d}</li>)}
                </ul>
                <a
                  href="#contact"
                  className="btn btn-gold svc-cta"
                  onClick={(e) => { e.stopPropagation(); const el = document.getElementById("contact"); if (el) window.scrollTo({ top: el.offsetTop - 95, behavior: "smooth" }); }}
                >
                  Demander un devis <ArrowIcon size={14} />
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- For who ----------
const ForYou = () => {
  const cols = [
    { num: "I.", title: "Artisans du BTP", ex: ["Maçon, plombier, électricien", "Couvreur, menuisier", "Peintre, plaquiste"] },
    { num: "II.", title: "Indépendants & professions libérales", ex: ["Consultant, coach", "Thérapeute, kiné", "Photographe, créatif"] },
    { num: "III.", title: "TPE / PME locales", ex: ["Commerce de proximité", "Atelier, fabrique artisanale", "Petite entreprise familiale"] },
  ];
  return (
    <section className="foryou" id="pour-qui">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Clients</span>
          <h2 style={{color:"#fff"}}>À qui je m'adresse&nbsp;?</h2>
          <div className="section-rule"></div>
          <p>Une expérience taillée pour les indépendants qui ont besoin d'un appui régulier, sans embaucher.</p>
        </div>
        <div className="foryou-grid">
          {cols.map((c, i) => (
            <div className="foryou-card" key={i}>
              <div className="num">{c.num}</div>
              <h3>{c.title}</h3>
              <ul className="examples">
                {c.ex.map((e, j) => <li key={j}>{e}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Pricing ----------
const Pricing = ({ onCTA }) => {
  const cards = [
    { label: "Horaire", lede: "Idéal ponctuel", num: "30", unit: "€/h à distance", note: "35 €/h sur site",
      bullets: ["Sans engagement", "Devis gratuit sous 48h", "Facturation à l'heure travaillée"] },
    { label: "Forfait 10h / mois", lede: "Le plus demandé", num: "285", unit: "€ / mois", featured: true, badge: "Recommandé",
      savings: "Économisez 65 € (vs taux horaire)",
      bullets: ["10 heures réparties dans le mois", "Suivi mensuel personnalisé", "Engagement souple — résiliable mensuellement"] },
    { label: "Forfait 20h / mois", lede: "Pour les besoins réguliers", num: "540", unit: "€ / mois",
      bullets: ["20 heures, priorité de réponse", "Reporting hebdomadaire", "Outils dédiés mis en place"] },
  ];
  return (
    <section className="pricing section" id="tarifs">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Investissement</span>
          <h2>Mes tarifs</h2>
          <div className="section-rule"></div>
          <p>Chaque besoin est unique — voici mes formules les plus demandées.</p>
        </div>
        <div className="pricing-grid">
          {cards.map((c, i) => (
            <div className={`price-card ${c.featured ? "featured" : ""}`} key={i}>
              {c.badge && <span className="badge">{c.badge}</span>}
              <div className="label">{c.label}</div>
              <div className="lede">{c.lede}</div>
              <div className="price">
                <span className="num">{c.num}</span>
                <span className="unit">{c.unit}</span>
              </div>
              {c.note && <div className="lede" style={{marginTop:-12}}>{c.note}</div>}
              {c.savings && <div className="savings">★ {c.savings}</div>}
              <ul>
                {c.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
              <button className={`btn ${c.featured ? "btn-gold" : "btn-outline-navy"}`} onClick={onCTA}>
                Choisir cette formule
              </button>
            </div>
          ))}
        </div>
        <div className="pricing-extra">
          <div className="extra-block">
            <div className="left">
              <div className="label">Offre d'entrée</div>
              <h4>Pack découverte 5 h</h4>
              <p>Idéal pour tester la collaboration sur un dossier précis.</p>
            </div>
            <div className="right">145 € <small>tout compris</small></div>
          </div>
          <div className="extra-block">
            <div className="left">
              <div className="label">Forfait dédié</div>
              <h4>Permanence téléphonique</h4>
              <p>Ne ratez plus un appel — accueil, messages, agenda.</p>
            </div>
            <div className="right">70 € <small>/ mois</small></div>
          </div>
        </div>
        <div className="legal-note">TVA non applicable — Art. 293 B du CGI</div>
        <div className="pricing-cta">
          <button className="btn btn-gold" onClick={onCTA}>
            Obtenir un devis personnalisé <ArrowIcon size={16} />
          </button>
        </div>
      </div>
    </section>
  );
};

// ---------- Zone ----------
const Zone = () => {
  const towns = [
    "Pujols", "Villeneuve-sur-Lot", "Bias", "Sainte-Livrade-sur-Lot",
    "Casseneuil", "Monflanquin", "Penne-d'Agenais", "Laroque-Timbaut",
    "Saint-Antoine-de-Ficalba"
  ];
  return (
    <section className="zone" id="zone">
      <div className="container">
        <div className="section-head" style={{textAlign:"left", margin:"0 0 48px"}}>
          <span className="eyebrow">Territoire</span>
          <h2>Zone d'intervention</h2>
          <div className="section-rule" style={{marginLeft:0}}></div>
          <p style={{marginLeft:0}}>Présence physique dans un rayon de 15 km autour de Pujols (47).</p>
        </div>
        <div className="zone-grid">
          <div>
            <ul className="zone-list">
              {towns.map((t) => <li key={t}>{t}</li>)}
            </ul>
          </div>
          <div className="map-wrap">
            <StylizedMap towns={towns} />
          </div>
        </div>
      </div>
    </section>
  );
};

const StylizedMap = ({ towns }) => {
  // Stylized SVG map: navy background, gold ring around Pujols, dotted town markers
  // Approximate relative positions (manual, illustrative — not geographic accuracy)
  const points = [
    { name: "Pujols", x: 50, y: 52, hub: true },
    { name: "Villeneuve-sur-Lot", x: 52, y: 48 },
    { name: "Bias", x: 45, y: 51 },
    { name: "Sainte-Livrade-sur-Lot", x: 38, y: 50 },
    { name: "Casseneuil", x: 56, y: 44 },
    { name: "Monflanquin", x: 60, y: 30 },
    { name: "Penne-d'Agenais", x: 70, y: 60 },
    { name: "Laroque-Timbaut", x: 32, y: 68 },
    { name: "Saint-Antoine-de-Ficalba", x: 44, y: 64 },
  ];
  const [hover, setHover] = useState(null);
  return (
    <svg viewBox="0 0 100 80" width="100%" height="100%" style={{display:"block"}}>
      <defs>
        <pattern id="grid" width="6" height="6" patternUnits="userSpaceOnUse">
          <path d="M 6 0 L 0 0 0 6" fill="none" stroke="rgba(31,42,68,0.06)" strokeWidth="0.2"/>
        </pattern>
      </defs>
      <rect width="100" height="80" fill="#FAFAF7"/>
      <rect width="100" height="80" fill="url(#grid)"/>
      {/* River sketch */}
      <path d="M 0 50 Q 20 46, 35 50 T 70 52 T 100 48" fill="none" stroke="rgba(31,42,68,0.12)" strokeWidth="0.8" />
      {/* Coverage zone */}
      <circle cx="50" cy="52" r="14" fill="rgba(212,175,55,0.08)" stroke="rgba(212,175,55,0.5)" strokeWidth="0.4" strokeDasharray="0.8 0.8"/>
      <circle cx="50" cy="52" r="22" fill="none" stroke="rgba(212,175,55,0.25)" strokeWidth="0.3" strokeDasharray="0.4 0.6"/>
      {/* Points */}
      {points.map((p) => (
        <g key={p.name} onMouseEnter={() => setHover(p.name)} onMouseLeave={() => setHover(null)} style={{cursor:"pointer"}}>
          {p.hub ? (
            <>
              <circle cx={p.x} cy={p.y} r="2.4" fill="#1F2A44" />
              <circle cx={p.x} cy={p.y} r="3.6" fill="none" stroke="#D4AF37" strokeWidth="0.5"/>
            </>
          ) : (
            <circle cx={p.x} cy={p.y} r="1.2" fill="#D4AF37" />
          )}
          <text x={p.x} y={p.y - (p.hub ? 4 : 2.5)} textAnchor="middle" fontSize={p.hub ? "2.6" : "2"} fill="#1F2A44" fontFamily="Inter, sans-serif" fontWeight={p.hub ? 700 : 500}>
            {p.name}
          </text>
        </g>
      ))}
      <text x="98" y="78" textAnchor="end" fontSize="1.8" fill="#9b9b9b" fontFamily="Inter, sans-serif" fontStyle="italic">
        Zone illustrative — Lot-et-Garonne (47)
      </text>
    </svg>
  );
};

// ---------- Tools ----------
const Tools = () => {
  const tools = ["EBP Bâtiment", "Dream Flore", "Google Workspace", "Canva", "ChatGPT", "Qonto"];
  return (
    <section className="tools section" id="outils">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Stack</span>
          <h2>Les outils que j'utilise</h2>
          <div className="section-rule"></div>
        </div>
        <div className="tools-row">
          {tools.map((t) => (
            <div className="tool-pill" key={t}><span className="dot"></span>{t}</div>
          ))}
        </div>
        <p className="tools-lede">Des outils modernes pour un travail efficace, y compris les outils spécifiques au BTP. Je m'adapte également au logiciel de votre choix.</p>
      </div>
    </section>
  );
};

// ---------- Contact ----------
// TODO: remplacer YOUR_FORM_ID par l'ID Formspree réel (https://formspree.io)
const FORMSPREE_ENDPOINT = "https://formspree.io/f/xvznpvzd";

const Contact = ({ onBook }) => {
  const [form, setForm] = useState({ nom:"", prenom:"", email:"", tel:"", message:"", rgpd:false });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [sendError, setSendError] = useState(false);
  const [sending, setSending] = useState(false);

  const validate = () => {
    const e = {};
    if (!form.nom.trim()) e.nom = "Champ requis";
    if (!form.prenom.trim()) e.prenom = "Champ requis";
    if (!/^[\w.+-]+@[\w-]+\.[a-z]{2,}$/i.test(form.email)) e.email = "Email invalide";
    if (!form.message.trim() || form.message.length < 10) e.message = "Merci de détailler votre demande (10 caractères min.)";
    if (!form.rgpd) e.rgpd = "Acceptation requise";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSending(true);
    setSendError(false);
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
          nom: form.nom,
          prenom: form.prenom,
          email: form.email,
          tel: form.tel,
          message: form.message,
        }),
      });
      if (res.ok) {
        setSent(true);
        setForm({ nom:"", prenom:"", email:"", tel:"", message:"", rgpd:false });
        setTimeout(() => setSent(false), 5000);
      } else {
        setSendError(true);
      }
    } catch (_) {
      setSendError(true);
    } finally {
      setSending(false);
    }
  };

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="section-head" style={{margin:"0 0 48px"}}>
          <span className="eyebrow">Contact</span>
          <h2>Parlons de votre projet</h2>
          <div className="section-rule"></div>
          <p style={{color:"rgba(255,255,255,0.75)"}}>Un message, un appel, ou un café — choisissez ce qui vous convient le mieux.</p>
        </div>
        <div className="contact-grid">
          <form className="contact-form" noValidate onSubmit={submit}>
            <div className="field-row">
              <div className={`field ${errors.nom ? "error" : ""}`}>
                <label>Nom</label>
                <input type="text" value={form.nom} onChange={(e) => set("nom", e.target.value)} placeholder="Dupont" />
                <div className="err-msg">{errors.nom}</div>
              </div>
              <div className={`field ${errors.prenom ? "error" : ""}`}>
                <label>Prénom</label>
                <input type="text" value={form.prenom} onChange={(e) => set("prenom", e.target.value)} placeholder="Pierre" />
                <div className="err-msg">{errors.prenom}</div>
              </div>
            </div>
            <div className="field-row">
              <div className={`field ${errors.email ? "error" : ""}`}>
                <label>Email</label>
                <input type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="vous@exemple.fr" />
                <div className="err-msg">{errors.email}</div>
              </div>
              <div className="field">
                <label>Téléphone <span style={{opacity:0.6}}>(facultatif)</span></label>
                <input type="tel" value={form.tel} onChange={(e) => set("tel", e.target.value)} placeholder="06 ..." />
              </div>
            </div>
            <div className={`field ${errors.message ? "error" : ""}`}>
              <label>Votre message</label>
              <textarea rows="4" value={form.message} onChange={(e) => set("message", e.target.value)} placeholder="Décrivez brièvement votre activité et vos besoins..."></textarea>
              <div className="err-msg">{errors.message}</div>
            </div>
            <div className="rgpd">
              <input type="checkbox" id="rgpd" checked={form.rgpd} onChange={(e) => set("rgpd", e.target.checked)} />
              <label htmlFor="rgpd">
                J'accepte que mes informations soient utilisées uniquement pour me recontacter dans le cadre de ma demande, conformément au RGPD.
                {errors.rgpd && <span style={{color:"#FFB1A8", display:"block"}}>{errors.rgpd}</span>}
              </label>
            </div>
            <button type="submit" className="btn btn-gold" style={{width:"100%"}} disabled={sending}>
              <MailIcon size={16}/> {sending ? "Envoi en cours…" : "Envoyer ma demande"}
            </button>
            <div className={`form-success ${sent ? "show" : ""}`}>
              ✓ Merci, votre demande a bien été envoyée. Je vous réponds sous 48h.
            </div>
            {sendError && (
              <div className="form-success show" style={{background:"rgba(220,53,69,0.15)", color:"#FFB1A8"}}>
                ✗ Une erreur est survenue. Merci de réessayer ou de contacter directement par email.
              </div>
            )}
          </form>
          <div className="contact-info">
            <div className="item">
              <div className="icon"><PhoneIcon size={18} /></div>
              <div>
                <div className="label">Téléphone</div>
                <div className="value"><a href="tel:+33659347660">06 59 34 76 60</a></div>
              </div>
            </div>
            <div className="item">
              <div className="icon"><MailIcon size={18} /></div>
              <div>
                <div className="label">Email</div>
                <div className="value"><a href="mailto:secretariat.gestion47@gmail.com">secretariat.gestion47@gmail.com</a></div>
              </div>
            </div>
            <div className="item">
              <div className="icon"><PinIcon size={18} /></div>
              <div>
                <div className="label">Adresse</div>
                <div className="value">Pujols (47) · Lot-et-Garonne</div>
              </div>
            </div>
            <div className="booking">
              <strong>Premier RDV découverte gratuit</strong>
              <p>30 minutes pour faire connaissance et comprendre vos besoins — sans engagement. Appelez-moi ou envoyez un message via le formulaire.</p>
              <a className="btn btn-gold" href="tel:+33659347660">
                <PhoneIcon size={16} /> 06 59 34 76 60
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Footer ----------
const Footer = () => (
  <footer className="footer">
    <div className="container footer-inner">
      <div className="footer-top">
        <div className="footer-logo">
          <LogoSVG height={64} dark={false}/>
        </div>
        <nav className="footer-links" aria-label="Liens légaux">
          <a href="/mentions-legales">Mentions légales</a>
          <a href="/politique-confidentialite">Politique de confidentialité</a>
          <a href="#" onClick={(e) => { e.preventDefault(); localStorage.removeItem("sg_cookies"); location.reload(); }}>Cookies</a>
        </nav>
      </div>
      <div className="footer-bottom">
        <div className="footer-legal">
          SIRET : <span>102 276 680 000 18</span> · TVA non applicable — Art. 293 B du CGI
        </div>
        <div>© 2025 Secrétariat &amp; Gestion by Cassandra — Tous droits réservés</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Header, Hero, Reassurance, About, Services, ForYou, Pricing, Zone, Tools, Contact, Footer,
});