// Ilehak landing page composition.
// Two shader sections (LiquidShader + GridShader) bracket the content.

const SERVICES = [
{ n: '01', title: 'Aplicaciones web',
  desc: 'Plataformas a medida con arquitecturas modernas, rendimiento real y diseño que se siente cuidado en cada pixel.',
  tag: 'React · Next · Node' },
{ n: '02', title: 'Apps móviles',
  desc: 'iOS y Android nativos o multiplataforma, pensados para que la primera impresión también sea la decisiva.',
  tag: 'Swift · Kotlin · RN' },
{ n: '03', title: 'Software empresarial',
  desc: 'Sistemas internos que reemplazan hojas de cálculo, conectan equipos y escalan con tu operación.',
  tag: 'ERP · CRM · BPM' },
{ n: '04', title: 'APIs e integraciones',
  desc: 'Conectamos lo que ya tienes con lo que viene: pasarelas, ERPs, marketplaces, servicios en la nube.',
  tag: 'REST · GraphQL · webhooks' },
{ n: '05', title: 'E-commerce',
  desc: 'Tiendas que cargan rápido, convierten más y se ven como una marca seria, no como una plantilla.',
  tag: 'Shopify · Headless · custom' },
{ n: '06', title: 'Automatización + IA',
  desc: 'Agentes, asistentes y flujos que se hacen cargo del trabajo repetitivo y entregan resultados verificables.',
  tag: 'LLMs · RPA · pipelines' }];


const PROCESS = [
{ k: 'Descubrir', d: 'Sesiones de inmersión con tu equipo para mapear el sueño y los límites del terreno.' },
{ k: 'Diseñar', d: 'Prototipos navegables y arquitectura técnica antes de escribir una sola línea de producción.' },
{ k: 'Construir', d: 'Sprints quincenales con entregas demostrables — nada de cajas negras.' },
{ k: 'Acompañar', d: 'Lanzamiento, monitoreo y evolución continua. El software vivo necesita gente viva detrás.' }];


function Logo({ inverted = false }) {
  const fg = inverted ? 'var(--cream)' : 'var(--ink)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <circle cx="14" cy="14" r="13" stroke={fg} strokeWidth="1.25" />
        <path d="M14 4 V24 M4 14 H24" stroke={fg} strokeWidth="1.25" />
        <circle cx="14" cy="14" r="4.5" fill="var(--blue)" />
      </svg>
      <span style={{ ...{
          fontFamily: 'var(--display)', fontSize: 22, letterSpacing: '-0.02em',
          color: fg, fontWeight: 500
        }, color: "rgb(255, 255, 255)" }}>Ilehak</span>
    </div>);

}

function Nav() {
  return (
    <header className="nav">
      <Logo />
      <nav className="nav-links" style={{ color: "rgb(251, 250, 246)" }}>
        <a href="#servicios">Servicios</a>
        <a href="#proceso">Proceso</a>
        <a href="#manifiesto">Manifiesto</a>
        <a href="#contacto">Contacto</a>
      </nav>
      <a href="#contacto" className="nav-cta">
        Hablemos
        <span className="nav-cta-arrow">→</span>
      </a>
    </header>);

}

function Hero({ tweaks }) {
  return (
    <section className="hero">
      <div className="hero-shader">
        <LiquidShader
          cream={tweaks.cream}
          blue={tweaks.blue}
          deep={tweaks.deep}
          warp={tweaks.warp}
          blueMix={tweaks.blueMix} />
        
      </div>
      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="dot" /> Software a la medida — Zapopan, MX · remoto global
        </div>
        <h1 className="hero-title" style={{ color: "rgb(209, 191, 40)" }}>
          Conectamos<br />
          tus <em style={{ color: "rgb(255, 255, 255)" }}>sueños</em><br />
          con la realidad.
        </h1>
        <p className="hero-sub">
          Ilehak diseña y construye software a la medida para empresas que ya no quieren elegir entre
          la plantilla genérica y el desarrollo eterno. Producto real, en manos reales, en menos tiempo del que crees.
        </p>
        <div className="hero-actions">
          <a href="#contacto" className="btn-primary">Empezar un proyecto <span>→</span></a>
          <a href="#servicios" className="btn-ghost">Ver lo que hacemos</a>
        </div>
        <div className="hero-hint">
          <span className="hint-bar" />
          Mueve el cursor — la superficie responde. Haz clic.
        </div>
      </div>
      <div className="hero-meta">
        <div><b>v 26.05</b> · superficie líquida</div>
        <div>ILEHAK / SOFTWARE</div>
      </div>
    </section>);

}

function Marquee() {
  const items = ['Web', 'Móvil', 'Enterprise', 'APIs', 'E-commerce', 'IA', 'Automatización', 'Cloud', 'Producto', 'Datos'];
  const row = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((t, i) =>
        <span key={i} className="marquee-item">
            {t}<span className="marquee-sep">✱</span>
          </span>
        )}
      </div>
    </div>);

}

function Services() {
  return (
    <section id="servicios" className="services">
      <div className="section-head">
        <div className="section-tag">/ 01 — Servicios</div>
        <h2 className="section-title">
          Seis maneras de transformar<br />una idea en producto.
        </h2>
        <p className="section-lead">
          Tomamos el problema completo: estrategia, diseño, ingeniería, lanzamiento y evolución.
          No vendemos horas — entregamos software que su gente quiere usar.
        </p>
      </div>
      <div className="services-grid">
        {SERVICES.map((s) =>
        <article key={s.n} className="service-card">
            <div className="service-n">{s.n}</div>
            <h3 className="service-title">{s.title}</h3>
            <p className="service-desc">{s.desc}</p>
            <div className="service-tag">{s.tag}</div>
            <div className="service-arrow" aria-hidden>↗</div>
          </article>
        )}
      </div>
    </section>);

}

function Process() {
  return (
    <section id="proceso" className="process">
      <div className="section-head">
        <div className="section-tag">/ 02 — Proceso</div>
        <h2 className="section-title">Cuatro fases. Cero sorpresas.</h2>
      </div>
      <ol className="process-list">
        {PROCESS.map((p, i) =>
        <li key={p.k} className="process-step">
            <div className="process-num">0{i + 1}</div>
            <div className="process-body">
              <h3>{p.k}</h3>
              <p>{p.d}</p>
            </div>
            <div className="process-rule" />
          </li>
        )}
      </ol>
    </section>);

}

function Manifesto({ tweaks }) {
  return (
    <section id="manifiesto" className="manifesto">
      <div className="manifesto-shader">
        <GridShader
          cream={tweaks.cream}
          blue={tweaks.blue}
          deep={tweaks.dotWarm}
          density={tweaks.density}
          dotSize={tweaks.dotSize} />
        
      </div>
      <div className="manifesto-content">
        <div className="section-tag dark">/ 03 — Manifiesto</div>
        <h2 className="manifesto-title">
          Creemos que el buen software<br />
          se siente. No solo funciona.
        </h2>
        <div className="manifesto-grid">
          <p>
            Construimos como artesanos: con curiosidad, con disciplina, y con una obsesión saludable
            por los detalles que nadie más nota — hasta que faltan.
          </p>
          <p>
            Cada producto que sale por la puerta lleva nuestro nombre. Por eso preferimos decir
            <em> &nbsp;no&nbsp; </em> antes que entregar algo que no usaríamos nosotros mismos.
          </p>
        </div>
        <div className="manifesto-hint">
          <span className="hint-bar" />
          Haz clic donde quieras — el estanque responde.
        </div>
      </div>
    </section>);

}

function Stats() {
  const stats = [
  { v: '8+', l: 'años construyendo producto' },
  { v: '40+', l: 'sistemas entregados' },
  { v: '14', l: 'industrias atendidas' },
  { v: '99.95%', l: 'uptime promedio' }];

  return (
    <section className="stats">
      {stats.map((s) =>
      <div key={s.l} className="stat">
          <div className="stat-v">{s.v}</div>
          <div className="stat-l">{s.l}</div>
        </div>
      )}
    </section>);

}

function Contact() {
  return (
    <section id="contacto" className="contact">
      <div className="contact-left">
        <div className="section-tag">/ 04 — Contacto</div>
        <h2 className="section-title">
          ¿Tienes algo<br />en mente?
        </h2>
        <p className="section-lead">
          Escríbenos. Respondemos en menos de 24 horas hábiles con una primera lectura honesta:
          si es para nosotros, qué tomaría, y por dónde empezaríamos.
        </p>
        <div className="contact-info">
          <div>
            <span className="contact-k">Correo</span>
            <a href="mailto:hola@ilehak.mx" className="contact-v">hola@ilehak.mx</a>
          </div>
          <div>
            <span className="contact-k">Teléfono</span>
            <span className="contact-v">+52 (33) 1234 5678</span>
          </div>
          <div>
            <span className="contact-k">Oficina</span>
            <span className="contact-v">Zapopan, Jalisco — México</span>
          </div>
        </div>
      </div>
      <form className="contact-form" onSubmit={(e) => {e.preventDefault();alert('Gracias. Te contactaremos pronto.');}}>
        <label>
          <span>Nombre</span>
          <input type="text" placeholder="Quién eres" required />
        </label>
        <label>
          <span>Empresa</span>
          <input type="text" placeholder="A qué representa" />
        </label>
        <label>
          <span>Correo</span>
          <input type="email" placeholder="dónde encontrarte" required />
        </label>
        <label>
          <span>Cuéntanos el sueño</span>
          <textarea rows={4} placeholder="lo que imaginas, sin filtros…" required />
        </label>
        <div className="contact-budget">
          <span>Rango de inversión</span>
          <div className="chips">
            {['< $20k', '$20–60k', '$60–150k', '$150k+', 'aún no sé'].map((c) =>
            <label key={c} className="chip">
                <input type="radio" name="budget" />{c}
              </label>
            )}
          </div>
        </div>
        <button type="submit" className="btn-primary big">
          Enviar mensaje <span>→</span>
        </button>
      </form>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <Logo />
        <div className="footer-tag">conectamos tus sueños con la realidad.</div>
      </div>
      <div className="footer-cols">
        <div>
          <h5>Servicios</h5>
          <ul>
            <li>Web</li><li>Móvil</li><li>Enterprise</li>
            <li>APIs</li><li>E-commerce</li><li>IA</li>
          </ul>
        </div>
        <div>
          <h5>Empresa</h5>
          <ul>
            <li>Proceso</li><li>Manifiesto</li><li>Carreras</li><li>Casos de estudio</li>
          </ul>
        </div>
        <div>
          <h5>Hablemos</h5>
          <ul>
            <li>hola@ilehak.mx</li>
            <li>+52 (33) 1234 5678</li>
            <li>Zapopan, Jalisco</li>
          </ul>
        </div>
        <div>
          <h5>Social</h5>
          <ul>
            <li>LinkedIn</li><li>Instagram</li><li>GitHub</li><li>Dribbble</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Ilehak. Todos los sueños reservados.</span>
        <span>Hecho a mano en Zapopan, Jalisco 🇲🇽</span>
      </div>
    </footer>);

}

// ---------- Tweaks ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cream": "#FFFFFF",
  "blue": "#2944BA",
  "deep": "#0F1538",
  "dotWarm": "#5C72D4",
  "warp": 1.0,
  "blueMix": 0.55,
  "density": 65,
  "dotSize": 0.14
} /*EDITMODE-END*/;

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);

  return (
    <div className="page">
      <Nav />
      <Hero tweaks={t} />
      <Marquee />
      <Services />
      <Process />
      <Stats />
      <Manifesto tweaks={t} />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <TweakColor
            label="Fondo"
            value={t.cream}
            options={['#FFFFFF', '#FBFAF6', '#F6F4EF', '#F2EFE8', '#EFECE3']}
            onChange={(v) => setT('cream', v)} />
          
          <TweakColor
            label="Azul"
            value={t.blue}
            options={['#2944BA', '#1A2F8E', '#3955D8', '#0E1F66']}
            onChange={(v) => setT('blue', v)} />
          
          <TweakColor
            label="Profundo"
            value={t.deep}
            options={['#0F1538', '#181122', '#0A0E26', '#1B1A2E']}
            onChange={(v) => setT('deep', v)} />
          
        </TweakSection>
        <TweakSection label="Shader líquido (hero)">
          <TweakSlider label="Pull del cursor" value={t.warp} min={0} max={2.5} step={0.05} onChange={(v) => setT('warp', v)} />
          <TweakSlider label="Intensidad del azul" value={t.blueMix} min={0} max={1} step={0.02} onChange={(v) => setT('blueMix', v)} />
        </TweakSection>
        <TweakSection label="Shader malla (manifiesto)">
          <TweakColor
            label="Color de puntos"
            value={t.dotWarm}
            options={['#2944BA', '#3955D8', '#5C72D4', '#8A9CE3', '#ADBBED']}
            onChange={(v) => setT('dotWarm', v)} />
          
          <TweakSlider label="Densidad" value={t.density} min={18} max={80} step={1} onChange={(v) => setT('density', v)} />
          <TweakSlider label="Tamaño de punto" value={t.dotSize} min={0.04} max={0.35} step={0.005} onChange={(v) => setT('dotSize', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>);

}

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