// "Pourquoi Moneyshape" section — L'outil et l'expertise. Ensemble.
// 2 grandes cartes côte à côte.
// Gauche (dark): simulateurs + 3 stat rows.
// Droite (bordeaux): placeholder portraits experts + tags + CTA.

function WhySection({ mobile = false }) {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setVisible(true); });
    }, { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const reveal = (i) => ({
    opacity: visible ? 1 : 0,
    transform: visible ? 'translateY(0)' : 'translateY(16px)',
    transition: `opacity .8s cubic-bezier(.2,.7,.2,1) ${i * 110}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${i * 110}ms`,
  });

  // ── Shared bits ──────────────────────────────────────────────────
  const Eyebrow = ({ children, dark }) => (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      background: dark ? 'rgba(255,255,255,0.08)' : TOKENS.ink06,
      padding: '7px 14px', borderRadius: 999,
      fontFamily: FONTS.mono, fontSize: 10,
      color: dark ? 'rgba(255,255,255,0.85)' : TOKENS.ink,
      textTransform: 'uppercase', letterSpacing: 1.8, fontWeight: 600,
    }}>
      {children}
    </div>
  );

  // Portrait avec photo réelle — cache transparent doux uniquement
  const ExpertPortrait = ({ src, objectPosition = 'center 25%' }) => (
    <div style={{
      position: 'relative',
      overflow: 'hidden',
      background: TOKENS.bordeaux,
    }}>
      <img src={src} alt="" style={{
        width: '100%', height: '100%',
        objectFit: 'cover', objectPosition,
        display: 'block',
      }}/>
      {/* Cache transparent pour atténuer la saturation — photos d'origine conservées */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'rgba(29,29,29,0.18)',
        pointerEvents: 'none',
      }}/>
    </div>
  );

  // ── Card data for stat rows ──────────────────────────────────────
  const stats = [
    {
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M2.5 11.5L6 7.5L8.5 10L13.5 4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M10 4h3.5v3.5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      label: 'Rentabilité nette',
      value: '6,8 %',
      chipText: '+1,9 % vs brut',
      chipBg: TOKENS.green, chipFg: TOKENS.ink,
    },
    {
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M11 4.5a3.5 3.5 0 0 0-6.3 2.1M11 11.5a3.5 3.5 0 0 1-6.3-2.1" stroke="#fff" strokeWidth="1.8" strokeLinecap="round"/>
          <path d="M3 7h6M3 9h6" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      ),
      label: 'Cashflow mensuel',
      value: '+ 187 €',
      chipText: 'LMNP réel',
      chipBg: TOKENS.blue, chipFg: '#fff',
    },
    {
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M8 2L14 13H2L8 2Z" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round"/>
          <circle cx="8" cy="10" r="0.8" fill="#fff"/>
        </svg>
      ),
      label: 'Économie fiscale',
      value: '2 240 € / an',
      chipText: 'Optimisé',
      chipBg: TOKENS.coral, chipFg: '#fff',
    },
  ];

  const tags = ['Fiscalité', 'Financement', 'Stratégie locative', 'Analyse marché'];

  // ── LEFT CARD: simulators (dark) ─────────────────────────────────
  const SimulatorsCard = (
    <div style={{
      background: TOKENS.ink,
      borderRadius: mobile ? 18 : 22,
      padding: mobile ? '32px 24px 28px' : '42px 40px 36px',
      color: '#fff',
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      minHeight: mobile ? 'auto' : 520,
      ...reveal(1),
    }}>
      {/* Photo d'ambiance — homme au laptop */}
      <img src="assets/photo-outils.jpg" alt="" aria-hidden style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center 40%',
        opacity: 0.72,
        filter: 'saturate(0.85) brightness(0.82)',
      }}/>
      {/* Warm dark overlay (moins opaque en haut) */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(20,10,6,0.42) 0%, rgba(18,10,6,0.74) 55%, rgba(14,8,6,0.92) 100%)',
        pointerEvents: 'none',
      }}/>
      {/* Grain 0.08 */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
        opacity: 0.08,
        mixBlendMode: 'overlay',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}>
        <Eyebrow dark>
          <span style={{ color: TOKENS.green, fontSize: 11 }}>✦✦</span>
          Simulateurs
        </Eyebrow>

        <h3 style={{
          fontFamily: FONTS.display, fontWeight: 700,
          fontSize: mobile ? 26 : 30, lineHeight: 1.12, letterSpacing: -0.8,
          margin: '22px 0 14px',
          color: '#fff',
          maxWidth: 420,
        }}>
          Des outils performants, pour avoir <span style={{ color: TOKENS.green }}>les vrais chiffres</span>.
        </h3>

        <p style={{
          fontFamily: FONTS.sans, fontSize: mobile ? 13 : 14, lineHeight: 1.55,
          color: 'rgba(255,255,255,0.55)',
          margin: '0 0 28px', maxWidth: 400,
        }}>
          Rentabilité nette, cashflow réel, financement simulé,<br/>fiscalité optimisée.
        </p>

        {/* Stat rows */}
        <div style={{
          marginTop: 'auto',
          display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              background: 'rgba(255,255,255,0.06)',
              backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 12,
              padding: mobile ? '12px 14px' : '14px 18px',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: 'rgba(255,255,255,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>{s.icon}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: FONTS.mono, fontSize: 10,
                  color: 'rgba(255,255,255,0.5)',
                  textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 3,
                }}>{s.label}</div>
                <div style={{
                  fontFamily: FONTS.display, fontWeight: 700,
                  fontSize: mobile ? 17 : 19, letterSpacing: -0.3,
                  fontVariantNumeric: 'tabular-nums',
                }}>{s.value}</div>
              </div>
              <div style={{
                background: s.chipBg, color: s.chipFg,
                fontFamily: FONTS.sans, fontSize: 11, fontWeight: 600,
                padding: '5px 10px', borderRadius: 99,
                whiteSpace: 'nowrap', flexShrink: 0,
              }}>{s.chipText}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  // ── RIGHT CARD: experts (bordeaux) ───────────────────────────────
  const ExpertsCard = (
    <div style={{
      borderRadius: mobile ? 18 : 22,
      overflow: 'hidden',
      position: 'relative',
      minHeight: mobile ? 'auto' : 520,
      background: TOKENS.bordeauxDeep,
      display: 'flex', flexDirection: 'column',
      ...reveal(2),
    }}>
      {/* Top half: portraits */}
      <div style={{
        position: 'relative',
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        height: mobile ? 200 : 300,
        flexShrink: 0,
        background: '#A14A35',
      }}>
        <ExpertPortrait src="assets/expert-homme.jpg" objectPosition={mobile ? 'center 22%' : 'center 28%'}/>
        <ExpertPortrait src="assets/expert-femme.jpg" objectPosition={mobile ? 'center 22%' : 'center 28%'}/>
      </div>

      {/* Bottom half: content on paper white */}
      <div style={{
        flex: 1,
        background: '#fff',
        padding: mobile ? '28px 24px 32px' : '36px 40px 40px',
        display: 'flex', flexDirection: 'column',
      }}>
        <Eyebrow>
          <span style={{ color: TOKENS.green }}>● ●</span>
          Experts métier
        </Eyebrow>

        <p style={{
          fontFamily: FONTS.sans, fontSize: mobile ? 14 : 15, lineHeight: 1.5,
          color: TOKENS.ink, margin: '20px 0 0', fontWeight: 500,
          maxWidth: 460,
        }}>
          Nos Moneyshapers répondent à vos questions spécifiques.{' '}
          <span style={{ color: TOKENS.ink60, fontWeight: 400 }}>
            De vraies personnes qui connaissent le marché et vous mettent en relation avec les bons partenaires, au bon moment.
          </span>
        </p>

        {/* Tags */}
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 8,
          margin: mobile ? '22px 0 24px' : '26px 0 28px',
        }}>
          {tags.map((t, i) => (
            <span key={i} style={{
              background: TOKENS.ink06,
              color: TOKENS.ink,
              fontFamily: FONTS.sans, fontSize: 12, fontWeight: 500,
              padding: '7px 13px', borderRadius: 99,
              border: `1px solid ${TOKENS.line}`,
            }}>{t}</span>
          ))}
        </div>

        {/* CTA */}
        <div style={{ marginTop: 'auto' }}>
          <button
            data-cal-link="team/moneyshape/demo-moneyshape"
            data-cal-namespace="demo-moneyshape"
            data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true","metadata[cta_source]":"why"}'
            style={{
              background: TOKENS.bordeaux, color: '#fff', border: 'none',
              padding: '14px 24px', borderRadius: 12,
              fontFamily: FONTS.sans, fontSize: 15, fontWeight: 600,
              cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              boxShadow: '0 10px 30px -5px rgba(92,13,7,0.4)',
            }}>
            Parler à un expert
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M2 8h11m0 0L8 3m5 5l-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  );

  return (
    <section ref={ref} style={{
      width: '100%',
      padding: mobile ? '60px 20px 80px' : '100px 56px 120px',
      background: TOKENS.paper,
      position: 'relative',
    }}>
      {/* Heading */}
      <div style={{ textAlign: 'center', marginBottom: mobile ? 40 : 60, ...reveal(0) }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: FONTS.mono, fontSize: mobile ? 10 : 11,
          color: TOKENS.bordeaux, textTransform: 'uppercase', letterSpacing: 2,
          marginBottom: mobile ? 18 : 22,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: TOKENS.bordeaux }}/>
          Pourquoi Moneyshape
          <span style={{ width: 6, height: 6, borderRadius: 99, background: TOKENS.bordeaux }}/>
        </div>
        <h2 style={{
          fontFamily: FONTS.display, fontWeight: 700,
          fontSize: mobile ? 40 : 72, lineHeight: 1,
          letterSpacing: mobile ? -1.4 : -2.4,
          margin: 0, color: TOKENS.ink,
          textWrap: 'balance',
        }}>
          L'outil et l'expertise. Ensemble<span style={{ color: TOKENS.bordeaux }}>.</span>
        </h2>
      </div>

      {/* Two-card grid */}
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        gap: mobile ? 16 : 22,
      }}>
        {SimulatorsCard}
        {ExpertsCard}
      </div>
    </section>
  );
}

window.WhySection = WhySection;