const { useState, useEffect, useRef } = React;

// ---------- NAV ----------
const Nav = ({ onBookClick, onMenu }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['Services', '#services'],
    ['Tarifs', '#tarifs'],
    ['Méthode', '#methode'],
    ['À propos', '#apropos'],
    ['FAQ', '#faq'],
    ['Contact', '#contact'],
  ];
  const close = () => setOpen(false);
  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="container nav-inner">
          <a href="#top" className="brand" onClick={close}>
            <Mark size={32} color="#003b1f" />
            <span className="brand-text">Soutix.ch</span>
          </a>
          <div className="nav-links">
            {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
          </div>
          <div className="nav-cta">
            <a href="tel:+41762817643" className="btn btn-sm btn-ghost ghost-btn"><Icon name="phone" size={14} /> 076 281 76 43</a>
            <button className="btn btn-sm btn-primary" onClick={onBookClick}>Réserver</button>
            <button className="menu-btn" onClick={() => setOpen(!open)} aria-label="Menu">
              <Icon name={open ? 'close' : 'menu'} size={20} />
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        {links.map(([t, h]) => <a key={h} href={h} onClick={close}>{t}</a>)}
        <a href="tel:+41762817643" onClick={close}>076 281 76 43</a>
      </div>
    </>
  );
};

// ---------- HERO ----------
const Hero = ({ onBookClick }) => (
  <section id="top" className="hero hero-bg-1">
    <div className="container">
      <div className="hero-grid">
        <div>
          <div className="eyebrow">Lausanne · Vaud · Région</div>
          <h1 style={{marginTop:18}}>
            Le support informatique <span style={{color:'var(--primary)'}}>de proximité</span> pour votre quotidien.
          </h1>
          <p className="lead" style={{marginTop:22,fontSize:19,lineHeight:1.6,color:'var(--ink-2)',maxWidth:560}}>
            Installation, dépannage, mise en réseau et aménagement de poste de travail.
            Rapide, fiable et sans jargon, pour les particuliers et les petites entreprises.
          </p>
          <div style={{display:'flex',gap:12,marginTop:32,flexWrap:'wrap'}}>
            <button className="btn btn-primary" onClick={onBookClick}>
              Réserver une intervention <Icon name="arrow" size={16} />
            </button>
            <a href="#services" className="btn btn-ghost">Voir les services</a>
          </div>
          <div className="strip" style={{marginTop:28}}>
            <span style={{display:'inline-flex',alignItems:'center',gap:8}}><Icon name="check" size={14} color="var(--primary)" /> Devis gratuit</span>
            <span style={{display:'inline-flex',alignItems:'center',gap:8}}><Icon name="check" size={14} color="var(--primary)" /> Intervention sous 24h</span>
            <span style={{display:'inline-flex',alignItems:'center',gap:8}}><Icon name="check" size={14} color="var(--primary)" /> Sans engagement</span>
          </div>
        </div>

        <div className="hero-card">
          <div className="hc-head">
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <div className="hc-dots"><div className="hc-dot"></div><div className="hc-dot"></div><div className="hc-dot"></div></div>
              <span className="mono" style={{fontSize:12,color:'var(--muted)'}}>~/interventions/today</span>
            </div>
            <span className="chip"><span style={{width:6,height:6,borderRadius:'50%',background:'var(--primary)'}}></span>En ligne</span>
          </div>
          <div className="hc-line">
            <span className="hc-tick"><Icon name="check" size={11} stroke={2.6}/></span>
            <div style={{flex:1}}>
              <div style={{fontWeight:600}}>Installation MacBook Pro</div>
              <div style={{fontSize:12,color:'var(--muted)'}}>Mme Rey · Pully · 09:30</div>
            </div>
            <span className="hc-status">Terminé</span>
          </div>
          <div className="hc-line">
            <span className="hc-tick"><Icon name="check" size={11} stroke={2.6}/></span>
            <div style={{flex:1}}>
              <div style={{fontWeight:600}}>Aménagement poste · 2 écrans</div>
              <div style={{fontSize:12,color:'var(--muted)'}}>Atelier Verde Sàrl · Renens · 11:00</div>
            </div>
            <span className="hc-status">Terminé</span>
          </div>
          <div className="hc-line">
            <span className="hc-tick" style={{background:'#fff1d6',color:'#7a4a00'}}><Icon name="bolt" size={11} stroke={2.6}/></span>
            <div style={{flex:1}}>
              <div style={{fontWeight:600}}>Wi-Fi instable · diagnostic</div>
              <div style={{fontSize:12,color:'var(--muted)'}}>M. Délez · Lausanne · 14:30</div>
            </div>
            <span className="hc-status warn">En cours</span>
          </div>
          <div className="hc-line">
            <span className="hc-tick" style={{background:'var(--cream)',color:'var(--muted)'}}><Icon name="clock" size={11} stroke={2.6}/></span>
            <div style={{flex:1}}>
              <div style={{fontWeight:600}}>Migration données PC → Mac</div>
              <div style={{fontSize:12,color:'var(--muted)'}}>M. Borel · Prilly · 16:00</div>
            </div>
            <span className="hc-status" style={{background:'var(--cream)',color:'var(--muted)'}}>À venir</span>
          </div>
          <div style={{marginTop:18,paddingTop:16,borderTop:'1px solid var(--line-2)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{fontSize:12,color:'var(--muted)'}}>4 interventions · jeu. 14 mai</span>
            <span className="mono" style={{fontSize:11,color:'var(--primary)'}}>+1 créneau dispo</span>
          </div>
        </div>
      </div>

      <div className="hero-stats">
        <div className="stat"><div className="stat-num">24h</div><div className="stat-lbl">Délai d'intervention moyen</div></div>
        <div className="stat"><div className="stat-num">320+</div><div className="stat-lbl">Postes installés et configurés</div></div>
        <div className="stat"><div className="stat-num">4.9 ★</div><div className="stat-lbl">Note moyenne sur 87 avis clients</div></div>
      </div>
    </div>
  </section>
);

// ---------- SERVICES ----------
const services = [
  {
    n: '01', icon: 'desk', cat: 'A',
    title: 'Aménagement de poste',
    desc: 'Installation complète d\'un nouveau bureau : PC, écrans, accessoires, gestion des câbles et optimisation pour votre confort et votre productivité.',
    chips: ['Setup complet', 'Câblage', 'Ergonomie', 'Multi-écrans'],
    price: 'Dès CHF 180', priceSub: 'forfait setup'
  },
  {
    n: '02', icon: 'chip', cat: 'B',
    title: 'Installation d\'ordinateur',
    desc: 'Installation de Windows ou macOS, mise en place des applications, configuration, mises à jour et transfert de vos données depuis l\'ancien poste.',
    chips: ['Windows', 'macOS', 'Apps', 'Migration données'],
    price: 'Dès CHF 140', priceSub: 'forfait poste'
  },
  {
    n: '03', icon: 'headset', cat: 'C',
    title: 'Support technique N1 / N2',
    desc: 'Dépannage, ordinateurs lents, réseau et Wi-Fi, configuration d\'imprimantes, problèmes logiciels — sur place ou à distance, en français simple.',
    chips: ['Dépannage', 'Wi-Fi', 'Imprimantes', 'À distance'],
    price: 'CHF 90/h', priceSub: 'minimum 1 heure'
  },
  {
    n: '04', icon: 'sparkle', cat: 'D',
    title: 'Conseil & upgrades',
    desc: 'Conseil informatique, petits upgrades hardware (RAM, SSD), aide à l\'achat de nouveau matériel adapté à vos besoins et à votre budget.',
    chips: ['Conseil', 'RAM / SSD', 'Achat matériel'],
    price: 'CHF 90/h', priceSub: 'devis gratuit'
  },
];

const Services = ({ onBookClick }) => (
  <section id="services" className="section-cream-deep">
    <div className="container">
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'end',marginBottom:48}}>
        <div>
          <div className="eyebrow">Services</div>
          <h2 style={{marginTop:18}}>Une offre claire,<br/>du setup au dépannage.</h2>
        </div>
        <p style={{color:'var(--ink-2)',fontSize:17,lineHeight:1.6,maxWidth:480,justifySelf:'end'}}>
          Quatre axes pour couvrir l'ensemble de vos besoins informatiques au quotidien — sans abonnement, sans engagement, sans frais cachés.
        </p>
      </div>

      <div>
        {services.map(s => (
          <div key={s.n} className="svc-row">
            <div className="num">{s.n} / Catégorie {s.cat}</div>
            <div>
              <div style={{display:'flex',alignItems:'center',gap:14}}>
                <span style={{width:44,height:44,borderRadius:10,background:'var(--primary-soft)',color:'var(--primary-deep)',display:'inline-flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                  <Icon name={s.icon} size={22} />
                </span>
                <div className="title">{s.title}</div>
              </div>
              <p className="desc">{s.desc}</p>
              <div className="meta">{s.chips.map(c => <span key={c} className="chip chip-outline" style={{background:'#fff'}}>{c}</span>)}</div>
            </div>
            <div className="price">{s.price}<small>{s.priceSub}</small></div>
          </div>
        ))}
      </div>

      <div style={{marginTop:48,display:'flex',gap:14,alignItems:'center',flexWrap:'wrap'}}>
        <button className="btn btn-primary" onClick={onBookClick}>Réserver une intervention <Icon name="arrow" size={16}/></button>
        <a href="#contact" className="btn btn-ghost">Demander un devis</a>
        <span style={{fontSize:14,color:'var(--muted)',marginLeft:'auto'}}>Tarifs TTC · Déplacement offert dans Lausanne</span>
      </div>
    </div>
  </section>
);

// ---------- METHODE ----------
const Methode = () => (
  <section id="methode">
    <div className="container">
      <div className="eyebrow">Méthode</div>
      <h2 style={{marginTop:18,maxWidth:680}}>Une intervention propre, en quatre étapes.</h2>
      <p style={{color:'var(--ink-2)',fontSize:17,lineHeight:1.6,maxWidth:540,marginTop:14,marginBottom:40}}>
        Vous savez précisément ce qui se passe, et combien ça coûte, à chaque étape — comme un câblage bien rangé, sans surprise.
      </p>
      <div className="process">
        {[
          ['01','Prise de contact','Vous décrivez la situation par téléphone, e-mail ou via le formulaire. Premier diagnostic gratuit.'],
          ['02','Devis & rendez-vous','Vous recevez un devis clair sous 24h et choisissez votre créneau (sur place ou à distance).'],
          ['03','Intervention','Je viens chez vous ou me connecte à distance. Vous suivez ce qui est fait et pourquoi.'],
          ['04','Suivi & garantie','Compte-rendu écrit, conseils d\'usage et garantie de bon fonctionnement après l\'intervention.'],
        ].map(([n,t,d],i)=>(
          <div key={n} className="ptile">
            <div className="pn">ÉTAPE {n}</div>
            {i<3 && <span className="arrow"><Icon name="arrow" size={16} color="var(--line)"/></span>}
            <h4>{t}</h4>
            <p>{d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- TARIFS ----------
const Tarifs = () => {
  const plans = [
    {
      name: 'À la demande', tag: 'Particulier',
      price: '90', unit: '/heure',
      desc: 'Pour un dépannage ponctuel ou une question rapide.',
      features: ['Min. 1 heure facturée','Sur place ou à distance','Devis avant intervention','Garantie 14 jours'],
      cta:'Réserver une heure', highlight:false
    },
    {
      name: 'Forfait Setup', tag: 'Le plus choisi',
      price: '290', unit: 'forfait',
      desc: 'Installation complète d\'un poste de travail, clé en main.',
      features: ['Poste + 2 écrans + accessoires','Câblage propre & gestion des fils','Installation OS et applications','Migration des données'],
      cta:'Réserver mon setup', highlight:true
    },
    {
      name: 'Petite entreprise', tag: 'PME',
      price: 'Sur mesure', unit: '',
      desc: 'Plusieurs postes, suivi régulier, conseil.',
      features: ['Forfait mensuel ou à la mission','Inventaire & documentation','Astreinte téléphonique','Tarif dégressif dès 3 postes'],
      cta:'Demander un devis', highlight:false
    },
  ];
  return (
    <section id="tarifs" className="section-wash">
      <div className="container">
        <div style={{display:'flex',alignItems:'end',justifyContent:'space-between',gap:24,flexWrap:'wrap',marginBottom:40}}>
          <div>
            <div className="eyebrow">Tarifs</div>
            <h2 style={{marginTop:18}}>Des prix simples,<br/>en francs suisses, sans surprise.</h2>
          </div>
          <p style={{color:'var(--ink-2)',fontSize:16,maxWidth:380}}>
            Tous les tarifs incluent le déplacement dans Lausanne et le compte-rendu écrit. Hors Lausanne : CHF 1.20 / km au-delà de 10 km.
          </p>
        </div>
        <div className="grid-3">
          {plans.map(p => (
            <div key={p.name} className="card" style={{
              padding:32,
              background: p.highlight ? 'var(--primary-deep)' : '#fff',
              color: p.highlight ? '#eaf5ee' : 'var(--ink)',
              borderColor: p.highlight ? 'var(--primary-deep)' : 'var(--line)',
              position:'relative',
              boxShadow: p.highlight ? '0 24px 60px -28px rgba(15,91,52,.55)' : 'none'
            }}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span style={{fontSize:13,fontWeight:600,color:p.highlight?'var(--primary-soft)':'var(--muted)'}}>{p.name}</span>
                <span className="chip" style={{background: p.highlight?'rgba(255,255,255,.12)':'var(--primary-soft)',color: p.highlight?'#fff':'var(--primary-deep)'}}>{p.tag}</span>
              </div>
              <div style={{marginTop:24,display:'flex',alignItems:'baseline',gap:6}}>
                {p.price !== 'Sur mesure' && <span style={{fontSize:14,fontWeight:600,color:p.highlight?'#eaf5ee':'var(--muted)'}}>CHF</span>}
                <span style={{fontSize:48,fontWeight:700,letterSpacing:'-.02em'}}>{p.price}</span>
                <span style={{fontSize:14,color:p.highlight?'rgba(255,255,255,.7)':'var(--muted)'}}>{p.unit}</span>
              </div>
              <p style={{marginTop:8,fontSize:14,color:p.highlight?'rgba(255,255,255,.75)':'var(--ink-2)'}}>{p.desc}</p>
              <ul style={{listStyle:'none',marginTop:24,display:'flex',flexDirection:'column',gap:10}}>
                {p.features.map(f => (
                  <li key={f} style={{display:'flex',alignItems:'center',gap:10,fontSize:14}}>
                    <Icon name="check" size={14} color={p.highlight?'var(--primary-soft)':'var(--primary)'} stroke={2.4}/>
                    {f}
                  </li>
                ))}
              </ul>
              <a href="#reserver" className="btn" style={{marginTop:28,width:'100%',
                background: p.highlight ? '#fff' : 'var(--primary-deep)',
                color: p.highlight ? 'var(--primary-deep)' : '#fff'
              }}>{p.cta} <Icon name="arrow" size={14}/></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- ABOUT ----------
const About = () => (
  <section id="apropos">
    <div className="container">
      <div className="grid-2" style={{alignItems:'center'}}>
        <div>
          <div className="eyebrow">À propos</div>
          <h2 style={{marginTop:18}}>Un seul interlocuteur, à Lausanne, qui connaît ses dossiers.</h2>
          <p style={{marginTop:22,fontSize:17,color:'var(--ink-2)',lineHeight:1.65}}>
            Soutix.ch, c'est un service de support informatique de proximité pour les particuliers et les petites entreprises de Lausanne et de la région.
            Pas de hotline qui boucle, pas de jargon : un technicien qui se déplace, vous écoute, et résout — proprement.
          </p>
          <p style={{marginTop:14,fontSize:17,color:'var(--ink-2)',lineHeight:1.65}}>
            L'objectif : que votre informatique cesse d'être un problème, pour redevenir un outil — fiable, rangé, à votre service.
          </p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginTop:32}}>
            {[
              ['Sur place','Lausanne & alentours, dans la journée'],
              ['À distance','Pour les petits dépannages rapides'],
              ['Particuliers','Setup, dépannage, conseil'],
              ['PME','Postes, réseau, suivi régulier'],
            ].map(([t,d])=>(
              <div key={t} style={{display:'flex',gap:12,alignItems:'flex-start'}}>
                <span style={{width:8,height:8,borderRadius:'50%',background:'var(--primary)',marginTop:8,flexShrink:0}}></span>
                <div>
                  <div style={{fontWeight:700}}>{t}</div>
                  <div style={{fontSize:14,color:'var(--muted)'}}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{position:'relative'}}>
          <div style={{
            background:'linear-gradient(160deg, var(--primary-soft), var(--primary-wash))',
            borderRadius:'var(--r-lg)',padding:'40px 32px',border:'1px solid var(--line)',
            position:'relative',overflow:'hidden'
          }}>
            <Icon name="quote" size={36} color="var(--primary-deep)"/>
            <p style={{fontSize:22,lineHeight:1.45,letterSpacing:'-.01em',marginTop:18,color:'var(--primary-deep)',fontWeight:500}}>
              « En deux heures, mon nouveau bureau était installé, mes données transférées et mes câbles invisibles. Honnêtement, j'aurais pas su par où commencer. »
            </p>
            <div style={{display:'flex',alignItems:'center',gap:12,marginTop:28}}>
              <div style={{width:44,height:44,borderRadius:'50%',background:'var(--primary-deep)',color:'#fff',display:'inline-flex',alignItems:'center',justifyContent:'center',fontWeight:700}}>CR</div>
              <div>
                <div style={{fontWeight:700}}>Camille Roulin</div>
                <div style={{fontSize:13,color:'var(--ink-2)'}}>Architecte indépendante · Lausanne</div>
              </div>
              <div style={{marginLeft:'auto',display:'flex',gap:2,color:'var(--primary-deep)'}}>
                {[1,2,3,4,5].map(i=><Icon key={i} name="star" size={14} color="var(--primary-deep)" stroke={0}/>)}
              </div>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginTop:14}}>
            <div className="card-flat" style={{padding:18,background:'#fff'}}>
              <div style={{fontSize:32,fontWeight:700,color:'var(--primary-deep)',letterSpacing:'-.02em'}}>320+</div>
              <div style={{fontSize:13,color:'var(--muted)',marginTop:4}}>Postes installés</div>
            </div>
            <div className="card-flat" style={{padding:18,background:'#fff'}}>
              <div style={{fontSize:32,fontWeight:700,color:'var(--primary-deep)',letterSpacing:'-.02em'}}>4.9 ★</div>
              <div style={{fontSize:13,color:'var(--muted)',marginTop:4}}>Sur 87 avis clients</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- FAQ ----------
const FAQ = () => {
  const [open, setOpen] = useState(0);
  const items = [
    ['Vous intervenez dans quelles zones ?', 'Lausanne et environs (Pully, Renens, Prilly, Crissier, Lutry, Epalinges…). Au-delà, je facture CHF 1.20/km au-delà de 10 km depuis Lausanne. Pour le télétravail, j\'interviens à distance partout en Suisse.'],
    ['Quels sont les délais d\'intervention ?', 'Pour les urgences professionnelles, j\'essaie de me déplacer dans la journée. Pour les rendez-vous standards, comptez 24 à 72h selon les disponibilités.'],
    ['Travaillez-vous avec Mac et PC ?', 'Oui, les deux. J\'installe et dépanne aussi bien Windows que macOS, et je peux migrer vos données d\'un système à l\'autre.'],
    ['Comment se passe le paiement ?', 'Devis gratuit, paiement après l\'intervention par TWINT, virement ou en espèces. Facture détaillée envoyée par e-mail.'],
    ['Et si le problème revient ?', 'Toute intervention est garantie 14 jours : si le même problème revient, je reviens gratuitement. Pas de petits caractères.'],
  ];
  return (
    <section id="faq" className="section-cream-deep">
      <div className="container" style={{maxWidth:880}}>
        <div className="eyebrow">FAQ</div>
        <h2 style={{marginTop:18,marginBottom:32}}>Questions fréquentes.</h2>
        {items.map(([q,a],i)=>(
          <div key={i} className={`faq-item ${open===i?'open':''}`} onClick={()=>setOpen(open===i?-1:i)}>
            <div className="faq-q">
              <span>{q}</span>
              <span className="plus"><Icon name="plus" size={14}/></span>
            </div>
            <div className="faq-a">{a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ---------- CONTACT ----------
const Contact = () => {
  const [form, setForm] = useState({ name:'', email:'', phone:'', topic:'Aménagement de poste', message:'' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);

  const setField = (k,v) => { setForm(f=>({...f,[k]:v})); setErrors(e=>({...e,[k]:false})); };

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Indiquez votre nom';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = 'Adresse e-mail invalide';
    if (!form.message.trim() || form.message.length < 10) errs.message = 'Décrivez en quelques mots';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setLoading(true);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (data.ok) {
        setSent(true);
        window.__toast && window.__toast('Message envoyé. Je vous réponds sous 24h.');
        setForm({ name:'', email:'', phone:'', topic:'Aménagement de poste', message:'' });
        setTimeout(() => setSent(false), 5000);
      } else {
        window.__toast && window.__toast("Erreur lors de l'envoi. Réessayez ou appelez-nous.");
      }
    } catch {
      window.__toast && window.__toast('Erreur réseau. Réessayez ou appelez-nous.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <section id="contact">
      <div className="container">
        <div className="grid-2" style={{alignItems:'flex-start'}}>
          <div>
            <div className="eyebrow">Contact</div>
            <h2 style={{marginTop:18}}>On en parle ?</h2>
            <p style={{marginTop:18,fontSize:17,color:'var(--ink-2)',lineHeight:1.6,maxWidth:460}}>
              Décrivez votre besoin en deux lignes, je reviens vers vous sous 24h avec un premier avis et un devis gratuit.
            </p>

            <div style={{display:'flex',flexDirection:'column',gap:14,marginTop:36}}>
              <a href="mailto:info@soutix.ch" className="card-flat" style={{padding:20,display:'flex',alignItems:'center',gap:16,background:'#fff'}}>
                <span style={{width:42,height:42,borderRadius:10,background:'var(--primary-soft)',color:'var(--primary-deep)',display:'inline-flex',alignItems:'center',justifyContent:'center'}}><Icon name="mail" size={20}/></span>
                <div>
                  <div style={{fontSize:12,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:700}}>E-mail</div>
                  <div style={{fontWeight:700,marginTop:2}}>info@soutix.ch</div>
                </div>
                <Icon name="arrowUp" size={16} color="var(--muted)" />
              </a>
              <a href="tel:+41762817643" className="card-flat" style={{padding:20,display:'flex',alignItems:'center',gap:16,background:'#fff'}}>
                <span style={{width:42,height:42,borderRadius:10,background:'var(--primary-soft)',color:'var(--primary-deep)',display:'inline-flex',alignItems:'center',justifyContent:'center'}}><Icon name="phone" size={20}/></span>
                <div>
                  <div style={{fontSize:12,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:700}}>Téléphone</div>
                  <div style={{fontWeight:700,marginTop:2}}>076 281 76 43</div>
                </div>
                <Icon name="arrowUp" size={16} color="var(--muted)" />
              </a>
              <div className="card-flat" style={{padding:20,display:'flex',alignItems:'flex-start',gap:16,background:'#fff'}}>
                <span style={{width:42,height:42,borderRadius:10,background:'var(--primary-soft)',color:'var(--primary-deep)',display:'inline-flex',alignItems:'center',justifyContent:'center'}}><Icon name="map" size={20}/></span>
                <div>
                  <div style={{fontSize:12,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:700}}>Adresse</div>
                  <div style={{fontWeight:700,marginTop:2}}>Rue de l'Ale 31</div>
                  <div style={{fontSize:14,color:'var(--ink-2)'}}>1003 Lausanne, Suisse</div>
                </div>
              </div>
            </div>

            <div className="map" style={{marginTop:20}}>
              <div className="map-pin">
                <div className="p"><Icon name="shield" size={16} color="#fff"/></div>
                <div className="map-lbl">Soutix.ch · Rue de l'Ale 31</div>
              </div>
            </div>
          </div>

          <form onSubmit={submit} className="card" style={{padding:32,background:'#fff'}}>
            <div className="eyebrow" style={{color:'var(--primary)'}}>Formulaire</div>
            <h3 style={{marginTop:14,fontSize:24,fontWeight:700,letterSpacing:'-.01em'}}>Décrivez votre besoin</h3>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginTop:20}}>
              <div className={`field ${errors.name?'invalid':''}`}>
                <label>Nom complet</label>
                <input type="text" value={form.name} onChange={e=>setField('name',e.target.value)} placeholder="Votre nom" />
                <span className="err-msg">{errors.name}</span>
              </div>
              <div className={`field ${errors.email?'invalid':''}`}>
                <label>E-mail</label>
                <input type="email" value={form.email} onChange={e=>setField('email',e.target.value)} placeholder="vous@exemple.ch" />
                <span className="err-msg">{errors.email}</span>
              </div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginTop:16}}>
              <div className="field">
                <label>Téléphone (optionnel)</label>
                <input type="tel" value={form.phone} onChange={e=>setField('phone',e.target.value)} placeholder="076 000 00 00" />
              </div>
              <div className="field">
                <label>Type de demande</label>
                <select value={form.topic} onChange={e=>setField('topic',e.target.value)}>
                  <option>Aménagement de poste</option>
                  <option>Installation d'ordinateur</option>
                  <option>Support technique</option>
                  <option>Conseil & upgrade</option>
                  <option>Autre</option>
                </select>
              </div>
            </div>
            <div className={`field ${errors.message?'invalid':''}`} style={{marginTop:16}}>
              <label>Votre message</label>
              <textarea value={form.message} onChange={e=>setField('message',e.target.value)} placeholder="En quelques lignes, votre situation et ce dont vous auriez besoin…"></textarea>
              <span className="err-msg">{errors.message}</span>
            </div>
            <button type="submit" disabled={loading} className="btn btn-primary" style={{marginTop:20,width:'100%'}}>
              {sent ? 'Envoyé ✓' : loading ? 'Envoi en cours…' : <>Envoyer le message <Icon name="arrow" size={16}/></>}
            </button>
            <p style={{fontSize:12,color:'var(--muted)',marginTop:14,textAlign:'center'}}>
              Vos données restent chez moi. Pas de newsletter, pas de tracking.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
};

// ---------- FOOTER ----------
const Footer = () => (
  <footer>
    <div className="container">
      <div className="foot-grid">
        <div>
          <div className="brand" style={{color:'#fff'}}>
            <Mark size={32} color="#bfedd1" />
            <span className="brand-text" style={{color:'#fff'}}>Soutix.ch</span>
          </div>
          <p style={{marginTop:18,fontSize:14,lineHeight:1.65,color:'rgba(255,255,255,.65)',maxWidth:320}}>
            Support informatique de proximité pour particuliers et petites entreprises à Lausanne.
            Rapide, fiable, sans jargon.
          </p>
          <div style={{display:'flex',gap:8,marginTop:20}}>
            <span className="chip" style={{background:'rgba(255,255,255,.08)',color:'#fff'}}>Lausanne</span>
            <span className="chip" style={{background:'rgba(255,255,255,.08)',color:'#fff'}}>Vaud</span>
            <span className="chip" style={{background:'rgba(255,255,255,.08)',color:'#fff'}}>Suisse</span>
          </div>
        </div>
        <div>
          <h4>Services</h4>
          <a href="#services">Aménagement de poste</a>
          <a href="#services">Installation d'ordinateur</a>
          <a href="#services">Support N1 / N2</a>
          <a href="#services">Conseil & upgrades</a>
        </div>
        <div>
          <h4>Soutix</h4>
          <a href="#apropos">À propos</a>
          <a href="#tarifs">Tarifs</a>
          <a href="#methode">Méthode</a>
          <a href="#faq">FAQ</a>
        </div>
        <div>
          <h4>Contact</h4>
          <a href="mailto:info@soutix.ch">info@soutix.ch</a>
          <a href="tel:+41762817643">076 281 76 43</a>
          <a href="#contact">Rue de l'Ale 31<br/>1003 Lausanne</a>
        </div>
      </div>
      <div className="foot-bar">
        <div>© 2026 Soutix.ch · Tous droits réservés</div>
        <div style={{display:'flex',gap:20}}>
          <a href="/mentions-legales.html">Mentions légales</a>
          <a href="/politique-confidentialite.html">Politique de confidentialité</a>
          <a href="/cgv.html">CGV</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Services, Methode, Tarifs, About, FAQ, Contact, Footer });