/* CUBO — Main App: sections compose into landing */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const MANIFESTO = [
{ num: '01', t: <>Desarrollo</>, d: 'Cada equipo es un punto de partida para construir mejor. Lo que vendemos potencia lo que tú creas.' },
{ num: '02', t: <>Función</>, d: 'Sin opciones de sobra. Sin specs irrelevantes. Cada componente está pensado para un uso real, no para un catálogo.' },
{ num: '03', t: <>Innovación</>, d: 'Innovar no es agregar features: es eliminar fricción. Te entregamos la decisión correcta, no diez similares.' }];



const PROFILES_LIST = [
{ name: 'Essential', desc: 'Trabajo diario. Oficina, navegación.', price: 'S/. 2,200 — 3,200', audiences: ['personal', 'business'] },
{ name: 'Performance', desc: 'Multitarea constante. Velocidad de procesamiento.', price: 'S/. 3,200 — 4,800', audiences: ['personal', 'business'] },
{ name: 'Gamer', desc: 'Gráficos ultrarrealistas. Potencia gráfica seria.', price: 'S/. 3,600 — 8,500', audiences: ['personal'] },
{ name: 'Designer', desc: 'Diseño visual y contenido. Color preciso, GPU pro.', price: 'S/. 3,600 — 8,500', audiences: ['personal', 'business'] },
{ name: 'Programmer', desc: 'Desarrollo, compilación, trabajo técnico.', price: 'S/. 3,500 — 8,500', audiences: ['personal', 'business'] }];


const TEAM = [
{ name: 'Luis Fernando Piñon', role: 'Head of Strategy',       bio: 'Define la visión y la dirección a largo plazo de CUBO.',     initials: 'LP', photo: 'assets/team/luis-fernando.jpeg' },
{ name: 'Patricia Esparza',     role: 'Growth & Content',       bio: 'Voz, narrativa y comunidad alrededor de la marca.',            initials: 'PE', photo: 'assets/team/patricia-esparza.jpeg' },
{ name: 'Percy Quezada',        role: 'Tech Lead',              bio: 'Decisiones técnicas y arquitectura detrás del producto.',      initials: 'PQ', photo: 'assets/team/percy-quezada.jpeg' },
{ name: 'Manuel Aranda',        role: 'Automation Engineer',    bio: 'Procesos limpios y operación sin fricción.',                   initials: 'MA', photo: 'assets/team/manuel-aranda.jpeg' },
{ name: 'Marcelo Quezada',      role: 'Financial Strategy',     bio: 'Decisiones financieras que sostienen el crecimiento.',         initials: 'MQ', photo: 'assets/team/marcelo-quezada.jpeg' },
{ name: 'Victor Peña',          role: 'Business Development',   bio: 'Alianzas comerciales y nuevos mercados para CUBO.',            initials: 'VP', photo: 'assets/team/victor-pena.jpeg' }];


function useReveal() {
  useEffectA(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');});
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function Nav() {
  const [open, setOpen] = useStateA(false);
  const close = () => setOpen(false);
  return (
    <nav className={`nav ${open ? 'is-open' : ''}`}>
      <a className="brand" href="#top" onClick={close}>
        <CuboMark />
        <span>CUBO</span>
      </a>
      <ul>
        <li style={{ fontSize: "16px" }}><a href="#quiz" onClick={close}>Encuentra tu equipo</a></li>
        <li style={{ fontSize: "16px" }}><a href="#soluciones" onClick={close}>Soluciones</a></li>
        <li style={{ fontSize: "16px" }}><a href="#equipo" onClick={close}>Equipo</a></li>
      </ul>
      <a className="cta" href="https://wa.me/51920768860?text=Hola%20solicito%20informaci%C3%B3n" target="_blank" rel="noopener" onClick={close}>
        <span className="dot"></span>
        WhatsApp
      </a>
      <button className="nav-toggle" aria-label="Menú" aria-expanded={open} onClick={() => setOpen(!open)}>
        <span></span><span></span><span></span>
      </button>
    </nav>);

}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-left">
        <h1>
          <span className="block">Piensa</span>
          <span className="block">en <span className="italic">forma.</span></span>
        </h1>
        <p className="lede">
          Equipamiento tecnológico pensado, no improvisado. Cinco perfiles claros, hardware Lenovo certificado y la decisión correcta — no diez similares.
        </p>
        <div className="hero-cluster">
          <a className="btn btn-primary" href="#quiz">
            Encuentra tu equipo →
          </a>
          <a className="btn btn-ghost" href="https://wa.me/51920768860?text=Hola%20solicito%20informaci%C3%B3n" target="_blank" rel="noopener">
            Hablar con un asesor
          </a>
        </div>
      </div>
      <div className="hero-right">
        <HeroCube />
      </div>
    </section>);

}

function Marquee() {
  const phrases =
  <>
      <span>Desarrollo</span>
      <span>Función</span>
      <span>Innovación</span>
      <span className="em">Piensa en forma.</span>
    </>;

  return (
    <div className="marquee">
      <div className="marquee-track">
        <div className="marquee-half" aria-hidden="false">{phrases}</div>
        <div className="marquee-half" aria-hidden="true">{phrases}</div>
      </div>
    </div>);

}

function Manifesto() {
  return (
    <section className="manifesto" id="pilares">
      <div className="section-eyebrow reveal">PILARES</div>
      <div className="manifesto-grid reveal">
        {MANIFESTO.map((m) =>
        <div className="manifesto-cell" key={m.num}>
            <span className="num">— {m.num}</span>
            <h3><em>{m.t}</em></h3>
            <p>{m.d}</p>
          </div>
        )}
      </div>
    </section>);

}

function Philosophy() {
  return (
    <section className="philosophy philosophy-bridge">
      <div className="philosophy-bridge-inner reveal">
        <h2 className="bridge-headline">
          Comprar tecnología<br />
          no debería <em>ser complicado.</em>
        </h2>
        <a className="bridge-cta" href="#quiz">
          <span>Encuentra tu equipo en 4 preguntas</span>
          <span className="bridge-arrow">↓</span>
        </a>
      </div>
    </section>);

}

function QuizSection() {
  return (
    <section className="quiz" id="quiz">
      <div className="section-eyebrow reveal">ENCUENTRA TU EQUIPO / 4 PREGUNTAS</div>
      <div className="reveal"><Quiz /></div>
    </section>);

}

function Solutions() {
  const [aud, setAud] = useStateA(null);
  const isBiz = aud === 'business';
  const visible = aud ? PROFILES_LIST.filter((p) => p.audiences.includes(aud)) : [];

  return (
    <section className="solutions" id="soluciones">
      <div className="solutions-head reveal">
        <h2>Soluciones según tu <em>forma</em> de trabajar.</h2>
        <p>No según catálogo. Personas y empresas tienen necesidades distintas. Te entregamos un camino claro para cada una.</p>
      </div>

      <div className="solutions-grid reveal">
        <div
          className={`solution-card sol-personal ${aud === 'personal' ? 'is-active' : ''}`}
          onClick={() => setAud('personal')}>
          <span className="tag">— PERSONAL / B2C</span>
          <h3>Personal</h3>
          <p>Profesionales, creativos, gamers y desarrolladores. Te asesoramos para encontrar el equipo que coincide con tu uso real — desde tu primera laptop hasta una estación profesional.</p>
          <ul>
            <li>Asesoría 1:1 por WhatsApp</li>
            <li>Recomendación según perfil</li>
            <li>Garantía oficial Lenovo</li>
            <li>Setup completo: equipo + periféricos</li>
          </ul>
          <span className="corner">→ 01 · 5 perfiles</span>
        </div>
        <div
          className={`solution-card sol-business ${aud === 'business' ? 'is-active' : ''}`}
          onClick={() => setAud('business')}>
          <span className="tag">— BUSINESS / B2B</span>
          <h3>Business</h3>
          <p>Para áreas de IT y compras corporativas. Volumen, estandarización y soporte directo. Equipamos a tu organización con hardware certificado y duradero, pensado para tus flujos.</p>
          <ul>
            <li>Cotizaciones por volumen</li>
            <li>Despliegue y onboarding</li>
            <li>Soporte y reposición priorizada</li>
            <li>Estandarización por perfil</li>
          </ul>
          <span className="corner">→ 02 · 4 perfiles</span>
        </div>
      </div>

      {!aud &&
      <div className="profiles-hint reveal">
          <span className="hint-arrow">↑</span>
          <span>Selecciona <strong>Personal</strong> o <strong>Business</strong> para ver los perfiles disponibles</span>
        </div>
      }

      {aud &&
      <div className="profiles-strip is-revealed" key={aud}>
          <div className="profiles-strip-head">
            <div className="section-eyebrow" style={{ paddingLeft: 0, margin: 0 }}>
              <span className="mono">{visible.length} PERFILES · {isBiz ? 'BUSINESS' : 'PERSONAL'}</span>
            </div>
            <div className="aud-toggle" role="tablist" aria-label="Audiencia">
              <button
              role="tab"
              aria-selected={!isBiz}
              className={`aud-opt ${!isBiz ? 'active' : ''}`}
              onClick={() => setAud('personal')}>
                <span className="aud-dot"></span>
                <span>Personal</span>
                <span className="aud-count mono">05</span>
              </button>
              <button
              role="tab"
              aria-selected={isBiz}
              className={`aud-opt ${isBiz ? 'active' : ''}`}
              onClick={() => setAud('business')}>
                <span className="aud-dot"></span>
                <span>Business</span>
                <span className="aud-count mono">04</span>
              </button>
            </div>
          </div>

          <div className={`profiles-list aud-${aud} count-${visible.length}`}>
            {visible.map((p, i) =>
          <div className="profile-item" key={p.name}>
                <div className="profile-top">
                  <span className="mono profile-idx">0{i + 1}</span>
                </div>
                <div className="name">{p.name}</div>
                <div className="desc">{p.desc}</div>
                <div className="price">{p.price}</div>
              </div>
          )}
          </div>
        </div>
      }
    </section>);
}

function Lenovo() {
  return (
    <section className="lenovo">
      <div className="lenovo-inner reveal">
        <div className="lenovo-left">
          <div className="eyebrow">— DISTRIBUIDOR OFICIAL</div>
          <h2>Hardware <em>certificado</em>, no genérico.</h2>
          <p>Ser distribuidores oficiales de Lenovo nos garantiza ofrecer equipamiento certificado, duradero y adaptado a las necesidades específicas de cada usuario. Nada que vendemos llega por accidente.</p>
        </div>
        <div className="lenovo-right">
          <div className="lenovo-logo-block" aria-label="Lenovo — distribuidor oficial">
            <img src="assets/lenovo-logo.png" alt="Lenovo" />
            <span className="lenovo-corner mono">— PARTNER</span>
            <span className="lenovo-corner-br mono">OFICIAL ·</span>
          </div>
          <div className="lenovo-fact">
            <div className="lenovo-fact-num mono" style={{ fontFamily: "Quicksand" }}>04</div>
            <div className="lenovo-fact-body">
              <div className="lenovo-fact-label mono">AÑOS DE CUBO EN EL MERCADO</div>
              <div className="lenovo-fact-desc">Más de cuatro años acompañando a personas y empresas en el Perú con decisiones de tecnología claras.</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Team() {
  return (
    <section className="team" id="equipo">
      <div className="section-eyebrow reveal">¿QUIÉNES LE DAN FORMA A CUBO? / 06 PERSONAS</div>
      <div className="team-head reveal">
        <h2>Las personas detrás <em>de la forma.</em></h2>
      </div>
      <div className="team-grid reveal">
        {TEAM.map((m, i) =>
        <div className="team-card" key={m.name}>
            <span className="idx mono">— 0{i + 1} / 06</span>
            <div className="avatar">
              <img src={m.photo} alt={m.name} className="avatar-img" />
              <span className="initials">{m.initials}</span>
            </div>
            <div>
              <div className="role">{m.role}</div>
              <div className="name">{m.name}</div>
              <div className="bio">{m.bio}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Contact() {
  const [form, setForm] = useStateA({ name: '', email: '', org: '', tipo: 'Personal', perfil: 'No estoy seguro', mensaje: '' });
  const [sent, setSent] = useStateA(false);
  const valid = form.name.trim() && form.email.trim() && form.mensaje.trim();

  const send = (e) => {
    e.preventDefault();
    if (!valid) return;
    const msg = `Hola CUBO 👋\n\n*Nombre:* ${form.name}\n*Email:* ${form.email}${form.org ? `\n*Empresa:* ${form.org}` : ''}\n*Tipo:* ${form.tipo}\n*Perfil:* ${form.perfil}\n\n${form.mensaje}`;
    window.open(`https://wa.me/51920768860?text=${encodeURIComponent(msg)}`, '_blank');
    setSent(true);
  };

  return (
    <section className="contact" id="contacto">
      <div className="section-eyebrow reveal">CONTACTO / COTIZACIÓN</div>
      <div className="contact-inner">
        <div className="contact-left reveal">
          <h2>Una <em>conversación</em>, no un catálogo.</h2>
          <p>Cuéntanos cómo trabajas y te respondemos con la decisión correcta. Sin formularios infinitos, sin esperas. Directo a WhatsApp con una persona real.</p>
          <div className="channels">
            <a className="contact-channel" href="https://wa.me/51920768860?text=Hola%20solicito%20informaci%C3%B3n" target="_blank" rel="noopener">
              <span className="ch-label">WHATSAPP</span>
              <span>+51 920 768 860</span>
              <span className="arrow">→</span>
            </a>
            <a className="contact-channel" href="mailto:info@cubo.com.pe">
              <span className="ch-label">EMAIL</span>
              <span>info@cubo.com.pe</span>
              <span className="arrow">→</span>
            </a>
            <div className="contact-channel">
              <span className="ch-label">UBICACIÓN</span>
              <span>Lima, Perú</span>
            </div>
            <div className="contact-channel">
              <span className="ch-label">HORARIO</span>
              <span>Lun — Sáb · 9:00 a 21:30</span>
            </div>
          </div>
        </div>

        <form className="contact-form reveal" onSubmit={send}>
          {sent ?
          <div className="form-success">
              <div className="check-mark">✓</div>
              <h4>Te abrimos WhatsApp</h4>
              <p>Si no se abrió automáticamente, escríbenos al +51 920 768 860 con tu mensaje. Te respondemos en horario de oficina.</p>
              <button type="button" className="btn btn-ghost" onClick={() => setSent(false)} style={{ marginTop: 8 }}>Enviar otro mensaje</button>
            </div> :

          <>
              <div className="form-eyebrow">— SOLICITA UNA COTIZACIÓN</div>
              <div className="field">
                <label>Nombre completo</label>
                <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="¿Cómo te llamas?" />
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Email</label>
                  <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="tu@email.com" />
                </div>
                <div className="field">
                  <label>Empresa (opcional)</label>
                  <input type="text" value={form.org} onChange={(e) => setForm({ ...form, org: e.target.value })} placeholder="—" />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Tipo</label>
                  <select value={form.tipo} onChange={(e) => setForm({ ...form, tipo: e.target.value })}>
                    <option>Personal</option>
                    <option>Business</option>
                  </select>
                </div>
                <div className="field">
                  <label>Perfil de interés</label>
                  <select value={form.perfil} onChange={(e) => setForm({ ...form, perfil: e.target.value })}>
                    <option>No estoy seguro</option>
                    <option>Essential</option>
                    <option>Performance</option>
                    <option>Gamer</option>
                    <option>Designer</option>
                    <option>Programmer</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Mensaje</label>
                <textarea value={form.mensaje} onChange={(e) => setForm({ ...form, mensaje: e.target.value })} placeholder="Cuéntanos cómo trabajas, qué necesitas, cuándo lo necesitas..." />
              </div>
              <button type="submit" className="submit-btn" disabled={!valid}>
                Enviar por WhatsApp →
              </button>
            </>
          }
        </form>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">CUBO. <em>Piensa en forma.</em></div>
        <div className="footer-col">
          <h4>Navegación</h4>
          <ul>
            <li><a href="#pilares">Pilares</a></li>
            <li><a href="#quiz">Encuentra tu equipo</a></li>
            <li><a href="#soluciones">Soluciones</a></li>
            <li><a href="#equipo">Equipo</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Categorías</h4>
          <ul>
            <li><a href="#soluciones">Laptops</a></li>
            <li><a href="#soluciones">Monitores</a></li>
            <li><a href="#soluciones">Periféricos</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Contacto</h4>
          <ul>
            <li><a href="https://wa.me/51920768860?text=Hola%20solicito%20informaci%C3%B3n" target="_blank" rel="noopener">WhatsApp</a></li>
            <li><a href="mailto:info@cubo.com.pe">info@cubo.com.pe</a></li>
            <li><a href="#contacto">Cotización</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span className="mark-mini">
          <CuboMark />
          CUBO © 2026
        </span>
        <span>Distribuidor oficial Lenovo · Lima, Perú</span>
        <span>v1.0 — Piensa en forma.</span>
      </div>
    </footer>);

}

function App() {
  useReveal();
  return (
    <>
      <Nav />
      <Hero />
      <Philosophy />
      <QuizSection />
      <Marquee />
      <Manifesto />
      <Solutions />
      <Lenovo />
      <Team />
      <Contact />
      <Footer />
    </>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);