// Stats bar + Features doubles (clients/marchands) + Étapes

function StatsBar() {
  return (
    <section style={{ borderBottom: '1px solid var(--border)', background: 'var(--bg)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', padding: '32px 0' }}>
        {[
          ['87%', 'des Français préfèrent acheter local'],
          ['3.2×', 'plus de ventes en passant en ligne'],
          ['12 min', 'pour ouvrir une boutique'],
          ['0%', 'commission sur le plan Pro'],
        ].map((s, i) => (
          <div key={i} style={{
            padding: '0 32px',
            borderRight: i < 3 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--ink)' }}>
              {s[0]}
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 8, maxWidth: 200 }}>
              {s[1]}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FeatureRow({ icon, title, desc }) {
  return (
    <div style={{ display: 'flex', gap: 14, padding: '16px 0', borderBottom: '1px dashed var(--border-strong)' }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        border: '1px solid var(--border-strong)',
        background: 'var(--bg-elev)',
        display: 'grid', placeItems: 'center',
        flexShrink: 0,
        color: 'var(--ink-2)',
      }}>{icon}</div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 15 }}>{title}</div>
        <div className="body-md" style={{ marginTop: 2, fontSize: 13 }}>{desc}</div>
      </div>
    </div>
  );
}

function Features() {
  const { Icon } = window;
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          {/* CLIENTS */}
          <div>
            <span className="eyebrow accent">Pour les client·e·s</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>
              Une expérience d'achat <span className="serif-italic">réinventée</span>.
            </h2>
            <p className="body-md" style={{ marginTop: 14, maxWidth: 380 }}>
              Trouvez, commandez et suivez vos achats locaux depuis une seule interface.
            </p>
            <div style={{ marginTop: 22 }}>
              <FeatureRow icon={<Icon.Search />} title="Recherche intelligente" desc="Par mot-clé, ville ou catégorie en temps réel." />
              <FeatureRow icon={<Icon.Cart />} title="Panier multi-boutiques" desc="Plusieurs commerçants en une commande, un paiement." />
              <FeatureRow icon={<Icon.Heart />} title="Wishlist & alertes prix" desc="Sauvegardez vos favoris, soyez prévenu·e en cas de baisse." />
              <FeatureRow icon={<Icon.Package />} title="Suivi temps réel" desc="De la préparation à la livraison, sans appel ni mail." />
              <FeatureRow icon={<Icon.Star />} title="Avis vérifiés" desc="Uniquement de vrais acheteurs. Aucune complaisance." />
            </div>
          </div>

          {/* MARCHANDS */}
          <div>
            <span className="eyebrow accent">Pour les commerçant·e·s</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>
              Vos outils, <span className="serif-italic">tous en un</span>.
            </h2>
            <p className="body-md" style={{ marginTop: 14, maxWidth: 380 }}>
              Un back-office pensé pour les artisans, pas pour les développeurs.
            </p>
            <div style={{ marginTop: 22 }}>
              <FeatureRow icon={<Icon.Store />} title="Profil boutique complet" desc="Logo, bannière, horaires, sous-domaine personnalisé." />
              <FeatureRow icon={<Icon.Box />} title="Catalogue illimité" desc="Photos multiples, variantes, prix barré, stock & alertes." />
              <FeatureRow icon={<Icon.Chart />} title="Statistiques temps réel" desc="CA, top produits, conversion, évolution par semaine." />
              <FeatureRow icon={<Icon.Tag />} title="Codes promo & flash" desc="Réductions en %, en €, limitées dans le temps ou stock." />
              <FeatureRow icon={<Icon.Bell />} title="Notifs multi-canaux" desc="Email + push pour commandes, stocks, avis et versements." />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Steps() {
  return (
    <section className="section-tight" style={{ background: 'var(--bg-sunken)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <span className="eyebrow">Simple comme bonjour</span>
            <h2 className="h-section" style={{ marginTop: 12, maxWidth: 520 }}>
              Opérationnel<br/>en <span className="serif-italic">4 étapes</span>.
            </h2>
          </div>
          <p className="body-md" style={{ maxWidth: 360 }}>
            Pas besoin de développeur, pas de configuration complexe. Juste votre boutique, en ligne.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            ['01', 'Créez votre compte', 'Inscription gratuite en 2 minutes. Choisissez votre plan, configurez votre profil.'],
            ['02', 'Ajoutez vos produits', 'Photos, descriptions, prix, variantes et stock en quelques clics.'],
            ['03', 'Configurez la livraison', 'Zones, tarifs, seuils gratuits. Click & Collect en un toggle.'],
            ['04', 'Vendez & encaissez', 'Stripe Connect verse automatiquement chaque semaine sur votre compte.'],
          ].map((s, i) => (
            <div key={i} className="card" style={{ padding: 22 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em' }}>
                ÉTAPE {s[0]}
              </div>
              <div className="h-card" style={{ marginTop: 12 }}>{s[1]}</div>
              <p className="body-md" style={{ marginTop: 8, fontSize: 13 }}>{s[2]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StatsBar, Features, Steps });