// Testimonials — section partagée par A et B
// Marquee horizontale infinie de cartes "liquid glass" en pur N&B
// Adapté de designali-in/marquee + liquid-glass-card en plain JSX

const Testimonials = ({ ink = '#000', paper = '#fff', line = 'rgba(255,255,255,0.16)', muted = 'rgba(255,255,255,0.5)', display, mono, accent = '#fff', speed = 60, pauseOnHover = true, variant = 'glass', lang = 'fr' }) => {
  const items_fr = [
    { name: 'Hélène Marchetti', role: 'Founder · Marchetti, SaaS B2B',
      quote: 'En 14 jours, l\'audit a posé un diagnostic chirurgical de notre stack et de nos process. Trois mois plus tard, notre vélocité produit a doublé.',
      ref: '01' },
    { name: 'Thomas Lefèvre', role: 'CEO · Lefèvre & Co., e-commerce D2C',
      quote: 'Un partenaire d\'exécution dont la précision m\'a permis de me reconcentrer sur la marque. Le luxe d\'avoir un COO sans le coût.',
      ref: '02' },
    { name: 'Camille Roux', role: 'Co-fondatrice · Roux Studio, marketplace',
      quote: 'Ils ont taillé nos systèmes à la mesure de notre marketplace. Aucun template, aucune solution générique. Du sur-mesure, avec une rigueur d\'artisan.',
      ref: '03' },
    { name: 'Antoine Berger', role: 'Fondateur · Berger Capital, fintech B2B',
      quote: 'Le sprint a transformé notre back-office en quatre semaines. Mécanisme propre, transmis, documenté. Nous l\'utilisons encore aujourd\'hui.',
      ref: '04' },
    { name: 'Élise Dumas', role: 'CEO · Dumas Media, newsletter premium',
      quote: 'Une exigence d\'horloger appliquée à nos opérations éditoriales. C\'est rare et précieux dans le digital. Chaque pièce remise en place avec attention.',
      ref: '05' },
    { name: 'Pierre Vasseur', role: 'Fondateur · Vasseur Studio, agence digitale',
      quote: 'J\'ai gardé mon temps de fondateur, ils ont structuré ma croissance. Notre studio continue de grandir sans perdre son âme.',
      ref: '06' },
  ];
  const items_en = [
    { name: 'Hélène Marchetti', role: 'Founder · Marchetti, B2B SaaS',
      quote: 'In 14 days, the audit gave a surgical diagnosis of our stack and processes. Three months later our product velocity had doubled.',
      ref: '01' },
    { name: 'Thomas Lefèvre', role: 'CEO · Lefèvre & Co., D2C e-commerce',
      quote: 'An execution partner whose precision let me refocus on the brand. The luxury of having a COO without the cost.',
      ref: '02' },
    { name: 'Camille Roux', role: 'Co-founder · Roux Studio, marketplace',
      quote: 'They tailored our systems to fit our marketplace exactly. No template, no generic solution. Bespoke, with a craftsman\'s rigour.',
      ref: '03' },
    { name: 'Antoine Berger', role: 'Founder · Berger Capital, B2B fintech',
      quote: 'The sprint transformed our back-office in four weeks. Clean mechanism, handed over, documented. We still rely on it today.',
      ref: '04' },
    { name: 'Élise Dumas', role: 'CEO · Dumas Media, premium newsletter',
      quote: 'A watchmaker\'s rigour applied to editorial operations. That\'s rare and precious in digital. Every piece set back in place with care.',
      ref: '05' },
    { name: 'Pierre Vasseur', role: 'Founder · Vasseur Studio, digital agency',
      quote: 'I kept my founder time, they structured my growth. Our studio keeps growing without losing its soul.',
      ref: '06' },
  ];
  const items = lang === 'en' ? items_en : items_fr;
  const sectionLabel    = lang === 'en' ? '— Testimonials · 06'        : '— Témoignages · 06';
  const sectionTitle    = lang === 'en' ? "What they say."             : "Ce qu'ils en disent.";
  const sectionSubtitle = lang === 'en' ? 'Six companies, six rhythms, the same care.' : 'Six entreprises, six rythmes, un même soin.';
  const hoverHint       = lang === 'en' ? '↻ Hover to pause'           : '↻ Survol pour pauser';
  const counter         = lang === 'en' ? '+247 missions delivered · 2019 — 2024' : '+247 missions livrées · 2019 — 2024';

  const cardStyle = variant === 'glass' ? {
    width: 380, height: 240, padding: 28,
    background: 'rgba(255,255,255,0.04)',
    border: `1px solid rgba(255,255,255,0.14)`,
    borderRadius: 20,
    backdropFilter: 'blur(12px)',
    boxShadow: 'inset 1px 1px 1px -0.5px rgba(255,255,255,0.6), inset -1px -1px 1px -0.5px rgba(255,255,255,0.6), 0 0 12px rgba(0,0,0,0.4)',
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    flexShrink: 0,
  } : {
    width: 380, height: 240, padding: 28,
    background: ink,
    border: `1px solid ${line}`,
    borderRadius: 0,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    flexShrink: 0,
  };

  const Card = ({ t }) => (
    <div style={cardStyle}>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', ...mono, color: muted }}>
          <span style={{ color: paper }}>● {t.ref}</span>
          <span style={{ display: 'flex', gap: 3 }}>
            {Array.from({ length: 5 }).map((_, i) => (
              <span key={i} style={{
                width: 8, height: 8, transform: 'rotate(45deg)',
                background: accent, display: 'inline-block',
              }} />
            ))}
          </span>
        </div>
        <p style={{
          ...display, fontSize: 18, fontStyle: 'italic', fontWeight: 400, lineHeight: 1.35,
          color: paper, margin: '20px 0 0 0',
        }}>« {t.quote} »</p>
      </div>
      <div style={{ paddingTop: 16, borderTop: `1px solid ${line}` }}>
        <div style={{ ...mono, color: paper, fontSize: 10 }}>{t.name}</div>
        <div style={{ ...mono, color: muted, fontSize: 9, marginTop: 4 }}>{t.role}</div>
      </div>
    </div>
  );

  // Inject keyframes once
  React.useEffect(() => {
    if (document.getElementById('bo-marquee-kf')) return;
    const s = document.createElement('style');
    s.id = 'bo-marquee-kf';
    s.textContent = `
      @keyframes boMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
      .bo-marquee-track { animation: boMarquee var(--bo-marquee-dur, 60s) linear infinite; }
      .bo-marquee-wrap:hover .bo-marquee-track[data-pause="1"] { animation-play-state: paused; }
    `;
    document.head.appendChild(s);
  }, []);

  // Duplicate for seamless loop
  const loop = [...items, ...items];

  return (
    <section style={{ padding: '120px 0 96px', borderTop: `1px solid ${line}`, background: ink, position: 'relative', overflow: 'hidden' }}>
      <div style={{ padding: '0 48px', marginBottom: 48 }}>
        <div style={{ ...mono, color: muted, marginBottom: 12 }}>{sectionLabel}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16 }}>
          <h2 style={{
            ...display, fontSize: 64, fontStyle: 'italic', fontWeight: 400,
            margin: 0, lineHeight: 1, letterSpacing: '-0.02em', color: paper,
          }}>{sectionTitle}</h2>
          <p style={{ ...mono, color: muted, maxWidth: 360, margin: 0 }}>
            {sectionSubtitle}
          </p>
        </div>
      </div>

      <div className="bo-marquee-wrap" style={{
        display: 'flex', overflow: 'hidden', padding: '12px 0',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
        maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
        ['--bo-marquee-dur']: `${speed}s`,
      }}>
        <div className="bo-marquee-track" data-pause={pauseOnHover ? '1' : '0'} style={{
          display: 'flex', gap: 24, paddingRight: 24, flexShrink: 0,
        }}>
          {loop.map((t, i) => <Card key={i} t={t} />)}
        </div>
      </div>

      <div style={{ padding: '48px 48px 0', display: 'flex', justifyContent: 'space-between', ...mono, color: muted }}>
        <span>{hoverHint}</span>
        <span>{counter}</span>
      </div>
    </section>
  );
};

window.Testimonials = Testimonials;