/* global React */
function ActivationFlow() {
  const [step, setStep] = React.useState(0);
  const Icons = window.Icons || {};
  const totalSteps = STEPS.length;

  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % totalSteps), 3400);
    return () => clearInterval(id);
  }, [totalSteps]);

  return (
    <section id="flow" className="section section--dark" style={{paddingTop:96, paddingBottom:100, overflow:'hidden', position:'relative'}}>
      <div aria-hidden="true" style={{
        position:'absolute', inset:0,
        background:'radial-gradient(800px 500px at 20% 80%, color-mix(in oklab, var(--brand-700) 35%, transparent), transparent 60%)',
        opacity:0.6,
      }} />

      <div className="container" style={{position:'relative'}}>
        <div className="reveal" style={{textAlign:'center', maxWidth:780, margin:'0 auto'}}>
          <span className="eyebrow">Así empiezas</span>
          <h2 className="display display-lg" style={{marginTop: 16, color:'white'}}>
            De un mensaje a vender,<br/>
            <span style={{color:'var(--brand-300)'}}>en minutos.</span>
          </h2>
          <p style={{marginTop: 18, fontSize: 19, color:'rgba(255,255,255,0.7)', textWrap:'pretty'}}>
            Esto es lo que pasa cuando tu líder te suma a la red.
          </p>
        </div>

        {/* Step pills */}
        <div className="reveal" style={{marginTop: 40, display:'flex', justifyContent:'center', flexWrap:'wrap', gap:8}}>
          {STEPS.map((s, i) => (
            <button key={i} onClick={() => setStep(i)} style={{
              padding:'10px 16px', borderRadius:999,
              border: '1px solid ' + (step === i ? 'var(--brand-400)' : 'rgba(255,255,255,0.12)'),
              background: step === i ? 'rgba(124,58,237,0.2)' : 'rgba(255,255,255,0.03)',
              color: step === i ? 'white' : 'rgba(255,255,255,0.6)',
              fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.06em',
              transition:'all .2s ease',
            }}>
              <span style={{color:'var(--brand-300)', marginRight:8}}>0{i+1}</span>
              {s.title}
            </button>
          ))}
        </div>

        <div className="reveal" style={{marginTop: 56, display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap: 48, alignItems:'center'}} id="flow-grid">
          <PhoneMock step={step} />
          <StepDetail step={step} totalSteps={totalSteps} />
        </div>

        <div style={{marginTop: 36, maxWidth: 700, margin:'36px auto 0'}}>
          <div style={{height: 4, background:'rgba(255,255,255,0.08)', borderRadius: 999, overflow:'hidden'}}>
            <div style={{
              height:'100%',
              width: `${((step + 1) / totalSteps) * 100}%`,
              background:'linear-gradient(90deg, var(--brand-400), var(--brand-500))',
              transition:'width .5s ease', borderRadius: 999,
            }} />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #flow-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

const STEPS = [
  {
    title:'Recibes un WhatsApp',
    desc:'Tu líder te suma a la red. Te llega un mensaje con un enlace para activar tu cuenta. Sin descargar nada.',
    icon: 'Whatsapp',
  },
  {
    title:'Confirmas tus datos',
    desc:'Pones tu nombre, tu WhatsApp y eliges una contraseña. Eso es todo lo que necesitas.',
    icon: 'Edit',
  },
  {
    title:'Tu página se crea sola',
    desc:'En segundos tienes tu propio enlace listo: tunombre.tumarca.com. Igual a la del líder, pero con tu información.',
    icon: 'Globe',
  },
  {
    title:'Empiezas a vender',
    desc:'Compártela en redes, mándala por WhatsApp. Cada cliente que llegue es tuyo y aparece en tu portal.',
    icon: 'Trending',
  },
];

function PhoneMock({ step }) {
  return (
    <div style={{display:'flex', justifyContent:'center'}}>
      <div style={{
        position:'relative',
        width: 290, height: 590,
        borderRadius: 44, padding: 14,
        background:'linear-gradient(180deg, #2a2740, #0a0816)',
        border:'1px solid rgba(255,255,255,0.08)',
        boxShadow:'0 60px 120px -40px rgba(0,0,0,0.7), 0 0 60px 0 rgba(124,58,237,0.15)',
      }}>
        <div style={{
          position:'absolute', top: 18, left:'50%', transform:'translateX(-50%)',
          width: 110, height: 28, borderRadius: 999, background:'#000', zIndex:2,
        }} />
        <div style={{
          width:'100%', height:'100%', borderRadius: 32, overflow:'hidden',
          background:'#0B0816', position:'relative',
        }}>
          <PhoneScreen step={step} />
        </div>
      </div>
    </div>
  );
}

function PhoneScreen({ step }) {
  const Icons = window.Icons || {};

  if (step === 0) {
    return (
      <div style={{height:'100%', background:'#0a141d', color:'white', display:'flex', flexDirection:'column'}}>
        <div style={{padding:'40px 16px 12px', background:'#1f2c33', display:'flex', alignItems:'center', gap:10, borderBottom:'1px solid rgba(255,255,255,0.05)'}}>
          <div style={{width:34, height:34, borderRadius:999, background:'var(--brand-500)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, fontWeight:600}}>K</div>
          <div>
            <div style={{fontSize:13, fontWeight:600}}>K-Beauty LATAM</div>
            <div style={{fontSize:10, color:'rgba(255,255,255,0.55)'}}>en línea</div>
          </div>
        </div>
        <div style={{flex:1, padding: 16, display:'flex', flexDirection:'column', justifyContent:'flex-end', gap: 10, background:'#0a141d'}}>
          <div style={{alignSelf:'flex-start', background:'#202c33', padding:'10px 12px', borderRadius:'12px 12px 12px 4px', maxWidth:'85%', fontSize:13, lineHeight:1.4}}>
            ¡Hola Paula! 👋<br/>
            Bienvenida al equipo de K-Beauty LATAM.<br/><br/>
            Activa tu cuenta para tener tu propia página:<br/>
            <span style={{color:'#B49AFB', textDecoration:'underline'}}>tumarca.com/activar/9k2x</span>
            <div style={{fontSize:9, color:'rgba(255,255,255,0.45)', marginTop:6, textAlign:'right'}}>10:23 ✓✓</div>
          </div>
        </div>
      </div>
    );
  }

  if (step === 1) {
    return (
      <div style={{height:'100%', background:'#0B0816', color:'white', padding: '50px 18px 18px', overflow:'hidden'}}>
        <div style={{fontFamily:'var(--f-mono)', fontSize: 9, color:'rgba(255,255,255,0.4)', letterSpacing:'0.14em', textTransform:'uppercase'}}>Activar cuenta</div>
        <div style={{fontFamily:'var(--f-display)', fontSize: 22, fontWeight:600, marginTop: 10, letterSpacing:'-0.01em'}}>
          ¡Bienvenida<br/>Paula!
        </div>
        <div style={{fontSize:11, color:'rgba(255,255,255,0.6)', marginTop:10}}>Solo necesitamos tus datos para crear tu página.</div>

        <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:10}}>
          <Input label="Tu nombre" value="Paula G." />
          <Input label="Tu WhatsApp" value="🇲🇽 +52 442 555 0192" />
          <Input label="Contraseña" value="••••••••" />
        </div>
        <div style={{marginTop:20, height:42, background:'var(--brand-500)', borderRadius:10, display:'flex', alignItems:'center', justifyContent:'center', fontSize:13, fontWeight:600, gap:6}}>
          Crear mi página {Icons.ArrowRight && <Icons.ArrowRight size={14} />}
        </div>
      </div>
    );
  }

  if (step === 2) {
    return (
      <div style={{height:'100%', background:'#0B0816', color:'white', padding: '50px 16px 16px', display:'flex', flexDirection:'column', alignItems:'center'}}>
        <div style={{marginTop:50, position:'relative'}}>
          <div style={{width:96, height:96, borderRadius:999, background:'rgba(124,58,237,0.18)', border:'2px solid var(--brand-400)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--brand-300)', animation:'spin-slow 3s linear infinite'}}>
            {Icons.Globe && <Icons.Globe size={42} />}
          </div>
          <div style={{position:'absolute', inset:-12, borderRadius:999, border:'1px solid rgba(124,58,237,0.3)', animation:'pulse-ring 2s ease infinite'}} />
        </div>
        <div style={{fontFamily:'var(--f-display)', fontSize:22, fontWeight:600, marginTop:30, textAlign:'center', letterSpacing:'-0.01em'}}>Tu página está lista</div>
        <div style={{fontFamily:'var(--f-mono)', fontSize:13, color:'var(--brand-300)', marginTop:8, textAlign:'center'}}>paula.kbeauty-latam.com</div>
        <div style={{marginTop:18, padding:'8px 12px', background:'rgba(16,185,129,0.15)', border:'1px solid rgba(52,210,155,0.3)', borderRadius:8, color:'var(--emerald-400)', fontSize:11, fontFamily:'var(--f-mono)', letterSpacing:'0.08em', display:'flex', alignItems:'center', gap:6}}>
          <span style={{width:6, height:6, borderRadius:999, background:'var(--emerald-400)'}} /> EN VIVO
        </div>
        <style>{`
          @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
          @keyframes pulse-ring { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 0.2; } }
        `}</style>
      </div>
    );
  }

  // step 3 - portal
  return (
    <div style={{height:'100%', background:'#0B0816', color:'white', padding: '50px 16px 16px', display:'flex', flexDirection:'column'}}>
      <div style={{fontFamily:'var(--f-mono)', fontSize:9, color:'rgba(255,255,255,0.45)', letterSpacing:'0.14em', textTransform:'uppercase'}}>Tu portal · Paula</div>
      <div style={{fontFamily:'var(--f-display)', fontSize:20, fontWeight:600, marginTop:6, letterSpacing:'-0.01em'}}>¡Estás vendiendo!</div>

      <div style={{marginTop:14, padding:'10px 12px', background:'rgba(124,58,237,0.15)', border:'1px solid rgba(124,58,237,0.3)', borderRadius:8, fontFamily:'var(--f-mono)', fontSize:11}}>
        paula.kbeauty-latam.com
      </div>

      <div style={{marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
        {[['Clientes', '12', 'var(--brand-300)'], ['Conversaciones', '47', 'var(--emerald-400)']].map(([k,v,c],i)=>(
          <div key={i} style={{padding:'10px 12px', background:'rgba(255,255,255,0.04)', borderRadius:8, border:'1px solid rgba(255,255,255,0.06)'}}>
            <div style={{fontSize:9, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)', letterSpacing:'0.06em', textTransform:'uppercase'}}>{k}</div>
            <div style={{fontFamily:'var(--f-display)', fontSize:20, fontWeight:600, color:c, marginTop:3, letterSpacing:'-0.01em'}}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{marginTop:14, fontSize:10, fontFamily:'var(--f-mono)', color:'rgba(255,255,255,0.5)', letterSpacing:'0.08em', textTransform:'uppercase'}}>Últimos</div>
      <div style={{marginTop:8, display:'flex', flexDirection:'column', gap:6}}>
        {[['María L.','5m'], ['Andrea P.','1h'], ['Iván C.','3h']].map(([n,t],i)=>(
          <div key={i} style={{display:'flex', alignItems:'center', gap:8, fontSize:11, padding:'5px 8px', background:'rgba(255,255,255,0.03)', borderRadius:6}}>
            <span style={{width:18,height:18,borderRadius:999,background:'rgba(124,58,237,0.18)', color:'var(--brand-300)', display:'flex',alignItems:'center',justifyContent:'center'}}>{Icons.User && <Icons.User size={10}/>}</span>
            <span style={{flex:1}}>{n}</span>
            <span style={{fontFamily:'var(--f-mono)', color:'rgba(255,255,255,0.45)', fontSize:9}}>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Input({ label, value }) {
  return (
    <div style={{padding:'10px 12px', background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:8, fontSize:12}}>
      <div style={{color:'rgba(255,255,255,0.4)', fontSize:9, fontFamily:'var(--f-mono)', letterSpacing:'0.08em', textTransform:'uppercase'}}>{label}</div>
      <div style={{marginTop:2}}>{value}</div>
    </div>
  );
}

function StepDetail({ step, totalSteps }) {
  const s = STEPS[step];
  const Icons = window.Icons || {};
  const I = Icons[s.icon];
  return (
    <div>
      <div style={{display:'flex', alignItems:'center', gap: 14}}>
        <div style={{
          width: 56, height: 56, borderRadius: 16,
          background:'rgba(124,58,237,0.18)', border:'1px solid rgba(124,58,237,0.3)',
          color:'var(--brand-300)',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>{I && <I size={26} />}</div>
        <div>
          <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--brand-300)', letterSpacing:'0.14em', textTransform:'uppercase'}}>
            Paso {step + 1} de {totalSteps}
          </div>
          <div className="display display-md" style={{color:'white', marginTop:2}}>{s.title}</div>
        </div>
      </div>
      <p style={{marginTop: 22, fontSize: 17, color:'rgba(255,255,255,0.75)', lineHeight: 1.55, maxWidth: 520}}>
        {s.desc}
      </p>
    </div>
  );
}

window.ActivationFlow = ActivationFlow;