// Payment + Pricing + Testimonials + CTA + Footer

function Payment() {
  const { Icon } = window;
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'flex-start' }}>
          <div style={{ position: 'sticky', top: 88 }}>
            <span className="eyebrow accent">Paiement & finances</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>
              Encaissez en toute <span className="serif-italic">sérénité</span>.
            </h2>
            <p className="body-md" style={{ marginTop: 14 }}>
              Stripe Connect intégré, paiements 3DS2, factures PDF auto. Vous vendez, on s'occupe du reste.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 22, flexWrap: 'wrap' }}>
              {['Visa', 'Mastercard', 'Amex', 'Apple Pay', 'Google Pay', 'SEPA'].map((p) => (
                <span key={p} className="chip" style={{ height: 30, padding: '0 12px', fontSize: 12 }}>{p}</span>
              ))}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {[
              { icon: <Icon.Bolt />, t: 'Versement automatique', d: 'Chaque semaine, Stripe vire directement sur votre compte. Commission déduite à la source.', accent: true },
              { icon: <Icon.Store />, t: 'Paiement direct', d: 'Vous préférez encaisser sur place ? Possible. La commande reste tracée, l\'argent vous arrive direct.' },
              { icon: <Icon.File />, t: 'Annulation 100% libre', d: 'Vous fixez vos conditions de remboursement. Affichées clairement sur votre boutique.' },
              { icon: <Icon.Lock />, t: 'Sécurité 3DS2', d: 'Authentification forte sur toutes les transactions en ligne. Zéro fraude.' },
              { icon: <Icon.File />, t: 'Factures PDF auto', d: 'Une facture par commande, conformité comptable garantie, export en un clic.' },
              { icon: <Icon.Shield />, t: 'KYC intégré', d: 'Vérification d\'identité Stripe directement dans l\'onboarding. RGPD & EU.' },
            ].map((f, i) => (
              <div key={i} className="card" style={{ padding: 20, background: f.accent ? 'var(--accent-soft)' : 'var(--bg-elev)', borderColor: f.accent ? 'var(--accent-line)' : 'var(--border)' }}>
                <div style={{ width: 32, height: 32, borderRadius: 7, background: 'var(--bg)', border: '1px solid var(--border)', display: 'grid', placeItems: 'center', color: f.accent ? 'var(--accent)' : 'var(--ink-2)' }}>{f.icon}</div>
                <div className="h-card" style={{ marginTop: 14, fontSize: 17 }}>{f.t}</div>
                <p className="body-md" style={{ marginTop: 6, fontSize: 13 }}>{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { Icon } = window;
  const plans = [
    { name: 'Starter', price: '0€', sub: '/mois · pour toujours', com: '5%', features: ['20 produits', 'Paiement Stripe', 'Gestion commandes', 'Factures PDF auto'], cta: 'Commencer', primary: false },
    { name: 'Pro', price: '29€', sub: '/mois HT · sans engagement', com: '0%', features: ['Produits illimités', 'Variantes produits', 'Codes promo & flash', 'Sous-domaine personnalisé', 'Click & Collect', 'Stats avancées'], cta: 'Démarrer en Pro', primary: true, badge: 'Populaire' },
    { name: 'Business', price: '79€', sub: '/mois HT · sans engagement', com: '0%', features: ['Tout le plan Pro', '5 collaborateurs', 'API REST complète', 'Colissimo & Mondial Relay', 'Export comptable CSV', 'Manager dédié'], cta: 'Choisir Business', primary: false },
    { name: 'Entreprise', price: 'Sur devis', sub: 'Tarification personnalisée', com: '0%', features: ['Hébergement dédié', 'White label complet', 'Domaine personnalisé', 'Comptes illimités', 'Support 24/7/365'], cta: 'Nous contacter', primary: false },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-sunken)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="eyebrow accent">Tarifs transparents</span>
          <h2 className="h-section" style={{ marginTop: 12 }}>
            Choisissez votre <span className="serif-italic">formule</span>.
          </h2>
          <p className="body-md" style={{ marginTop: 12, maxWidth: 480, margin: '12px auto 0' }}>
            Commencez gratuitement, évoluez sans contrainte. Aucun engagement, aucune surprise.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {plans.map((p) => (
            <div key={p.name} className="card" style={{
              padding: 24,
              background: p.primary ? 'var(--bg-dark)' : 'var(--bg-elev)',
              color: p.primary ? 'var(--ink-on-dark)' : 'var(--ink)',
              borderColor: p.primary ? 'transparent' : 'var(--border)',
              boxShadow: p.primary ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
              position: 'relative',
              transform: p.primary ? 'translateY(-8px)' : 'none',
            }}>
              {p.badge && (
                <div style={{
                  position: 'absolute', top: -12, left: 24,
                  padding: '4px 12px', borderRadius: 999,
                  background: 'var(--accent)', color: 'white',
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
                }}>★ {p.badge}</div>
              )}
              <div style={{ fontWeight: 600, fontSize: 14, color: p.primary ? 'var(--ink-on-dark-2)' : 'var(--ink-3)' }}>{p.name}</div>
              <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1 }}>{p.price}</span>
              </div>
              <div style={{ fontSize: 12, color: p.primary ? 'var(--ink-on-dark-3)' : 'var(--ink-3)', marginTop: 4 }}>{p.sub}</div>

              <div style={{
                marginTop: 16, padding: '8px 12px',
                borderRadius: 8,
                background: p.primary ? 'rgba(255,255,255,0.06)' : 'var(--accent-soft)',
                color: p.primary ? 'var(--ink-on-dark)' : 'var(--accent)',
                fontSize: 12, fontWeight: 600,
                display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Commission</span><span>{p.com}</span>
              </div>

              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {p.features.map((f, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13 }}>
                    <span style={{ color: 'var(--accent)', marginTop: 2 }}><Icon.Check /></span>
                    <span style={{ color: p.primary ? 'var(--ink-on-dark-2)' : 'var(--ink-2)' }}>{f}</span>
                  </div>
                ))}
              </div>

              <a className={`btn ${p.primary ? 'btn-on-dark-primary' : 'btn-ghost'}`} style={{ width: '100%', marginTop: 22 }}>{p.cta}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { quote: "En moins d'une semaine, ma boulangerie avait sa boutique et je recevais déjà des commandes. C'est bluffant de simplicité.", name: 'Marc Fabre', shop: 'Boulangerie Fabre · Aix', plan: 'Pro', emoji: '🥖' },
    { quote: "Le dashboard est vraiment bien pensé. Je gère mes stocks et commandes depuis mon téléphone entre deux clients.", name: 'Sophie Durant', shop: 'Fleurs de Camille · Marseille', plan: 'Pro', emoji: '🌸' },
    { quote: "La commission à 0% sur le plan Pro, c'est ce qui m'a convaincu. Je garde tout. Le retour sur investissement est immédiat.", name: 'Pierre Arnaud', shop: 'Cave des Vignerons · Avignon', plan: 'Business', emoji: '🍷' },
    { quote: "Le Click & Collect a changé mon quotidien. Les clients commandent le matin, ils récupèrent le soir. Mon CA a augmenté de 30%.", name: 'Jean-Pierre Morel', shop: 'Boucherie du Marché · Lyon', plan: 'Pro', emoji: '🥩' },
    { quote: "J'ai 68 ans, peu à l'aise avec la technologie. Mais l'interface est tellement simple que j'ai tout configuré seule en une après-midi.", name: 'Élise Bernard', shop: 'Fromagerie Bernard · Dijon', plan: 'Starter', emoji: '🧀' },
    { quote: "Les notifications en temps réel et les versements hebdomadaires automatiques m'ont complètement changé la vie.", name: 'Camille Roux', shop: 'Herboristerie · Montpellier', plan: 'Pro', emoji: '🌿' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="eyebrow">Ils nous font confiance</span>
          <h2 className="h-section" style={{ marginTop: 12 }}>
            Ce que disent <span className="serif-italic">nos marchands</span>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((t, i) => (
            <div key={i} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column' }}>
              <div style={{ color: 'var(--accent)', fontSize: 14 }}>★★★★★</div>
              <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.5, color: 'var(--ink)', flex: 1 }}>« {t.quote} »</p>
              <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--bg-sunken)', overflow: 'hidden', flexShrink: 0 }}><window.Photo name={t.name} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{t.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{t.shop}</div>
                </div>
                <span className="chip" style={{ height: 22, fontSize: 10, padding: '0 8px' }}>{t.plan}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const { Icon } = window;
  return (
    <section style={{ borderTop: '1px solid var(--border)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div style={{ padding: '80px 8vw 80px 8vw', textAlign: 'center' }}>
          <span className="eyebrow">Vous achetez ?</span>
          <h3 className="h-section" style={{ marginTop: 12, fontSize: 'clamp(28px, 3vw, 40px)' }}>
            Soutenez votre <span className="serif-italic">quartier</span>.
          </h3>
          <p className="body-md" style={{ marginTop: 12 }}>
            Découvrez les boutiques près de chez vous.
          </p>
          <a className="btn btn-lg btn-ghost" style={{ marginTop: 22 }}>Explorer les boutiques <Icon.Arrow /></a>
        </div>
        <div style={{ padding: '80px 8vw 80px 8vw', textAlign: 'center', background: 'var(--bg-dark)', color: 'var(--ink-on-dark)' }}>
          <span className="eyebrow" style={{ color: 'var(--ink-on-dark-3)' }}>Vous vendez ?</span>
          <h3 className="h-section" style={{ marginTop: 12, color: 'var(--ink-on-dark)', fontSize: 'clamp(28px, 3vw, 40px)' }}>
            Votre boutique en <span className="serif-italic" style={{ color: 'var(--accent)' }}>12 minutes</span>.
          </h3>
          <p className="body-md" style={{ marginTop: 12, color: 'var(--ink-on-dark-2)' }}>
            Plus de 1 200 commerçants l'ont déjà fait. Sans CB, sans engagement.
          </p>
          <a className="btn btn-lg btn-accent" style={{ marginTop: 22 }}>Ouvrir ma boutique <Icon.Arrow /></a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { Icon } = window;
  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: '56px 0 32px', background: 'var(--bg)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon.Logo />
              <span style={{ fontWeight: 600, fontSize: 16 }}>MesMarChands</span>
            </div>
            <p className="body-md" style={{ marginTop: 14, fontSize: 13, maxWidth: 280 }}>
              La marketplace qui connecte les petits commerçants indépendants à leurs clients. Le marché du coin, partout avec vous.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              {['𝕏', 'in', 'f', '◉'].map((s, i) => (
                <span key={i} style={{ width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--border-strong)', display: 'grid', placeItems: 'center', fontSize: 12 }}>{s}</span>
              ))}
            </div>
          </div>
          {[
            ['Plateforme', ['Boutiques', 'Catégories', 'Produits populaires', 'Nouveautés', 'Vedettes']],
            ['Commerçants', ['Ouvrir ma boutique', 'Tarifs', 'Guide démarrage', 'API', 'Support']],
            ['Entreprise', ['À propos', 'Blog', 'Presse', 'Carrières', 'Contact']],
          ].map(([t, links]) => (
            <div key={t}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {links.map((l) => <a key={l} style={{ fontSize: 13, color: 'var(--ink-2)' }}>{l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-3)' }}>
          <span>© 2025 MesMarChands.com — Tous droits réservés</span>
          <div style={{ display: 'flex', gap: 18 }}>
            {['CGV', 'Confidentialité', 'Mentions légales', 'Cookies'].map((l) => <a key={l}>{l}</a>)}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Payment, Pricing, Testimonials, FinalCTA, Footer });