const { useState, useEffect } = React;
const { Reveal, Icon } = window;

const COMPARE_ROWS = [
  {
    bad:  'Une formation hébergée sur Skool, Systeme.io ou Notion.',
    good: 'Une plateforme e-learning propre, pensée et codée spécifiquement pour le MRR.',
  },
  {
    bad:  'Tu découvres les modules dans le désordre et tu te perds.',
    good: 'Un parcours balisé avec des quiz, des objectifs clairs et une vraie progression visible.',
  },
  {
    bad:  'Tu touches 100% sur tes ventes. Et c\'est tout.',
    good: 'Tu touches 100% sur tes ventes et des commissions passives quand tes clients montent en gamme.',
  },
  {
    bad:  'Tu achètes un produit figé qui ne bougera plus.',
    good: 'Une plateforme vivante, qui évolue avec toi et avec le marché.',
  },
  {
    bad:  'Tu dois te débrouiller pour créer ta page de vente tout seul.',
    good: 'VIZION Web génère ta landing page et ton lien en bio en quelques clics.',
  },
];

function Compare() {
  const [isMobile, setIsMobile] = useState(
    typeof window !== 'undefined' ? window.innerWidth < 768 : false
  );
  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', check, { passive: true });
    return () => window.removeEventListener('resize', check);
  }, []);

  return (
    <section className="section">
      <div className="container">
        <Reveal className="section-header" style={{ textAlign: 'center', alignItems: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <h2 className="h2" style={{ textAlign: 'center', textTransform: 'none' }}>
            Ce qui fait la différence.<br />
            <span className="serif-i" style={{ color: 'var(--accent)', fontWeight: 400 }}>Comparé aux autres formations.</span>
          </h2>
          <p style={{ color: 'var(--ink-dim)', fontSize: 18, maxWidth: 560 }}>
            La plupart des formations MRR te donnent un produit. VIZION te donne un système — formation, outils, communauté et droits de revente réels, tout en un seul endroit.
          </p>
        </Reveal>

        {isMobile ? (
          <Reveal delay={0.4}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Bloc "Les autres formations" */}
              <div style={{ borderRadius: 20, border: '1px solid var(--line)', background: 'var(--bg-card)', overflow: 'hidden' }}>
                <div style={{ padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid var(--line)', background: 'var(--bg-elev)' }}>
                  <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--bg-card)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-mute)', flexShrink: 0 }}>
                    <Icon.Close size={12} />
                  </span>
                  <h3 className="serif" style={{ fontSize: 18, color: 'var(--ink-dim)', margin: 0 }}>Les autres formations</h3>
                </div>
                {COMPARE_ROWS.map((row, i) => (
                  <div key={i} style={{ padding: '14px 20px', borderBottom: i < COMPARE_ROWS.length - 1 ? '1px solid var(--line)' : 'none', display: 'flex', alignItems: 'flex-start', gap: 10, color: 'var(--ink-dim)', fontSize: 13, lineHeight: 1.55 }}>
                    <span style={{ color: 'var(--ink-mute)', marginTop: 3, flexShrink: 0 }}><Icon.Minus size={12} /></span>
                    <span>{row.bad}</span>
                  </div>
                ))}
              </div>
              {/* Bloc "Vizion MRR" */}
              <div style={{ borderRadius: 20, border: '1px solid color-mix(in oklab, var(--accent) 50%, transparent)', background: 'color-mix(in oklab, var(--accent) 5%, var(--bg-card))', boxShadow: '0 0 32px -8px var(--accent-glow)', overflow: 'hidden' }}>
                <div style={{ padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid color-mix(in oklab, var(--accent) 30%, transparent)', background: 'color-mix(in oklab, var(--accent) 10%, transparent)' }}>
                  <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--accent)', color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon.Check size={12} />
                  </span>
                  <h3 className="serif" style={{ fontSize: 18, margin: 0 }}>Vizion MRR</h3>
                </div>
                {COMPARE_ROWS.map((row, i) => (
                  <div key={i} style={{ padding: '14px 20px', borderBottom: i < COMPARE_ROWS.length - 1 ? '1px solid color-mix(in oklab, var(--accent) 20%, transparent)' : 'none', display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, lineHeight: 1.55 }}>
                    <span style={{ color: 'var(--accent)', marginTop: 3, flexShrink: 0 }}><Icon.Check size={12} /></span>
                    <span>{row.good}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        ) : (

        <Reveal delay={0.4}>
          {/* Wrapper relatif : les fonds de colonne sont absolus, le grid est au-dessus */}
          <div style={{ position: 'relative' }}>

            {/* ── Fond colonne gauche ── */}
            <div style={{
              position: 'absolute', top: 0, bottom: 0,
              left: 0, right: 'calc(50% + 10px)',
              borderRadius: 20, border: '1px solid var(--line)',
              background: 'var(--bg-card)', pointerEvents: 'none', zIndex: 0,
            }} />

            {/* ── Fond colonne droite ── */}
            <div style={{
              position: 'absolute', top: 0, bottom: 0,
              left: 'calc(50% + 10px)', right: 0,
              borderRadius: 20,
              border: '1px solid color-mix(in oklab, var(--accent) 50%, transparent)',
              background: 'color-mix(in oklab, var(--accent) 5%, var(--bg-card))',
              boxShadow: '0 0 32px -8px var(--accent-glow)',
              pointerEvents: 'none', zIndex: 0,
            }} />
            {/* Glow coin droite */}
            <div style={{
              position: 'absolute', top: -40, right: -40, width: 200, height: 200,
              background: 'radial-gradient(circle, var(--accent-glow), transparent 70%)',
              filter: 'blur(20px)', pointerEvents: 'none', zIndex: 0,
            }} />

            {/* ── Grid plat : alignement ligne par ligne ── */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr',
              gap: '0 20px', alignItems: 'stretch',
              position: 'relative', zIndex: 1,
            }}>

              {/* Headers */}
              <div style={{
                padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12,
                borderBottom: '1px solid var(--line)',
                background: 'var(--bg-elev)',
                borderRadius: '20px 0 0 0',
              }}>
                <span style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--bg-card)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-mute)', flexShrink: 0 }}>
                  <Icon.Close size={13} />
                </span>
                <h3 className="serif" style={{ fontSize: 22, color: 'var(--ink-dim)', margin: 0 }}>Les autres formations</h3>
              </div>
              <div style={{
                padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12,
                borderBottom: '1px solid color-mix(in oklab, var(--accent) 30%, transparent)',
                background: 'color-mix(in oklab, var(--accent) 10%, transparent)',
                borderRadius: '0 20px 0 0',
              }}>
                <span style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--accent)', color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon.Check size={13} />
                </span>
                <h3 className="serif" style={{ fontSize: 22, margin: 0 }}>Vizion MRR</h3>
              </div>

              {/* Lignes comparatives — alignées côte à côte */}
              {COMPARE_ROWS.map((row, i) => {
                const isLast = i === COMPARE_ROWS.length - 1;
                return (
                  <React.Fragment key={i}>
                    <div style={{
                      padding: '16px 24px',
                      borderBottom: isLast ? 'none' : '1px solid var(--line)',
                      display: 'flex', alignItems: 'flex-start', gap: 12,
                      color: 'var(--ink-dim)', fontSize: 14, lineHeight: 1.55,
                      borderRadius: isLast ? '0 0 0 20px' : 0,
                    }}>
                      <span style={{ color: 'var(--ink-mute)', marginTop: 3, flexShrink: 0 }}><Icon.Minus size={12} /></span>
                      <span>{row.bad}</span>
                    </div>
                    <div style={{
                      padding: '16px 24px',
                      borderBottom: isLast ? 'none' : '1px solid color-mix(in oklab, var(--accent) 20%, transparent)',
                      display: 'flex', alignItems: 'flex-start', gap: 12,
                      fontSize: 14, lineHeight: 1.55,
                      borderRadius: isLast ? '0 0 20px 0' : 0,
                    }}>
                      <span style={{ color: 'var(--accent)', marginTop: 3, flexShrink: 0 }}><Icon.Check size={12} /></span>
                      <span>{row.good}</span>
                    </div>
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        </Reveal>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Compare });