// Pricing (2 cards: Essai gratuit + Achat unique 39,99 €) + Footer (5 cols).

function CheckIcon({ color = 'var(--navy)' }) {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0, marginTop: 4 }}>
      <path d="M2 7.5 L5.5 11 L12 3.5" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Pricing() {
  return (
    <section id="pricing" style={{
      padding: 'clamp(80px, 10vw, 130px) 0',
      background: 'var(--paper)',
      borderTop: '1px solid var(--ink-line-soft)',
    }}>
      <div className="container">
        <div style={{
          textAlign: 'center',
          maxWidth: 640,
          margin: '0 auto 60px',
        }}>
          <div className="reveal">
            <span className="eyebrow"><span className="dot" />Tarifs</span>
          </div>
          <h2 className="h-section reveal delay-1" style={{ margin: '20px 0 18px' }}>
            Un prix. <em>Une fois.</em>
          </h2>
          <p className="body-lead reveal delay-2" style={{ margin: 0 }}>
            Pas d'abonnement, pas de palier, pas de version pro déguisée.
            Vous achetez, c'est à vous.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 'clamp(20px, 3vw, 32px)',
          maxWidth: 920,
          margin: '0 auto',
        }} className="pricing-grid">
          {/* Free trial card */}
          <div className="reveal" style={{
            background: 'var(--paper)',
            border: '1.5px solid var(--ink-line)',
            borderRadius: 'var(--radius-card-lg)',
            padding: 'clamp(28px, 4vw, 40px)',
            display: 'flex',
            flexDirection: 'column',
          }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>
              <span className="dot" />Essayer
            </div>
            <h3 style={{
              fontFamily: 'var(--serif)',
              fontSize: 28,
              fontWeight: 400,
              letterSpacing: '-0.02em',
              margin: '0 0 8px',
            }}>Essai gratuit</h3>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
              <span style={{
                fontFamily: 'var(--serif)',
                fontSize: 56,
                letterSpacing: '-0.03em',
                fontWeight: 400,
                lineHeight: 1,
                color: 'var(--ink)',
              }}>0 €</span>
              <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>50 opérations</span>
            </div>
            <p className="body-md" style={{ margin: '0 0 28px' }}>
              Pour vérifier que BudGi vous convient. Aucune carte bancaire.
              Aucun compte. Vos données restent sur votre appareil.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                'Toutes les fonctions de la version complète.',
                'Limite : 50 opérations enregistrées.',
                'Sans création de compte, sans email.',
                'Bascule vers la version complète sans perte de données.',
              ].map((b, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--ink-2)' }}>
                  <CheckIcon /> <span>{b}</span>
                </li>
              ))}
            </ul>

            <a href="https://essai.budg-i.app" className="btn btn-ghost btn-lg" style={{ marginTop: 'auto' }}>
              Lancer l'essai →
            </a>
          </div>

          {/* Paid card — ink */}
          <div className="reveal delay-1" style={{
            background: 'var(--ink)',
            color: 'var(--paper)',
            border: '1.5px solid var(--ink)',
            borderRadius: 'var(--radius-card-lg)',
            padding: 'clamp(28px, 4vw, 40px)',
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
            boxShadow: '0 30px 60px -25px rgba(20,30,60,0.4)',
          }}>
            <div style={{
              position: 'absolute',
              top: 18, right: 18,
              padding: '6px 12px',
              borderRadius: 'var(--radius-pill)',
              background: 'var(--amber)',
              color: 'white',
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: '0.08em',
              textTransform: 'uppercase',
            }}>Recommandé</div>

            <div className="eyebrow" style={{ marginBottom: 18, color: 'rgba(250,250,247,0.7)' }}>
              <span className="dot" style={{ background: 'currentColor' }} />Acheter
            </div>
            <h3 style={{
              fontFamily: 'var(--serif)',
              fontSize: 28,
              fontWeight: 400,
              letterSpacing: '-0.02em',
              margin: '0 0 8px',
              color: 'var(--paper)',
            }}>Achat unique</h3>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
              <span style={{
                fontFamily: 'var(--serif)',
                fontSize: 56,
                letterSpacing: '-0.03em',
                fontWeight: 400,
                lineHeight: 1,
                color: 'var(--paper)',
              }}>39,99 €</span>
              <span style={{ fontSize: 14, color: 'rgba(250,250,247,0.55)' }}>TTC · à vie</span>
            </div>
            <p style={{
              fontSize: 15,
              lineHeight: 1.6,
              color: 'rgba(250,250,247,0.75)',
              margin: '0 0 28px',
            }}>
              Une fois, et c'est plié. Toutes les mises à jour de la version
              majeure incluses. Pas de re-paiement annuel.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                'Opérations, comptes et budgets illimités.',
                'Synchro NAS Synology / QNAP / TrueNAS.',
                'Import CSV multi-banques + iCompta 6.',
                'Mises à jour de la version 1.x incluses.',
                'Support prioritaire.',
              ].map((b, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'rgba(250,250,247,0.85)' }}>
                  <CheckIcon color="#7aa3ff" /> <span>{b}</span>
                </li>
              ))}
            </ul>

            <a
              href="#"
              onClick={e => e.preventDefault()}
              className="btn btn-lg"
              style={{
                marginTop: 'auto',
                background: 'rgba(250,250,247,0.15)',
                color: 'rgba(250,250,247,0.45)',
                borderColor: 'rgba(250,250,247,0.15)',
                fontWeight: 600,
                fontSize: 15.5,
                justifyContent: 'center',
                letterSpacing: '-0.01em',
                cursor: 'not-allowed',
                boxShadow: 'none',
              }}
            >
              Disponible très prochainement
            </a>

            <p style={{
              textAlign: 'center',
              fontSize: 12,
              color: 'rgba(250,250,247,0.5)',
              margin: '16px 0 0',
              letterSpacing: '0.04em',
            }}>
              Garantie 14 jours · sans question · remboursement intégral
            </p>

            <div style={{
              marginTop: 24,
              paddingTop: 20,
              borderTop: '1px solid rgba(250,250,247,0.1)',
              textAlign: 'center',
            }}>
              <p style={{
                fontSize: 12.5,
                color: 'rgba(250,250,247,0.45)',
                lineHeight: 1.6,
                margin: 0,
              }}>
                Pas de DRM. Pas de clé de licence. Pas de vérification réseau.{' '}
                BudGi vous fait confiance — si le produit vous convient, vous payez.
              </p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .pricing-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Footer() {
  const cols = [
    {
      h: 'Produit',
      links: [
        { label: 'Anticipation & projection', href: '#anticipation' },
        { label: 'Synchro NAS Synology / QNAP', href: '#faq' },
        { label: 'Import CSV multi-banques', href: '#anticipation' },
        { label: 'Utilisation hors-ligne', href: '#faq' },
        { label: 'Migration depuis iCompta 6', href: '#faq' },
      ],
    },
    {
      h: 'Souveraineté',
      links: [
        { label: 'Manifeste : pourquoi local ?', href: '#sovereignty' },
        { label: 'Architecture technique', href: '#faq' },
        { label: 'Politique de données (aucune)', href: '#faq' },
        { label: 'Code auditable', href: '#faq' },
      ],
    },
    {
      h: 'Ressources',
      links: [
        { label: 'Le journal', href: '#blog' },
        { label: 'Guide Synology pas-à-pas', href: '#blog' },
        { label: 'FAQ complète', href: '#faq' },
        { label: 'Statut de l\'application', href: '#' },
      ],
    },
    {
      h: 'Légal',
      links: [
        { label: 'Mentions légales', href: 'mentions-legales.html' },
        { label: 'Conditions générales de vente', href: 'cgv.html' },
        { label: 'Confidentialité & cookies', href: 'confidentialite.html' },
        { label: 'Nous contacter', href: 'contact.html' },
      ],
    },
  ];
  return (
    <footer style={{
      background: 'var(--ink)',
      color: 'rgba(250,250,247,0.7)',
      paddingTop: 'clamp(60px, 8vw, 100px)',
      paddingBottom: 36,
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1fr 1fr 1fr',
          gap: 'clamp(28px, 4vw, 56px)',
          marginBottom: 64,
        }} className="footer-grid">
          {/* Brand col */}
          <div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              marginBottom: 18,
            }}>
              <span style={{
                width: 44, height: 44,
                borderRadius: 10,
                background: '#0e0f12',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                overflow: 'hidden',
                boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)',
                flexShrink: 0,
              }}>
                <img src="assets/budgi-logo.png" alt=""
                  width="44" height="44"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </span>
              <div style={{
                fontFamily: 'var(--serif)',
                fontSize: 26,
                letterSpacing: '-0.025em',
                color: 'var(--paper)',
              }}>
                BudGi<span style={{ color: '#7aa3ff' }}>.</span>
              </div>
            </div>
            <p style={{
              fontSize: 14,
              lineHeight: 1.6,
              maxWidth: 320,
              margin: 0,
              color: 'rgba(250,250,247,0.6)',
            }}>
              Une PWA de gestion budgétaire pensée pour ceux qui préfèrent
              que leurs données restent à la maison. Achat unique 39,99 €,
              sans abonnement, sans compte à créer.
            </p>
            <div style={{ marginTop: 20, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <span style={{
                fontSize: 11,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: 'rgba(250,250,247,0.5)',
                border: '1px solid rgba(250,250,247,0.15)',
                padding: '4px 10px',
                borderRadius: 999,
              }}>Hors-ligne ready</span>
            </div>
          </div>

          {cols.map(c => (
            <div key={c.h}>
              <div style={{
                fontSize: 11,
                fontWeight: 600,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: 'rgba(250,250,247,0.5)',
                marginBottom: 16,
              }}>{c.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map(l => (
                  <li key={l.label}>
                    <a href={l.href} style={{
                      fontSize: 14,
                      color: 'rgba(250,250,247,0.7)',
                      textDecoration: 'none',
                      transition: 'color .15s ease',
                    }}
                    onMouseEnter={e => e.currentTarget.style.color = '#fafaf7'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(250,250,247,0.7)'}
                    >{l.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 24,
          borderTop: '1px solid rgba(250,250,247,0.1)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 16,
          fontSize: 12,
          color: 'rgba(250,250,247,0.4)',
        }}>
          <div>© 2026 BudGi · Pensé en France · Hébergé chez vous.</div>
          <div style={{ display: 'flex', gap: 18 }}>
            <span>Aucun cookie tiers</span>
            <span>Aucun analytics</span>
            <span>Aucun compte requis</span>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; }
          .footer-grid > div:first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 600px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

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