// Landing — brief intro to the product before login
// Minimalist: brand, Mariana intro, CTA

const Landing = ({ palette, onGoLogin, onHowItWorks, onTemplates, onPricing }) => {
  const [marianaMsg, setMarianaMsg] = React.useState(0);
  const messages = [
    'Hola, soy Mariana. Describe tu evento y yo diseño la invitación.',
    '¿Boda, cumpleaños, XV años? Tengo plantillas listas.',
    'También escribo el copy. Te ahorro horas.',
  ];

  React.useEffect(() => {
    const t = setInterval(() => setMarianaMsg(m => (m + 1) % messages.length), 3400);
    return () => clearInterval(t);
  }, []);

  return (
    <div style={{
      minHeight: '100vh',
      background: palette.heroBg,
      color: palette.textOnHero,
      fontFamily: palette.fontBody,
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Texture */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(${palette.textOnHeroMuted} 1px, transparent 1px)`,
        backgroundSize: '28px 28px',
        opacity: 0.08,
        pointerEvents: 'none',
      }}/>

      {/* Sparkle field */}
      <SparkleField palette={palette} count={18} intensity={0.7}/>

      {/* Nav */}
      <nav style={{
        position: 'relative',
        padding: '28px 48px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <BrandLogo palette={palette} size={16} onDark/>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center', fontSize: 13 }}>
          <a href="#" onClick={e => { e.preventDefault(); if (onHowItWorks) onHowItWorks(); }} style={{ color: palette.textOnHeroMuted, textDecoration: 'none' }}>Cómo funciona</a>
          <a href="#" onClick={e => { e.preventDefault(); if (onTemplates) onTemplates(); }} style={{ color: palette.textOnHeroMuted, textDecoration: 'none' }}>Plantillas</a>
          <a href="#" onClick={e => { e.preventDefault(); if (onPricing) onPricing(); }} style={{ color: palette.textOnHeroMuted, textDecoration: 'none' }}>Precios</a>
          <button onClick={onGoLogin} style={{
            background: palette.accent,
            color: palette.heroBgDeep,
            border: 'none',
            padding: '10px 22px',
            borderRadius: 999,
            fontSize: 13,
            fontWeight: 600,
            cursor: 'pointer',
            fontFamily: palette.fontBody,
          }}>
            Iniciar sesión
          </button>
        </div>
      </nav>

      {/* Hero */}
      <div style={{
        position: 'relative',
        flex: 1,
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 60,
        padding: '40px 80px 60px',
        alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px',
            background: palette.borderHero,
            border: `1px solid ${palette.borderHero}`,
            borderRadius: 999,
            fontSize: 11,
            letterSpacing: '0.2em',
            color: palette.textOnHeroMuted,
            marginBottom: 32,
            fontFamily: palette.fontMono,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', boxShadow: '0 0 8px #4ade80' }}/>
            MARIANA · ASISTENTE IA
          </div>

          <h1 style={{
            fontFamily: palette.fontDisplay,
            fontSize: 'clamp(48px, 6vw, 84px)',
            lineHeight: 0.95,
            letterSpacing: palette.trackingHero,
            fontWeight: palette.displayWeight,
            margin: '0 0 24px',
            color: palette.textOnHero,
          }}>
            Invitaciones<br/>
            <ShimmerText palette={palette} style={{ fontStyle: 'italic' }}>que se sienten</ShimmerText><br/>
            tuyas.
          </h1>

          <p style={{
            fontSize: 17,
            lineHeight: 1.5,
            color: palette.textOnHeroMuted,
            maxWidth: 440,
            margin: '0 0 40px',
          }}>
            Describe tu evento en una frase. Mariana diseña, escribe y publica tu invitación virtual en minutos.
          </p>

          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <button onClick={onGoLogin} style={{
              background: palette.accent,
              color: palette.heroBgDeep,
              border: 'none',
              padding: '16px 28px',
              borderRadius: 999,
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
              fontFamily: palette.fontBody,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              Crear mi invitación
              <Icon name="arrow-right" size={16} stroke={palette.heroBgDeep}/>
            </button>
            <a href="#" onClick={e => { e.preventDefault(); onGoLogin(); }} style={{
              color: palette.textOnHero,
              fontSize: 14,
              textDecoration: 'underline',
              textUnderlineOffset: 4,
              textDecorationColor: palette.textOnHeroMuted,
            }}>
              Ya tengo cuenta
            </a>
          </div>

          {/* Stats row */}
          <div style={{
            marginTop: 60,
            display: 'flex', gap: 48,
            paddingTop: 28,
            borderTop: `1px solid ${palette.borderHero}`,
          }}>
            {[
              { n: '2,840+', l: 'invitaciones creadas' },
              { n: '47seg', l: 'tiempo promedio' },
              { n: '4.9★', l: 'calificación' },
            ].map((s, i) => (
              <div key={i}>
                <div style={{
                  fontFamily: palette.fontDisplay,
                  fontSize: 32,
                  fontWeight: palette.displayWeight,
                  color: palette.textOnHero,
                  letterSpacing: palette.trackingHero,
                }}>{s.n}</div>
                <div style={{ fontSize: 11, color: palette.textOnHeroMuted, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: visual + Mariana chat bubble */}
        <div style={{ position: 'relative' }}>
          <HeroVisual palette={palette}/>

          {/* Mariana bubble */}
          <div style={{
            position: 'absolute',
            bottom: -24, left: -24,
            background: palette.surface,
            color: palette.text,
            padding: '14px 18px',
            borderRadius: 16,
            borderTopLeftRadius: 4,
            maxWidth: 280,
            boxShadow: '0 16px 36px rgba(0,0,0,0.25)',
            display: 'flex', gap: 12, alignItems: 'flex-start',
            border: `1px solid ${palette.border}`,
          }}>
          <div style={{
            flexShrink: 0,
          }}>
            <MarianaOrb palette={palette} size={36}/>
          </div>
            <div style={{ fontSize: 13, lineHeight: 1.45 }}>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.12em', color: palette.textMuted, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', boxShadow: '0 0 6px #4ade80' }}/>
                MARIANA
              </div>
              <div key={marianaMsg} style={{ animation: 'fadeIn 0.4s ease' }}>
                {messages[marianaMsg]}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Landing = Landing;