// Méthodologie + Pricing + FAQ + CTA + Footer — responsive

function Method() {
  const { isMobile, isTablet } = useResponsive();
  const steps = [
    {
      n: 1,
      title: 'Cartographie',
      duration: '1 semaine',
      desc: 'On suit vos équipes, on chronomètre les frictions, on hiérarchise par ROI. Vous repartez avec une carte claire, qu\'on travaille ensemble ou pas.',
    },
    {
      n: 2,
      title: 'Pilote',
      duration: '2-3 semaines',
      desc: 'On choisit un chantier à fort impact, on livre une première version en production. Vraie donnée, vrais utilisateurs, vraie mesure.',
    },
    {
      n: 3,
      title: 'Déploiement',
      duration: '3-6 semaines',
      desc: 'On industrialise, on connecte au reste du SI, on met les garde-fous. Observabilité, rollback, monitoring : du sérieux, pas un prototype.',
    },
    {
      n: 4,
      title: 'Transmission',
      duration: 'En continu',
      desc: 'Vos équipes prennent la main. Documentation vivante, ateliers, et un canal dédié pour les questions. L\'autonomie, vraiment.',
    },
  ];

  return (
    <section id="method" className="section section-deep">
      <div className="container">
        <div className="reveal" style={{ marginBottom: isMobile ? 40 : 80, maxWidth: 720 }}>
          <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>Méthode</span>
          <h2 style={{ marginTop: 24 }}>
            Quatre étapes, <span className="serif" style={{ color: 'var(--accent)' }}>zéro effet tunnel</span>.
          </h2>
        </div>

        <div style={{ position: 'relative' }}>
          {/* vertical timeline */}
          <div style={{
            position: 'absolute',
            left: 22,
            top: 0,
            bottom: 0,
            width: 1,
            background: 'linear-gradient(180deg, var(--accent), var(--line) 30%)',
            display: isTablet ? 'none' : 'block',
          }} />
          {steps.map((s, i) => (
            <div key={s.n} className="reveal" style={{
              display: 'grid',
              gridTemplateColumns: isTablet ? '1fr' : '60px 1fr 200px',
              gap: isTablet ? 12 : 32,
              padding: isTablet ? '24px 0' : '32px 0',
              borderBottom: i < steps.length - 1 ? '1px solid var(--line)' : 'none',
              alignItems: isTablet ? 'start' : 'baseline',
            }}>
              <div style={{
                width: 44, height: 44,
                borderRadius: '50%',
                border: '1px solid var(--line-strong)',
                background: 'var(--bg)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontFamily: 'var(--mono)',
                fontSize: 12,
                color: 'var(--accent)',
                position: 'relative',
                zIndex: 2,
                flexShrink: 0,
              }}>
                {String(s.n).padStart(2, '0')}
              </div>
              <div>
                <div style={{
                  display: isTablet ? 'flex' : 'block',
                  justifyContent: 'space-between',
                  alignItems: 'baseline',
                  gap: 12,
                  flexWrap: 'wrap',
                }}>
                  <h3 style={{ fontSize: isMobile ? 26 : 32, marginBottom: 12 }}>{s.title}</h3>
                  {isTablet && (
                    <div style={{
                      fontFamily: 'var(--mono)',
                      fontSize: 11,
                      color: 'var(--text-faint)',
                      textTransform: 'uppercase',
                      letterSpacing: '0.12em',
                    }}>{s.duration}</div>
                  )}
                </div>
                <p style={{ maxWidth: 560, fontSize: isMobile ? 14.5 : 15.5 }}>{s.desc}</p>
              </div>
              {!isTablet && (
                <div style={{
                  fontFamily: 'var(--mono)',
                  fontSize: 11,
                  color: 'var(--text-faint)',
                  textTransform: 'uppercase',
                  letterSpacing: '0.12em',
                  textAlign: 'right',
                }}>{s.duration}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { isMobile, isTablet } = useResponsive();
  const plans = [
    {
      name: 'Audit',
      price: '4 900',
      cadence: 'fixe',
      desc: 'Pour valider un cap avant d\'investir.',
      includes: [
        'Cartographie des processus',
        'Calcul du ROI estimé',
        '3 chantiers prioritaires identifiés',
        'Roadmap actionnable',
        'Restitution + ateliers (2 jours)',
      ],
      cta: 'Réserver l\'audit',
      highlight: false,
    },
    {
      name: 'Build',
      price: 'sur devis',
      cadence: 'forfait',
      desc: 'Conception et déploiement d\'un chantier complet.',
      includes: [
        'Tout l\'Audit, inclus',
        'Agents IA + automatisations',
        'Intégrations à votre SI',
        'Mise en production + monitoring',
        'Transmission et formation équipes',
      ],
      cta: 'Démarrer un projet',
      highlight: true,
    },
    {
      name: 'Partner',
      price: 'à partir de 3 500',
      cadence: '/ mois',
      desc: 'Évolution continue, support et nouveaux chantiers.',
      includes: [
        'Roadmap trimestrielle',
        'Support prioritaire (SLA 4h)',
        'Nouveaux agents & automatisations',
        'Veille IA pour vos équipes',
        'Canal Slack dédié',
      ],
      cta: 'Devenir partenaire',
      highlight: false,
    },
  ];

  return (
    <section id="pricing" className="section">
      <div className="container">
        <div className="reveal" style={{ marginBottom: isMobile ? 40 : 80, maxWidth: 720 }}>
          <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>Tarifs</span>
          <h2 style={{ marginTop: 24 }}>
            Simple et <span className="serif" style={{ color: 'var(--accent)' }}>sans surprise</span>.
          </h2>
          <p style={{ marginTop: 24, fontSize: isMobile ? 15 : 17 }}>
            Trois portes d'entrée. On commence souvent par l'Audit pour s'aligner — vous ne payez le Build qu'avec un cap chiffré.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isTablet ? '1fr' : 'repeat(3, 1fr)',
          gap: 16,
        }}>
          {plans.map(p => (
            <div key={p.name} className="reveal" style={{
              border: p.highlight ? '2px solid var(--accent)' : '1px solid var(--line-strong)',
              borderRadius: 16,
              padding: isMobile ? 24 : 32,
              background: p.highlight ? 'linear-gradient(180deg, var(--accent-soft), var(--bg-elev) 60%)' : 'var(--bg-elev)',
              boxShadow: p.highlight ? '0 16px 50px var(--accent-glow)' : '0 1px 0 var(--line)',
              position: 'relative',
              display: 'flex',
              flexDirection: 'column',
              minHeight: isTablet ? 'auto' : 520,
            }}>
              {p.highlight && (
                <div style={{
                  position: 'absolute',
                  top: -10,
                  left: 24,
                  fontFamily: 'var(--mono)',
                  fontSize: 10,
                  textTransform: 'uppercase',
                  letterSpacing: '0.15em',
                  background: 'var(--accent)',
                  color: 'var(--on-accent)',
                  padding: '4px 10px',
                  borderRadius: 999,
                  fontWeight: 600,
                }}>Le plus choisi</div>
              )}
              <div style={{ marginBottom: 24 }}>
                <h3 style={{ fontSize: 22, marginBottom: 8 }}>{p.name}</h3>
                <p style={{ fontSize: 14 }}>{p.desc}</p>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                <span style={{
                  fontFamily: 'var(--serif)', fontStyle: 'italic',
                  fontSize: isMobile ? 40 : 56,
                  lineHeight: 1, color: 'var(--text)',
                }}>
                  {p.price.match(/^\d/) ? `${p.price} €` : p.price}
                </span>
              </div>
              <div className="ticker" style={{ marginBottom: 28, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
                {p.cadence}
              </div>
              <div style={{ flex: 1, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                {p.includes.map(item => (
                  <div key={item} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '10px 0', fontSize: 14, color: 'var(--text-dim)' }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0, marginTop: 4 }}>
                      <path d="M2 7L6 11L12 3" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <span>{item}</span>
                  </div>
                ))}
              </div>
              <a href="https://cal.eu/gaussia" target="_blank" rel="noopener noreferrer" className={p.highlight ? 'btn btn-primary' : 'btn btn-ghost'} style={{ marginTop: 28, justifyContent: 'center' }}>
                {p.cta} <Arrow />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const { isMobile, isTablet } = useResponsive();
  const items = [
    {
      q: 'Est-ce qu\'on a besoin d\'avoir déjà des outils en place ?',
      a: 'Non. La plupart de nos clients arrivent avec un patchwork (un CRM, des tableurs, des emails) et c\'est précisément ce qu\'on transforme. Si rien n\'existe, on construit léger et juste.',
    },
    {
      q: 'Quelles données utilisez-vous ? Mes données sont-elles en sécurité ?',
      a: 'Vos données restent vos données. Hébergement européen par défaut, pas d\'entraînement de modèles tiers sur votre contenu, contrats DPA standards. On peut aussi déployer en local si le contexte l\'exige.',
    },
    {
      q: 'En combien de temps voit-on des résultats ?',
      a: 'Le pilote sort en 2-3 semaines avec un impact mesurable dès le mois 1. Le déploiement complet prend 3-6 semaines selon la complexité du SI.',
    },
    {
      q: 'On n\'est pas tech — c\'est compatible ?',
      a: 'Oui, c\'est même pour ça qu\'on est là. On parle votre langue (pas le jargon), on documente tout, et on forme vos équipes pour qu\'elles pilotent sans nous.',
    },
    {
      q: 'Que se passe-t-il si on veut tout reprendre en interne ?',
      a: 'C\'est l\'objectif final. On utilise des stacks ouvertes (n8n, briques open source, vos propres clés API), tout est documenté. Vous gardez la main, toujours.',
    },
    {
      q: 'L\'IA va-t-elle remplacer mes équipes ?',
      a: 'Non. Elle prend les tâches pénibles et répétitives. Vos équipes redeviennent disponibles pour ce qu\'elles font le mieux : juger, décider, créer.',
    },
  ];

  return (
    <section id="faq" className="section section-sage">
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: isTablet ? '1fr' : '380px 1fr',
        gap: isTablet ? 40 : 80,
      }}>
        <div className="reveal">
          <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>FAQ</span>
          <h2 style={{ marginTop: 24, fontSize: isMobile ? 40 : 56 }}>
            Questions <span className="serif" style={{ color: 'var(--accent)' }}>fréquentes</span>.
          </h2>
          <p style={{ marginTop: 24, fontSize: 15 }}>
            Pas de réponse à votre question ? Écrivez-nous, on revient sous 24h.
          </p>
        </div>
        <div>
          {items.map((it, i) => <FAQItem key={i} item={it} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ item, index }) {
  const [open, setOpen] = useState(index === 0);
  const { isMobile } = useResponsive();
  return (
    <div className="reveal" style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: isMobile ? '18px 0' : '24px 0',
        textAlign: 'left',
        gap: 16,
      }}>
        <span style={{ fontSize: isMobile ? 16 : 18, color: 'var(--text)', letterSpacing: '-0.01em' }}>{item.q}</span>
        <Plus open={open} />
      </button>
      <div style={{
        display: 'grid',
        gridTemplateRows: open ? '1fr' : '0fr',
        transition: 'grid-template-rows 0.5s cubic-bezier(0.2,0.8,0.2,1)',
      }}>
        <div style={{ overflow: 'hidden' }}>
          <p style={{
            paddingBottom: isMobile ? 16 : 24,
            paddingRight: isMobile ? 20 : 60,
            fontSize: isMobile ? 14 : 15,
            maxWidth: 640,
          }}>{item.a}</p>
        </div>
      </div>
    </div>
  );
}

function CTA() {
  const { isMobile, isTablet } = useResponsive();
  return (
    <section id="contact" className="section section-coral" style={{ paddingBottom: isMobile ? 48 : 80, position: 'relative', overflow: 'hidden' }}>
      {/* Decorative SVG arcs */}
      <svg style={{
        position: 'absolute',
        top: -100, right: -100,
        width: isTablet ? 300 : 500,
        height: isTablet ? 300 : 500,
        opacity: 0.25, pointerEvents: 'none',
      }} viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="80" stroke="white" strokeWidth="1" fill="none" />
        <circle cx="100" cy="100" r="60" stroke="white" strokeWidth="1" fill="none" />
        <circle cx="100" cy="100" r="40" stroke="white" strokeWidth="1" fill="none" />
      </svg>
      <svg style={{
        position: 'absolute',
        bottom: -120, left: -80,
        width: isTablet ? 240 : 380,
        height: isTablet ? 240 : 380,
        opacity: 0.18, pointerEvents: 'none',
      }} viewBox="0 0 200 200">
        <path d="M20 100 Q100 20 180 100 Q100 180 20 100 Z" fill="white" />
      </svg>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="reveal" style={{
          display: 'grid',
          gridTemplateColumns: isTablet ? '1fr' : '1fr auto',
          gap: isTablet ? 32 : 60,
          alignItems: 'center',
        }}>
          <div>
            <span className="eyebrow" style={{ marginBottom: 28, display: 'inline-flex' }}>Prochaine étape</span>
            <h2 style={{
              marginTop: 24, marginBottom: 24,
              fontSize: isMobile ? 36 : isTablet ? 44 : 64,
              color: '#fff', lineHeight: 1.05,
            }}>
              Et si on regardait <span className="serif" style={{
                background: '#1c1a2e', color: '#fff',
                padding: '2px 16px', borderRadius: 6,
                display: 'inline-block', transform: 'rotate(-1.5deg)',
                whiteSpace: 'nowrap', margin: '0 4px',
              }}>vos opérations</span> ensemble ?
            </h2>
            <p style={{
              fontSize: isMobile ? 15 : 17,
              maxWidth: 560,
              color: 'rgba(255,255,255,0.92)',
            }}>
              30 minutes en visio. Vous nous racontez vos frictions, on identifie 2-3 chantiers à fort impact. Que vous travailliez avec nous ou pas, vous repartez avec un cap.
            </p>
            <div style={{
              display: 'flex', gap: 12, marginTop: isMobile ? 24 : 36,
              flexWrap: 'wrap',
            }}>
              <a href="https://cal.eu/gaussia" target="_blank" rel="noopener noreferrer" className="btn" style={{
                background: '#1c1a2e', color: '#fff', padding: '14px 22px',
              }}>
                Réserver un créneau <Arrow />
              </a>
              <a href="mailto:contact@gaussia.fr" className="btn" style={{
                border: '1px solid rgba(255,255,255,0.5)', color: '#fff',
              }}>
                contact@gaussia.fr
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { isMobile, isTablet } = useResponsive();
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: isMobile ? '32px 0 24px' : '48px 0 36px' }}>
      <div className="container">
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          gap: isTablet ? 32 : 40,
          flexWrap: 'wrap',
          marginBottom: isMobile ? 32 : 48,
          flexDirection: isTablet ? 'column' : 'row',
        }}>
          <div style={{ maxWidth: 320 }}>
            <Logo size={26} />
            <p style={{ marginTop: 16, fontSize: 14 }}>
              Du chaos opérationnel à la clarté automatisée. Agence IA & automation basée à Paris.
            </p>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, auto)',
            gap: isMobile ? '28px 24px' : 64,
          }}>
            <FooterCol title="Navigation" links={[['Services', '#services'], ['Cas clients', '#cases'], ['Méthode', '#method'], ['Tarifs', '#pricing'], ['FAQ', '#faq']]} />
            <FooterCol title="Contact" links={[['contact@gaussia.fr', 'mailto:contact@gaussia.fr'], ['Prendre RDV', 'https://cal.eu/gaussia'], ['LinkedIn', '#']]} />
            <FooterCol title="Légal" links={[['Mentions légales', '#'], ['Politique RGPD', '#'], ['CGV', '#']]} />
          </div>
        </div>
        <div style={{
          borderTop: '1px solid var(--line)',
          paddingTop: isMobile ? 16 : 24,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 12,
          flexDirection: isMobile ? 'column' : 'row',
        }}>
          <span className="ticker">© 2026 Gaussia · Tous droits réservés</span>
          <span className="ticker">Conçu à Paris · Hébergé en Europe</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="ticker" style={{ textTransform: 'uppercase', letterSpacing: '0.15em', marginBottom: 14 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {links.map(([label, href]) => (
          <a key={label} href={href} style={{ fontSize: 14, color: 'var(--text-dim)', transition: 'color 0.2s' }}
            onMouseEnter={e => e.target.style.color = 'var(--accent)'}
            onMouseLeave={e => e.target.style.color = 'var(--text-dim)'}>{label}</a>
        ))}
      </div>
    </div>
  );
}

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