/* global React */
function LandingEngine() {
  const [name, setName] = React.useState('paula');
  const slug = (name || 'tunombre').toLowerCase().replace(/[^a-z0-9]/g, '').slice(0, 16);
  const Icons = window.Icons || {};

  return (
    <section id="how" className="section section--paper2" style={{paddingTop: 90, paddingBottom: 100, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container">
        <div className="reveal" style={{textAlign:'center', maxWidth:760, margin:'0 auto'}}>
          <span className="eyebrow">Página web personal</span>
          <h2 className="display display-lg" style={{marginTop: 16}}>
            Una página web por persona.<br/>
            <span style={{color:'var(--brand-500)'}}>Lista en minutos.</span>
          </h2>
          <p style={{marginTop: 18, fontSize: 19, color:'var(--ink-mute)', textWrap:'pretty'}}>
            Tu líder diseña la página de la marca una sola vez. BOBAX la copia
            automáticamente para cada vendedor con su nombre, su teléfono y sus clientes.
            Tú solo compartes tu enlace.
          </p>
        </div>

        {/* Big visual showcase — 3 phones side by side */}
        <div className="reveal" style={{marginTop: 56, position:'relative'}}>
          <PhoneTrio />
        </div>

        {/* Interactive try-it strip */}
        <div className="reveal" style={{
          marginTop: 64,
          background:'linear-gradient(180deg, #0B0816, #1a1233)', color:'white',
          borderRadius: 22, padding: '32px 36px',
          display:'grid', gridTemplateColumns:'1fr 1fr', gap: 36, alignItems:'center',
          position:'relative', overflow:'hidden',
        }} id="try-it">
          <div aria-hidden="true" style={{position:'absolute', top:-100, right:-50, width:380, height:380, borderRadius:'50%', background:'radial-gradient(circle, color-mix(in oklab, var(--brand-500) 40%, transparent), transparent 70%)', filter:'blur(50px)'}} />
          <div style={{position:'relative'}}>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 11, color:'var(--brand-300)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:600}}>
              Pruébalo
            </div>
            <div className="display display-md" style={{color:'white', marginTop:8}}>
              Escribe tu nombre. Mira tu página.
            </div>
            <p style={{color:'rgba(255,255,255,0.65)', marginTop:8, fontSize: 15}}>
              Así de simple. Sin instalar nada. Sin saber tecnología.
            </p>
            <label style={{display:'block', marginTop: 22}}>
              <span style={{fontSize:11, color:'rgba(255,255,255,0.55)', letterSpacing:'0.04em', textTransform:'uppercase', fontFamily:'var(--f-mono)'}}>Tu nombre</span>
              <input type="text" value={name} onChange={(e)=>setName(e.target.value)}
                style={{
                  width:'100%', marginTop: 8,
                  background:'rgba(0,0,0,0.4)', border:'1px solid rgba(255,255,255,0.12)',
                  borderRadius: 10, padding:'12px 14px', color:'white',
                  fontFamily:'var(--f-body)', fontSize: 16, outline:'none',
                }}
              />
            </label>
          </div>
          <div style={{position:'relative'}}>
            <div style={{
              padding: 18, borderRadius: 14,
              background:'rgba(0,0,0,0.4)', border:'1px solid rgba(255,255,255,0.1)',
            }}>
              <div style={{fontFamily:'var(--f-mono)', fontSize:10, color:'rgba(255,255,255,0.45)', letterSpacing:'0.12em', textTransform:'uppercase'}}>Tu enlace</div>
              <div style={{fontFamily:'var(--f-mono)', fontSize:18, color:'white', marginTop:6, wordBreak:'break-all', lineHeight:1.3}}>
                <span style={{color:'rgba(255,255,255,0.45)'}}>https://</span>
                <span style={{color:'var(--brand-300)', fontWeight:600}}>{slug || 'tunombre'}</span>
                <span style={{color:'rgba(255,255,255,0.75)'}}>.tumarca.com</span>
              </div>
              <div style={{marginTop:12, display:'flex', alignItems:'center', gap:8, fontSize:11, color:'var(--emerald-400)', fontFamily:'var(--f-mono)'}}>
                <span style={{width:6,height:6,borderRadius:999,background:'var(--emerald-400)'}} />
                LISTA · puedes compartirla en redes
              </div>
            </div>
            <div style={{marginTop:16, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
              {[
                ['Tu nombre', cap(name)],
                ['Tu WhatsApp', 'el tuyo'],
                ['Tus clientes', 'solo tuyos'],
              ].map(([k,v], i) => (
                <div key={i} style={{padding:'10px 12px', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:10}}>
                  <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', fontFamily:'var(--f-mono)', letterSpacing:'0.06em', textTransform:'uppercase'}}>{k}</div>
                  <div style={{fontSize:13, color:'white', fontWeight:500, marginTop:3, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Three step strip */}
        <div className="reveal-stagger reveal" style={{marginTop: 56, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 18}} id="three-step">
          {[
            {n:'01', i: Icons.Edit, t:'Tu líder diseña la página', s:'Una sola vez. Con la marca, los productos, el copy de la red.'},
            {n:'02', i: Icons.Refresh, t:'BOBAX la copia para todos', s:'Cada vendedor recibe la suya con su nombre y su WhatsApp.'},
            {n:'03', i: Icons.Trending, t:'Tú la compartes y vendes', s:'En redes, en tu bio, por WhatsApp. Tus clientes son tuyos.'},
          ].map((s, i) => (
            <div key={i} style={{
              padding: 26, background:'white', borderRadius: 18,
              border:'1px solid var(--paper-line)',
            }}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <span style={{
                  width:42, height:42, borderRadius:12,
                  background:'rgba(124,58,237,0.1)', color:'var(--brand-600)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                }}>{s.i && <s.i size={20} />}</span>
                <span style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--ink-mute)', letterSpacing:'0.14em'}}>{s.n}</span>
              </div>
              <div style={{fontFamily:'var(--f-display)', fontSize:20, fontWeight:600, letterSpacing:'-0.01em', marginTop:16}}>{s.t}</div>
              <div style={{fontSize:14.5, color:'var(--ink-mute)', marginTop:6, lineHeight:1.5}}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #try-it { grid-template-columns: 1fr !important; gap: 28px !important; padding: 28px !important; }
          #three-step { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function cap(s){ return s ? s[0].toUpperCase() + s.slice(1) : ''; }

function PhoneTrio() {
  const Icons = window.Icons || {};
  const items = [
    { name:'Paula', sub:'paula.tumarca.com', tilt:-6, grad:'linear-gradient(135deg, #6B21D9, #E11D74)', side: true },
    { name:'Luis',  sub:'luis.tumarca.com',  tilt: 0, grad:'linear-gradient(135deg, #7C3AED, #34D29B)', big: true },
    { name:'Sofía', sub:'sofia.tumarca.com', tilt: 6, grad:'linear-gradient(135deg, #5C72FF, #B49AFB)', side: true },
  ];

  return (
    <div className="phone-trio" style={{display:'flex', justifyContent:'center', alignItems:'flex-end', gap:18, perspective:'1200px', flexWrap:'nowrap'}}>
      {items.map((it, i) => (
        <MiniPhone key={i} {...it} index={i} />
      ))}
      <style>{`
        @media (max-width: 720px) {
          .phone-trio .mini-phone.side { display: none !important; }
          .phone-trio .mini-phone.big { transform: rotate(0deg) translateY(0) !important; }
        }
      `}</style>
    </div>
  );
}

function MiniPhone({ name, sub, tilt, grad, big, side, index }) {
  const Icons = window.Icons || {};
  const scale = big ? 1 : 0.86;
  const w = 230 * scale, h = 460 * scale;
  return (
    <div className={`mini-phone reveal ${big ? 'big' : ''} ${side ? 'side' : ''}`} style={{
      width: w, height: h, borderRadius: 32 * scale, padding: 10,
      background:'linear-gradient(180deg, #2a2740, #0a0816)',
      border:'1px solid rgba(255,255,255,0.06)',
      boxShadow:'0 50px 100px -30px rgba(11,8,22,0.4)',
      transform: `rotate(${tilt}deg) translateY(${big ? -10 : 0}px)`,
      transition: 'transform .3s ease',
      position:'relative',
      flexShrink: 0,
    }}>
      <div style={{position:'absolute', top:13, left:'50%', transform:'translateX(-50%)', width:60, height:16, borderRadius:999, background:'#000', zIndex:3}} />
      <div style={{width:'100%', height:'100%', borderRadius: 24 * scale, overflow:'hidden', background:'#0B0816', position:'relative'}}>
        <div style={{
          height: big ? 150 : 130, position:'relative',
          background: grad,
        }}>
          <div style={{position:'absolute', inset:'30% 25%', borderRadius:14, background:'rgba(255,255,255,0.15)'}} />
          <div style={{position:'absolute', top:14, left:12, fontFamily:'var(--f-mono)', fontSize:8, color:'rgba(255,255,255,0.65)', letterSpacing:'0.12em', textTransform:'uppercase'}}>tu marca</div>
        </div>
        <div style={{padding:'16px 14px', color:'white'}}>
          <div style={{fontFamily:'var(--f-display)', fontSize: big ? 18 : 15, fontWeight:600, letterSpacing:'-0.01em', lineHeight:1.1}}>
            Conoce con <span style={{color:'var(--brand-300)'}}>{name}</span>
          </div>
          <div style={{fontSize: big ? 11 : 10, fontFamily:'var(--f-mono)', color:'rgba(255,255,255,0.5)', marginTop:6}}>{sub}</div>
          <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:6}}>
            <div style={{height: big ? 28 : 24, background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:6}} />
            <div style={{height: big ? 28 : 24, background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:6}} />
            <div style={{height: big ? 30 : 26, background:'var(--brand-500)', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', fontSize: big ? 11 : 10, fontWeight:600, gap:5}}>
              {Icons.Whatsapp && <Icons.Whatsapp size={big ? 12 : 11} />} Hablar
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LandingEngine = LandingEngine;