/* global React, ReactDOM, fmt */
const { useState: useHS, useEffect: useHE, useMemo: useHM } = React;

const HIcon = {
  Arrow: () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>),
  ArrowDown: () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14"/><path d="m5 12 7 7 7-7"/></svg>),
  Bag: () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>),
  Sparkle: () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 13.5 9 21 10.5 13.5 12 12 19.5 10.5 12 3 10.5 10.5 9Z"/></svg>),
  Truck: () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 17h4V5H2v12h3"/><path d="M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5"/><circle cx="7.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>),
  Tag: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>),
  Heart: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/></svg>),
  Brush: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02Z"/></svg>),
  Check: () => (<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>),
};

const TESTIMONIALS = [
  {
    quote: "On vend les kits Aquarelle plus vite qu'on ne les reçoit. Notre vitrine n'a jamais été aussi remarquée.",
    author: "Camille",
    place: "Maison Lumière · Nantes",
    initial: "M",
    stars: 5,
  },
  {
    quote: "Le portail revendeur est devenu notre outil de référence. Recommander en un clic, suivre les livraisons, c'est un confort fou.",
    author: "Élodie",
    place: "L'Atelier des Bois · Bordeaux",
    initial: "A",
    stars: 5,
  },
  {
    quote: "Produits soignés, livraison rapide, packaging joli. Mes client·es repartent avec un objet qui se voit dans leur sac.",
    author: "Julien",
    place: "Papeterie La Brindille · Lille",
    initial: "B",
    stars: 5,
  },
];

function buildFaqs() {
  const cfg = window.EXTRANET_CONFIG || {};
  const min = parseFloat(cfg.minimum_ht) || 100;
  const franco = parseFloat(cfg.franco_ht) || 200;
  const remiseP = parseFloat(cfg.remise_palier_ht) || 450;
  const remisePct = parseFloat(cfg.remise_pourcent) || 10;
  return [
    {
      q: "Comment devenir revendeur ?",
      a: "Inscrivez-vous via le formulaire ci-dessus. Notre équipe valide votre dossier sous 48h ouvrées (justificatif d'activité demandé : SIRET, K-Bis ou n° d'auto-entrepreneur). Une fois validé·e, vous accédez au tarif pro, à l'historique de commandes et au catalogue saisonnier.",
    },
    {
      q: "Quel est le minimum de commande ?",
      a: `${min} € HT minimum pour passer une commande. Franco de port dès ${franco} € HT (sinon 15 € HT de participation aux frais). Remise printemps de −${remisePct} % automatiquement appliquée dès ${remiseP} € HT de commande.`,
    },
    {
      q: "Tous les kits sont-ils par 3 ?",
      a: "Oui, nos kits artisanaux sont conditionnés et expédiés par lots de 3 (mêmes références). Vous pouvez ensuite commander 3, 4, 5, 6… unités d'un même produit, selon vos besoins.",
    },
    {
      q: "Quels sont les délais de livraison ?",
      a: "Nos commandes sont préparées en 24-48h dans notre atelier de Limoges. Livraison Colissimo suivi en 2-3 jours ouvrés après expédition, soit 5 à 7 jours au total. Vous recevez un numéro de tracking par email dès le départ du colis.",
    },
    {
      q: "Avez-vous des PLV / supports de communication ?",
      a: "Nous n'avons pas d'offre PLV actuellement. N'hésitez pas à nous contacter si vous avez un besoin spécifique pour mettre en valeur les kits dans votre boutique.",
    },
  ];
}
function HomePage() {
  const PRODUCTS = window.PRODUCTS;
  const FAQS = buildFaqs();
  const newProducts = useHM(() => PRODUCTS.filter(p => p.isNew && p.available), [PRODUCTS]);
  const featured = newProducts.find(p => p.ref === "K-0157") || newProducts[0];
  // Pour l'apercu home : on prend les 4 autres aquarelles (theme phare de la collection) en priorite,
  // puis les autres themes si pas assez. Tri secondaire par reference.
  const otherNews = newProducts
    .filter(p => p.ref !== featured?.ref)
    .sort((a, b) => {
      if (a.theme === 'aquarelle' && b.theme !== 'aquarelle') return -1;
      if (a.theme !== 'aquarelle' && b.theme === 'aquarelle') return 1;
      return (a.ref || '').localeCompare(b.ref || '');
    })
    .slice(0, 4);

  const [authTab, setAuthTab] = useHS("signup");
  const [openFaq, setOpenFaq] = useHS(0);
  const [accountMenuOpen, setAccountMenuOpen] = useHS(false);
  const isLogged = !!(window.CLIENT && window.CLIENT.nom);
  useHE(() => {
    if (!accountMenuOpen) return;
    const h = (e) => { if (!e.target.closest('.chip-wrap')) setAccountMenuOpen(false); };
    document.addEventListener('click', h);
    return () => document.removeEventListener('click', h);
  }, [accountMenuOpen]);

  return (
    <>
      {/* TOP BAR (standard du portail — meme structure sur toutes les pages) */}
      <header className="topbar">
        <div className="topbar-inner">
          <div className="brand">
            <div className="brand-mark">Émotions <em>Créatives</em></div>
            <div className="brand-sub">PRO · Les French Kits</div>
          </div>
          <nav className="nav-tabs">
            {(window.NAV_TABS || []).map((tab, i) => (
              <a key={i} className={"nav-tab" + (tab.active ? " active" : "")} href={tab.url}>{tab.label}</a>
            ))}
          </nav>
          <div className="topbar-spacer"></div>
          {(window.CLIENT && window.CLIENT.nom) ? (
            <div className="chip-wrap">
              <button type="button" className="client-chip" aria-expanded={accountMenuOpen} onClick={() => setAccountMenuOpen(o => !o)}>
                <div className="client-chip-logo">{window.CLIENT.initiale || '?'}</div>
                <div className="client-chip-meta">
                  <div className="client-chip-name">{window.CLIENT.nom}</div>
                  <div className="client-chip-status">Compte revendeur actif</div>
                </div>
                <span className="chip-chevron"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg></span>
              </button>
              {accountMenuOpen && (
                <div className="client-menu">
                  <a href={(window.EXTRANET_CONFIG?.base_url || '') + '/mon-profil'}>Mon profil</a>
                  <a href={(window.EXTRANET_CONFIG?.base_url || '') + '/mes-adresses'}>Mes adresses</a>
                  <a href={(window.EXTRANET_CONFIG?.mes_commandes_url) || '#'}>Mes commandes</a>
                  <hr />
                  <a href={(window.EXTRANET_CONFIG?.base_url || '') + '/logout'} className="danger">Se déconnecter</a>
                </div>
              )}
            </div>
          ) : (
            <a href={(window.EXTRANET_CONFIG?.base_url || "") + "/connexion"} className="h-btn-login">Se connecter →</a>
          )}
        </div>
      </header>

      {/* ============ HERO ============ */}
      <section className="h-hero">
        <div className="h-hero-inner">
          <div className="h-hero-text">
            <div className="h-hero-eyebrow">
              <span className="pin"><HIcon.Sparkle /></span>
              Collection Printemps · disponible
            </div>
            <h1>
              La marque<br/>
              créative française<br/>
              pensée pour les<br/>
              <em>concept stores</em><br/>
              &amp; <em>boutiques cadeaux</em>.
            </h1>
            <p className="lede">
              Le portail revendeur d'<strong>Émotions Créatives</strong> — l'accès au catalogue pro, les nouveautés saisonnières et l'envoi de bons de commande en quelques clics.
            </p>
            <div className="h-hero-cta">
              <a className="h-btn primary" href="#auth">Devenir revendeur <HIcon.Arrow /></a>
              <a className="h-btn secondary" href={(window.EXTRANET_CONFIG?.nouveautes_url) || "#nouveautes"}>Voir les nouveautés</a>
            </div>
            <div className="h-hero-trust">
              <div className="h-trust-avatars">
                <div className="av">M</div>
                <div className="av">L</div>
                <div className="av">P</div>
                <div className="av">B</div>
                <div className="av" style={{background:'var(--ink)', color:'var(--paper)', fontFamily:'Manrope', fontStyle:'normal', fontSize:11, fontWeight:600}}>+{Math.max(0, ((window.STATS && window.STATS.boutiquesCount) || 0) - 4)}</div>
              </div>
              <div className="h-trust-text">
                <div className="stars">★★★★★</div>
                <div className="meta"><strong>{(window.STATS && window.STATS.boutiquesCount) || 0} boutiques</strong> revendent nos kits en France</div>
              </div>
            </div>
          </div>
          <div className="h-hero-visual">
            <div className="h-visual-card main">
              <img src={(newProducts[2] || newProducts[0])?.img} alt="Kit aquarelle"/>
            </div>
            <div className="h-visual-card b">
              <img src={(newProducts[5] || newProducts[1])?.img} alt="Kit aquarelle"/>
            </div>
            <div className="h-float-card order">
              <div className="icon-circle"><HIcon.Truck /></div>
              <div className="text">
                <span className="strong">Commande livrée</span>
                <span className="meta">Maison Lumière · il y a 2h</span>
              </div>
            </div>
            <div className="h-float-card discount">
              <div className="icon-circle"><HIcon.Tag /></div>
              <div className="text">
                <span className="strong">−10 % atteint !</span>
                <span className="meta">au-delà de 450 € HT</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ LOGOS (bandeau defilant) ============ */}
      <section className="h-logos">
        <div className="h-logos-inner" style={{flexDirection:'column', alignItems:'stretch', gap:18}}>
          <span className="h-logos-label" style={{textAlign:'center'}}>Ils nous font confiance</span>
          <div className="h-logos-marquee">
            <div className="h-logos-track">
              {[...(window.LOGOS || []), ...(window.LOGOS || [])].map((name, i) => (
                <span key={i} className={"h-logo" + (i % 3 === 1 ? " b" : i % 3 === 2 ? " c" : "")}>{name}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ BENEFITS ============ */}
      <section className="h-benefits" id="avantages">
        <div className="h-section-head">
          <div className="eyebrow">— Le portail revendeur</div>
          <h2>Tout ce qu'il faut pour <em>bien commander</em>,<br/>rien de plus.</h2>
          <p>Un espace pensé pour les boutiques : catalogue clair, commandes rapides, suivi automatique. Vous gagnez du temps, on s'occupe du reste.</p>
        </div>
        <div className="h-benefits-grid">
          <div className="h-benefit">
            <div className="h-benefit-num">01</div>
            <div className="h-benefit-content">
              <div className="h-benefit-icon"><HIcon.Tag /></div>
              <h3>Tarif pro &<br/>paliers automatiques</h3>
              <p>Vos prix HT, le suivi en direct des paliers, la remise printemps qui s'applique toute seule.</p>
              <ul>
                <li>Minimum 100 € HT</li>
                <li>Franco de port dès 200 € HT</li>
                <li>−10 % automatique dès 450 € HT</li>
              </ul>
            </div>
          </div>

          <div className="h-benefit featured">
            <div className="h-benefit-num">02</div>
            <div className="h-benefit-content">
              <div className="h-benefit-icon"><HIcon.Sparkle /></div>
              <h3>Bon de commande<br/><em>en quelques clics</em></h3>
              <p>Un parcours pensé pour les revendeur·euses pressé·es : panier brouillon, recommander en 1 clic, export PDF, sauvegarde auto.</p>
              <ul>
                <li>Recommander votre dernière commande</li>
                <li>Brouillon sauvegardé automatiquement</li>
                <li>Suivi de livraison en temps réel</li>
              </ul>
            </div>
          </div>

          <div className="h-benefit">
            <div className="h-benefit-num">03</div>
            <div className="h-benefit-content">
              <div className="h-benefit-icon"><HIcon.Brush /></div>
              <h3>Nouveautés<br/>chaque saison</h3>
              <p>4 collections par an, dévoilées en avant-première à nos revendeurs. Vos clients voient les nouveautés chez vous en premier.</p>
              <ul>
                <li>{newProducts.length} nouveautés Printemps 2026</li>
                <li>Catalogue PDF téléchargeable</li>
                <li>Visuels HD pour vos réseaux</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ============ NUMBERS ============ */}
      <section className="h-numbers">
        <div className="h-numbers-inner">
          <div>
            <h2>Une marque qui <em>vit</em><br/>en boutique.</h2>
            <p className="sub">Émotions Créatives, ce sont 12 ans de fabrication artisanale et près de 600 points de vente partout en France et en Europe.</p>
          </div>
          <div className="h-numbers-grid">
            <div className="h-num-item">
              <div className="h-num-value"><em>+300</em></div>
              <div className="h-num-label">Revendeurs en France</div>
            </div>
            <div className="h-num-item">
              <div className="h-num-value"><em>+100</em></div>
              <div className="h-num-label">Modèles disponibles</div>
            </div>
            <div className="h-num-item">
              <div className="h-num-value"><em>Forte</em></div>
              <div className="h-num-label">Valeur cadeau · achat d'impulsion</div>
            </div>
            <div className="h-num-item">
              <div className="h-num-value">100<span className="unit">%</span></div>
              <div className="h-num-label">Fabriqué à la main · atelier de Limoges</div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ HOW IT WORKS ============ */}
      <section className="h-how" id="comment">
        <div className="h-section-head">
          <div className="eyebrow">— Comment ça marche</div>
          <h2>Devenir revendeur,<br/><em>en trois temps</em>.</h2>
          <p>Un parcours simple, validé sous 48h. Une fois votre compte ouvert, vous accédez à tout le portail pro.</p>
        </div>
        <div className="h-how-grid">
          <div className="h-how-step">
            <div className="h-how-num">1</div>
            <h3>Vous vous inscrivez</h3>
            <p>Quelques infos sur votre boutique, votre SIRET ou n° d'auto-entrepreneur. C'est gratuit, sans engagement.</p>
          </div>
          <div className="h-how-step">
            <div className="h-how-num">2</div>
            <h3>On valide votre dossier</h3>
            <p>Notre équipe revend·eur·euse vérifie sous 48h ouvrées et vous envoie vos accès personnalisés par email.</p>
          </div>
          <div className="h-how-step">
            <div className="h-how-num">3</div>
            <h3>Vous commandez</h3>
            <p>Catalogue complet, tarifs HT, suivi des paliers, recommander en 1 clic. Vos kits sous 5-7 jours en boutique.</p>
          </div>
        </div>
      </section>

      {/* ============ NOUVEAUTES PREVIEW ============ */}
      <section className="h-news" id="nouveautes">
        <div className="h-news-inner">
          <div className="h-news-head">
            <div>
              <div className="eyebrow" style={{fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--terracotta)', fontWeight:600, marginBottom:14}}>— Collection Printemps 2026</div>
              <h2>{newProducts.length} nouveauté{newProducts.length > 1 ? 's' : ''}<br/><em>fraîchement</em> sorties d'atelier.</h2>
              <p>Aquarelles botaniques, broderies messages, oiseaux et paysages — il y a de quoi composer une vitrine entière.</p>
            </div>
            <a className="link" href={(window.EXTRANET_CONFIG?.nouveautes_url) || "#"}>Découvrir la collection <HIcon.Arrow /></a>
          </div>

          <div className="h-news-grid">
            {featured && (
              <a className="h-news-card featured" href={(window.EXTRANET_CONFIG?.nouveautes_url) || "#"}>
                <div className="media">
                  <span className="badge">Coup de cœur</span>
                  <img src={featured.img} alt={featured.name}/>
                </div>
                <div className="body">
                  <h3>{featured.name.replace(/^Kit Aquarelle Artisanale "(.+)"$/, "Kit Aquarelle « $1 »")}</h3>
                  <p className="desc">
                    Le best-seller anticipé de la collection : une scène d'évasion à peindre soi-même. Notre kit le plus partagé dans les boutiques pilotes.
                  </p>
                  <div className="meta">
                    {isLogged ? (
                      <div className="price">{fmt(featured.price)} <small style={{color:'var(--ink-3)', fontSize:11, fontFamily:'Manrope'}}>HT · par 3</small></div>
                    ) : (
                      <div className="price" style={{fontSize:13, color:'var(--ink-3)', fontFamily:'Manrope'}}>Tarif pro réservé aux revendeurs</div>
                    )}
                    <div className="arrow"><HIcon.Arrow /></div>
                  </div>
                </div>
              </a>
            )}
            {otherNews.map(p => (
              <a className="h-news-card" key={p.ref} href={(window.EXTRANET_CONFIG?.nouveautes_url) || "#"}>
                <div className="media">
                  <span className="badge">Nouveau</span>
                  <img src={p.img} alt={p.name}/>
                </div>
                <div className="body">
                  <div className="ref">{p.ref}</div>
                  <h4>{p.name.replace(/^Kit Aquarelle Artisanale "(.+)"$/, "$1").replace(/^Kit de broderie décorative - /, "")}</h4>
                  {isLogged ? (
                    <div className="price-row">
                      {fmt(p.price)}
                      <small>par 3</small>
                    </div>
                  ) : (
                    <div className="price-row" style={{fontSize:11, color:'var(--ink-3)'}}>Tarif pro réservé</div>
                  )}
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ============ TESTIMONIALS ============ */}
      <section className="h-quotes">
        <div className="h-section-head">
          <div className="eyebrow">— Ils en parlent</div>
          <h2>Le retour des boutiques<br/>qui nous <em>revendent</em>.</h2>
        </div>
        <div className="h-quotes-grid">
          {TESTIMONIALS.map((t, i) => (
            <div className="h-quote-card" key={i}>
              <div className="quote-mark">"</div>
              <blockquote>{t.quote}</blockquote>
              <div className="stars">{"★".repeat(t.stars)}</div>
              <div className="h-quote-author">
                <div className="av">{t.initial}</div>
                <div className="info">
                  <div className="name">{t.author}</div>
                  <div className="place">{t.place}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ SIGNUP / LOGIN ============ */}
      <section className="h-signup" id="auth">
        <div className="h-signup-inner">
          <div className="h-signup-text">
            <div className="eyebrow">— Ouvrir un compte revendeur</div>
            <h2>Rejoignez la <em>famille</em><br/>des French Kits.</h2>
            <p>Un compte revendeur gratuit, validé sous 48h ouvrées. Pas d'engagement, pas de minimum annuel — vous commandez quand vous voulez.</p>
            <ul className="checks">
              <li>Tarifs HT pro & paliers automatiques</li>
              <li>Accès à toutes les nouveautés saisonnières en avant-première</li>
              <li>Catalogue PDF, visuels HD & PLV gratuits dès 300 €</li>
              <li>Suivi de livraison, factures & historique en ligne</li>
              <li>Une équipe joignable du lundi au vendredi</li>
            </ul>
          </div>

          <div className="h-signup-card">
            <div className="tabs">
              <button className={"tab" + (authTab === "signup" ? " active" : "")} onClick={() => setAuthTab("signup")}>Devenir revendeur</button>
              <button className={"tab" + (authTab === "login" ? " active" : "")} onClick={() => setAuthTab("login")}>Se connecter</button>
            </div>

            {authTab === "signup" ? (
              <>
                <h3>Créez votre <em>compte pro</em></h3>
                <p className="sub">Validation sous 48h ouvrées · gratuit · sans engagement</p>
                <form method="POST" action={(window.EXTRANET_CONFIG?.base_url || "") + "/inscription"}>
                  <div className="row-2">
                    <div className="field">
                      <label>Prénom</label>
                      <input type="text" name="prenom" placeholder="Camille"/>
                    </div>
                    <div className="field">
                      <label>Nom *</label>
                      <input type="text" name="nom" required placeholder="Bertin"/>
                    </div>
                  </div>
                  <div className="field">
                    <label>Nom de votre boutique *</label>
                    <input type="text" name="raison_sociale" required placeholder="Maison Lumière"/>
                  </div>
                  <div className="field">
                    <label>Email pro *</label>
                    <input type="email" name="email" required placeholder="camille@maboutique.fr"/>
                  </div>
                  <div className="row-2">
                    <div className="field">
                      <label>SIRET</label>
                      <input type="text" name="siret" placeholder="824 716 503 00018"/>
                    </div>
                    <div className="field">
                      <label>Téléphone</label>
                      <input type="tel" name="telephone" placeholder="06 14 22 78 03"/>
                    </div>
                  </div>
                  <button type="submit" className="submit">Demander l'ouverture du compte <HIcon.Arrow /></button>
                  <p className="legal">
                    En vous inscrivant, vous acceptez nos <a href="/cgv">CGV</a> et notre <a href="/confidentialite">politique de confidentialité</a>. Nous ne partageons jamais vos données.
                  </p>
                </form>
              </>
            ) : (
              <>
                <h3>Bon retour parmi <em>nous</em></h3>
                <p className="sub">Connectez-vous à votre espace revendeur</p>
                <form method="POST" action={(window.EXTRANET_CONFIG?.base_url || "") + "/connexion"}>
                  <div className="field">
                    <label>Email pro</label>
                    <input type="email" name="email" required placeholder="camille@maboutique.fr"/>
                  </div>
                  <div className="field">
                    <label>Mot de passe</label>
                    <input type="password" name="password" required placeholder="••••••••••"/>
                  </div>
                  <a className="h-forgot" href={(window.EXTRANET_CONFIG?.base_url || "") + "/mot-de-passe-oublie"}>Mot de passe oublié ?</a>
                  <button type="submit" className="submit">Se connecter <HIcon.Arrow /></button>
                  <p className="legal">
                    Pas encore inscrit·e ? <a href="#" onClick={(e) => { e.preventDefault(); setAuthTab("signup"); }}>Demander un accès pro</a>.
                  </p>
                </form>
              </>
            )}
          </div>
        </div>
      </section>

      {/* ============ FAQ ============ */}
      <section className="h-faq" id="faq">
        <div className="h-section-head">
          <div className="eyebrow">— Questions fréquentes</div>
          <h2>Tout ce qu'on nous<br/><em>demande</em> souvent.</h2>
        </div>
        <div className="h-faq-list">
          {FAQS.map((f, i) => (
            <div className={"h-faq-item" + (openFaq === i ? " open" : "")} key={i}>
              <div className="h-faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="h-faq-toggle">+</span>
              </div>
              <div className="h-faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ FINAL CTA ============ */}
      <section className="h-final">
        <div className="h-final-card">
          <div className="h-final-card-inner">
            <h2>Prêt·e à vendre<br/>de l'<em>artisanat français</em> ?</h2>
            <p>Ouvrez votre compte revendeur en 5 minutes. On vous tient au courant des prochaines collections, des dates de salons, et de nos coups de cœur.</p>
            <div className="actions">
              <a className="h-btn primary" href="#auth" onClick={() => setAuthTab("signup")}>Devenir revendeur <HIcon.Arrow /></a>
              <a className="h-btn secondary" href="#auth" onClick={() => setAuthTab("signup")}>Télécharger le catalogue PDF</a>
            </div>
          </div>
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer className="h-footer">
        <div className="h-footer-inner">
          <div className="h-footer-brand">
            <h3>Émotions <em>Créatives</em></h3>
            <div className="tag">PRO · Les French Kits</div>
            <p>French Kits, la marque de kits / cadeaux créatifs d'Émotions Créatives. Fabrication à la main dans notre atelier artisanal.</p>
          </div>
          <div className="h-footer-col">
            <h4>Espace pro</h4>
            <ul>
              <li><a href={isLogged ? ((window.EXTRANET_CONFIG?.commander_url) || "#") : "#auth"} onClick={!isLogged ? () => setAuthTab("signup") : undefined}>Bon de commande</a></li>
              <li><a href={(window.EXTRANET_CONFIG?.nouveautes_url) || "#"}>Nouveautés</a></li>
              <li><a href={isLogged ? ((window.EXTRANET_CONFIG?.mes_commandes_url) || "#") : "#auth"} onClick={!isLogged ? () => setAuthTab("signup") : undefined}>Mes commandes</a></li>
              <li><a href={isLogged ? "#" : "#auth"} onClick={!isLogged ? () => setAuthTab("signup") : undefined}>Catalogue PDF</a></li>
            </ul>
          </div>
          <div className="h-footer-col">
            <h4>À propos</h4>
            <ul>
              <li><a href="#">Notre histoire</a></li>
              <li><a href="#">L'atelier</a></li>
              <li><a href="#">Nos illustratrices</a></li>
              <li><a href="#">Salons & événements</a></li>
            </ul>
          </div>
          <div className="h-footer-col">
            <h4>Aide</h4>
            <ul>
              <li><a href="mailto:fabien@emotions-creatives.com">fabien@emotions-creatives.com</a></li>
              <li><a href="tel:+33643971571">06 43 97 15 71</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="/cgv">CGV</a></li>
            </ul>
          </div>
        </div>
        <div className="h-footer-bottom">
          <div>© 2026 Émotions Créatives · 4 rue des Émailleurs, 87000 Limoges · SIRET 824 716 503</div>
          <div style={{display:'flex', gap:20}}>
            <a href="/mentions-legales" style={{color:'inherit', textDecoration:'none'}}>Mentions légales</a>
            <a href="/confidentialite" style={{color:'inherit', textDecoration:'none'}}>Confidentialité</a>
            <a href="/cookies" style={{color:'inherit', textDecoration:'none'}}>Cookies</a>
          </div>
        </div>
      </footer>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomePage/>);