// Footer — Moneyshape
// Dark ink (#1D1D1D) avec accents verts, contraste avec le Final CTA qui est sur paper.

function Footer({ 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.1 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

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

  const linkStyle = {
    fontFamily: FONTS.sans, fontSize: 14,
    color: 'rgba(255,255,255,0.68)',
    textDecoration: 'none',
    display: 'block', padding: '4px 0',
    cursor: 'pointer',
    transition: 'color .2s',
  };

  const headingStyle = {
    fontFamily: FONTS.mono, fontSize: 10,
    color: 'rgba(255,255,255,0.4)',
    textTransform: 'uppercase', letterSpacing: 2,
    marginBottom: 18,
  };

  const nav = [
    {
      h: 'Produit',
      links: [
        { label: 'Comment ça marche ?', href: '#' },
        { label: 'Se lancer', href: 'https://app.moneyshape.com/inscription?source=lpi_footer' },
        { label: 'Réserver une démo', href: '#', isDemo: true },
      ],
    },
    {
      h: 'Contact',
      links: [
        { label: 'Accéder à Moneyshape', href: 'https://app.moneyshape.com/' },
        { label: 'Contact', href: 'mailto:hello@moneyshape.com' },
      ],
      social: true,
    },
    {
      h: 'Légal',
      links: [
        { label: 'Mentions légales', href: 'https://app.moneyshape.com/mentions-l%C3%A9gales' },
        { label: 'Conditions', href: 'https://app.moneyshape.com/cgu' },
        { label: 'Confidentialité', href: 'https://app.moneyshape.com/confidentialit%C3%A9' },
        { label: 'Cookies', href: 'https://app.moneyshape.com/cookies' },
      ],
    },
  ];

  const renderLink = (l, j) => {
    const attrs = {};
    if (l.href) attrs.href = l.href;
    if (l.isDemo) {
      attrs['data-cal-link'] = 'team/moneyshape/demo-moneyshape';
      attrs['data-cal-namespace'] = 'demo-moneyshape';
      attrs['data-cal-config'] = '{"layout":"month_view","useSlotsViewOnSmallScreen":"true","metadata[cta_source]":"footer"}';
    }
    return <a key={j} style={linkStyle} {...attrs}>{l.label || l}</a>;
  };

  const IconInsta = (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
      <rect x="2" y="2" width="12" height="12" rx="3" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="8" cy="8" r="2.4" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="11.5" cy="4.5" r="0.8" fill="currentColor"/>
    </svg>
  );
  const IconLinkedIn = (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
      <rect x="2" y="2" width="12" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
      <rect x="4.5" y="6.5" width="1.6" height="5" fill="currentColor"/>
      <circle cx="5.3" cy="4.6" r="0.85" fill="currentColor"/>
      <path d="M8 11.5V6.5h1.5v0.7c.3-.4.8-.8 1.6-.8 1.2 0 1.9.7 1.9 2V11.5h-1.6V9c0-.6-.25-1-.85-1S9.6 8.4 9.6 9v2.5H8z" fill="currentColor"/>
    </svg>
  );

  const socialBtn = {
    width: 34, height: 34, borderRadius: 99,
    background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.08)',
    color: 'rgba(255,255,255,0.85)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer',
    transition: 'all .2s',
  };

  // ── MOBILE ────────────────────────────────────────────────────
  if (mobile) {
    return (
      <footer ref={ref} style={{
        background: TOKENS.ink,
        color: '#fff',
        padding: '60px 22px 32px',
        position: 'relative',
      }}>
        {/* Big wordmark watermark */}
        <div aria-hidden style={{
          position: 'absolute', left: 0, right: 0, bottom: -18,
          textAlign: 'center',
          fontFamily: FONTS.display, fontWeight: 700,
          fontSize: 96, letterSpacing: -4, lineHeight: 1,
          color: 'rgba(255,255,255,0.03)',
          pointerEvents: 'none', whiteSpace: 'nowrap', overflow: 'hidden',
        }}>Moneyshape</div>

        <div style={{ position: 'relative', ...reveal(0) }}>
          {/* Brand */}
          <div style={{ marginBottom: 32 }}>
            <MSLogo color="#fff"/>
            <div style={{
              fontFamily: FONTS.sans, fontSize: 13,
              color: 'rgba(255,255,255,0.5)',
              marginTop: 8,
            }}>Validez avant d'acheter.</div>
          </div>

          {/* Columns */}
          {nav.map((col, i) => (
            <div key={i} style={{ marginBottom: 28, ...reveal(1 + i) }}>
              <div style={headingStyle}>{col.h}</div>
              {col.links.map(renderLink)}
              {col.social && (
                <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                  <a href="https://www.instagram.com/moneyshape_" style={socialBtn} aria-label="Instagram">{IconInsta}</a>
                  <a href="https://www.linkedin.com/company/moneyshape/" style={socialBtn} aria-label="LinkedIn">{IconLinkedIn}</a>
                </div>
              )}
            </div>
          ))}

          {/* Separator */}
          <div style={{ height: 1, background: 'rgba(255,255,255,0.08)', margin: '24px 0 22px' }}/>

          <div style={{
            fontFamily: FONTS.mono, fontSize: 10,
            color: 'rgba(255,255,255,0.35)',
            letterSpacing: 0.4,
          }}>
            © 2025–2026 Moneyshape. Tous droits réservés.
          </div>
        </div>
      </footer>
    );
  }

  // ── DESKTOP ───────────────────────────────────────────────────
  return (
    <footer ref={ref} style={{
      background: TOKENS.ink,
      color: '#fff',
      padding: '90px 56px 40px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Big wordmark watermark behind */}
      <div aria-hidden style={{
        position: 'absolute', left: 0, right: 0, bottom: -40,
        textAlign: 'center',
        fontFamily: FONTS.display, fontWeight: 700,
        fontSize: 280, letterSpacing: -10, lineHeight: 1,
        color: 'rgba(255,255,255,0.03)',
        pointerEvents: 'none', whiteSpace: 'nowrap',
        userSelect: 'none',
      }}>Moneyshape</div>

      {/* faint green glow top-left */}
      <div aria-hidden style={{
        position: 'absolute', top: -120, left: -100, width: 480, height: 260,
        background: 'radial-gradient(ellipse at center, rgba(200,255,46,0.09), transparent 65%)',
        pointerEvents: 'none',
      }}/>

      <div style={{
        maxWidth: 1200, margin: '0 auto',
        position: 'relative',
      }}>
        {/* Top grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 56,
          paddingBottom: 64,
          ...reveal(0),
        }}>
          {/* Brand column */}
          <div>
            <MSLogo color="#fff"/>
            <p style={{
              fontFamily: FONTS.sans, fontSize: 14,
              color: 'rgba(255,255,255,0.5)',
              margin: '14px 0 0',
              maxWidth: 240, lineHeight: 1.5,
            }}>
              Validez avant d'acheter.
            </p>
          </div>

          {/* Product column */}
          <div style={{ ...reveal(1) }}>
            <div style={headingStyle}>Produit</div>
            {nav[0].links.map(renderLink)}
          </div>

          {/* Contact column */}
          <div style={{ ...reveal(2) }}>
            <div style={headingStyle}>Contact</div>
            {nav[1].links.map(renderLink)}
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              <a href="https://www.instagram.com/moneyshape_" style={socialBtn} aria-label="Instagram">{IconInsta}</a>
              <a href="https://www.linkedin.com/company/moneyshape/" style={socialBtn} aria-label="LinkedIn">{IconLinkedIn}</a>
            </div>
          </div>

          {/* Legal column */}
          <div style={{ ...reveal(3) }}>
            <div style={headingStyle}>Légal</div>
            {nav[2].links.map(renderLink)}
          </div>
        </div>

        {/* Separator */}
        <div style={{ height: 1, background: 'rgba(255,255,255,0.08)' }}/>

        {/* Bottom bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 26,
          ...reveal(4),
        }}>
          <div style={{
            fontFamily: FONTS.mono, fontSize: 11,
            color: 'rgba(255,255,255,0.35)',
            letterSpacing: 0.4,
          }}>
            © 2025–2026 Moneyshape. Tous droits réservés.
          </div>
          <div style={{
            fontFamily: FONTS.mono, fontSize: 11,
            color: 'rgba(255,255,255,0.3)',
            letterSpacing: 1.5, textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: TOKENS.green }}/>
            Fait avec soin à Paris
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;