/* ====== Lupi · Laboratorio ====== */
const { useState } = React;

function Lab() {
  return (
    <main>
      <Bar />
      <Hero />
      <DataSheets />
      <Benefits />
      <Protocol />
      <Circular />
      <Ritual />
      <Support />
      <Team />
      <Press />
      <Credibility />
      <Newsletter />
      <Foot />
    </main>);

}

function Bar() {
  return (
    <header className="bar">
      <div style={{ display: "flex", alignItems: "center" }}>
        <a href="#" className="bar-mark">lupi</a>
        <span className="bar-id">LOOPI&nbsp;SAS &nbsp;·&nbsp; MSP&nbsp;391</span>
      </div>
      <nav className="bar-nav">
        <a href="#proto">/ protocolo</a>
        <a href="#data">/ productos</a>
        <a href="#team">/ equipo</a>
        <a href="#support">/ apoyo</a>
        <a href="#contact">/ contacto</a>
      </nav>
      <div className="bar-right">
        <a href="#data" className="bar-cta">Tienda →</a>
      </div>
    </header>);

}

function Readout() {
  const cells = [
  ["pH fórmula", "5.4 ± 0.2"],
  ["Activos / ml", "3"],
  ["Lote", "04 — abr·26"],
  ["Test in-vitro", "PASS"],
  ["Test dérmico", "PASS"],
  ["Reg. MSP", "391"]];

  return (
    <dl className="readout">
      {cells.map(([k, v]) =>
      <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
      )}
    </dl>);

}

function Hero() {
  return (
    <section className="h-grid">
      <div className="h-l">
        <div className="h-meta">
          <span><b>uy</b> · Hecho en Uruguay</span>
        </div>
        <h1 className="h-h">
          Skincare<br />
          <em>con evidencia.</em>
        </h1>
        <p className="h-deck">
          Tres fórmulas cosmecéuticas formuladas con activos dermatológicamente validados — niacinamida, ácido hialurónico y polifenoles. Producidas en Uruguay bajo registro MSP&nbsp;391.
        </p>
        <div className="h-actions">
          <a className="btn-mono" href="#data">Ver la línea →</a>
          <a className="btn-mono btn-mono--ghost" href="#proto">El método</a>
        </div>
        <div className="h-readout-large">
          <div>
            <span className="lbl">Año fundación</span>
            <span className="num">2024</span>
            <span className="delta">▲ Montevideo, UY</span>
          </div>
          <div>
            <span className="lbl">Apoyo institucional</span>
            <span className="num">ANDE · ANII</span>
            <span className="delta">▲ desarrollo + I+D</span>
          </div>
          <div>
            <span className="lbl">Activos / fórmula</span>
            <span className="num">03</span>
            <span className="delta">≈ niacinamida · hialur · polifenoles</span>
          </div>
        </div>
      </div>
      <div className="h-r">
        <div className="h-r-grid" />
        <div className="h-r-img">
          <img src="assets/serum-bottle.png" alt="Sérum Lupi 30 ml" />
          {/* crosshairs */}
          <div className="ch" style={{ top: "18%", left: "20%" }} />
          <span className="ch-label" style={{ top: "16%", left: "5%" }}>
            niacinamida · 5%
          </span>
          <div className="ch" style={{ top: "52%", right: "18%", transform: "translate(0,0)" }} />
          <span className="ch-label" style={{ top: "50%", right: "5%" }}>
            polifenoles café · 2%
          </span>
          <div className="ch" style={{ bottom: "22%", left: "22%" }} />
          <span className="ch-label" style={{ bottom: "18%", left: "5%" }}>
            ácido hialurónico · 1%
          </span>
        </div>
      </div>
    </section>);

}

/* ===== Benefits — "Para tu piel": emotional but evidence-anchored ===== */
function Benefits() {
  const items = [
    { tag: "Hidratación", t: "Más hidratada,",        em: "a lo largo del día.",                d: "Niacinamida + ácido hialurónico refuerzan la función barrera y retienen agua en las capas superiores de la piel." },
    { tag: "Firmeza",     t: "Líneas finas,",         em: "suavizadas con el uso continuo.",    d: "Bakuchiol y los péptidos señal Matrixyl 3000™ estimulan los procesos naturales de renovación celular." },
    { tag: "Luminosidad", t: "Tono parejo,",          em: "piel luminosa.",                     d: "Polifenoles antioxidantes neutralizan radicales libres del estrés ambiental. La niacinamida ayuda a uniformar el tono." },
    { tag: "Calma",       t: "Piel sensible,",        em: "más confortable.",                   d: "Sin fragancia: no aporta función, sí riesgo de sensibilización. Apta para uso diario." },
  ];
  return (
    <section className="benefits" id="benefits">
      <div className="benefits-head">
        <span className="section-tag">// para tu piel</span>
        <h2 className="benefits-h">Cuatro resultados,<br /><em>cero promesas vacías.</em></h2>
      </div>
      <div className="benefits-grid">
        {items.map((b) =>
        <article key={b.tag} className="benefit">
            <span className="benefit-tag">{b.tag}</span>
            <h3 className="benefit-h">{b.t} <em>{b.em}</em></h3>
            <p>{b.d}</p>
          </article>
        )}
      </div>
    </section>);

}

function Protocol() {
  return (
    <section className="proto" id="proto">
      <div className="proto-head">
        <div>
          <span className="section-tag">// el método · 01</span>
          <h2>Ciencia, no marketing.<br /><em>Cuatro pasos validados.</em></h2>
        </div>
        <p className="proto-deck">
          Cada fórmula se diseña en un laboratorio uruguayo bajo estándar cosmecéutico. Sin atajos, sin promesas vacías, con trazabilidad de extremo a extremo.
        </p>
      </div>
      <div className="proto-steps">
        {[
        { n: "01", tag: "I+D", t: "Investigación", d: "Selección y validación de activos cosmecéuticos respaldados por evidencia dermatológica.", ref: "Marco · ANII Innovación" },
        { n: "02", tag: "FORM", t: "Formulación", d: "Tres activos por fórmula, en ratios controlados. Sin parabenos, sulfatos ni siliconas.", ref: "03 activos · 0 atajos" },
        { n: "03", tag: "TEST", t: "Validación", d: "Testeo dermatológico in-vitro y microbiológico antes de cada lote. Resultados trazables.", ref: "QC · PASS" },
        { n: "04", tag: "PROD", t: "Producción", d: "Lotes pequeños, fabricados en Uruguay bajo registro sanitario MSP. Trazabilidad por unidad.", ref: "MSP 391 · Reg. UY" }].
        map((s) =>
        <article key={s.n} className="step-lab">
            <div className="step-id"><span>{s.tag}</span><b>{s.n}/04</b></div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
            <div className="ref">{s.ref}</div>
          </article>
        )}
      </div>
    </section>);

}

function CoffeeBean({ className, rotate = -12 }) {
  return (
    <svg className={className} viewBox="0 0 80 110" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <g transform={`rotate(${rotate} 40 55)`}>
        <ellipse cx="40" cy="55" rx="26" ry="46" fill="#6b4a2e" />
        <ellipse cx="40" cy="55" rx="26" ry="46" fill="none" stroke="#3d2a18" strokeWidth="1.2" opacity="0.55" />
        <path d="M40 14 Q 48 34 48 55 Q 48 76 40 96" stroke="#3d2a18" strokeWidth="2" fill="none" strokeLinecap="round" />
      </g>
    </svg>);

}

/* ===== Circular — the coffee story, compact ===== */
function Circular() {
  return (
    <section className="circ" id="circular">
      <div className="circ-inner">
        <div className="circ-head">
          <CoffeeBean className="circ-bean" rotate={-14} />
          <div className="circ-head-text">
            <span className="section-tag">// ciencia circular</span>
            <h2 className="circ-h2">La borra de café, <em>revalorizada.</em></h2>
            <p className="circ-lead">
              Recuperamos polifenoles antioxidantes de borra de café local — mismo activo que la industria importa, menor huella.
            </p>
          </div>
        </div>
        <ol className="circ-process">
          <li>
            <span className="cs-i">01</span>
            <div>
              <b>Recolección urbana</b>
              <span>Cafeterías y oficinas de Montevideo.</span>
            </div>
          </li>
          <li>
            <span className="cs-i">02</span>
            <div>
              <b>Extracción cosmecéutica</b>
              <span>Baja temperatura, actividad antioxidante preservada.</span>
            </div>
          </li>
          <li>
            <span className="cs-i">03</span>
            <div>
              <b>Uso en fórmula</b>
              <span>Activo antioxidante en las tres fórmulas.</span>
            </div>
          </li>
        </ol>
      </div>
    </section>);

}

function DataSheets() {
  const ps = [
  {
    key: "contorno",
    id: "SKU·LP-CO-15",
    name: "Contorno", italic: "de ojos",
    vol: "15 ml", piel: "Todas", uso: "AM · PM",
    tagline: "Hidrata, descongestiona y devuelve luminosidad al contorno con cuatro activos validados.",
    actives: [
      { name: "Niacinamida",         pct: "5%",   note: "Refuerza la función barrera; iguala el tono." },
      { name: "Polifenoles café",    pct: "5%",   note: "Antioxidante de origen local; descongestiona." },
      { name: "Ácido hialurónico",   pct: "1%",   note: "Hidratación periocular sostenida." },
      { name: "Alantoína",           pct: "0.1%", note: "Calma e ilumina la piel sensible." },
    ],
    free: "Sin parabenos · Sin sulfatos · Sin fragancia · Cruelty-free",
    img: "assets/contorno-box.png",
  },
  {
    key: "serum",
    id: "SKU·LP-SE-30",
    name: "Sérum", italic: "anti-arrugas",
    vol: "30 ml", piel: "Todas, madura", uso: "AM · PM",
    tagline: "Reduce líneas finas y mejora la firmeza con péptidos señal y bakuchiol.",
    actives: [
      { name: "Bakuchiol",          pct: "1%", note: "Alternativa natural al retinol; estimula renovación." },
      { name: "Matrixyl 3000™",     pct: "1%", note: "Péptidos señal Croda Beauty; firmeza y líneas finas." },
      { name: "Niacinamida",        pct: "5%", note: "Iguala tono y refuerza la barrera cutánea." },
      { name: "Polifenoles café",   pct: "2%", note: "Antioxidante diario contra radicales libres." },
      { name: "Ácido hialurónico",  pct: "1%", note: "Hidratación profunda y sostenida." },
    ],
    free: "Sin parabenos · Sin sulfatos · Sin fragancia · Cruelty-free",
    img: "assets/serum-bottle.png",
  },
  {
    key: "crema",
    id: "SKU·LP-CR-50",
    name: "Crema", italic: "hidratante",
    vol: "50 g", piel: "Seca, mixta", uso: "AM · PM",
    tagline: "Hidratación prolongada y protección antioxidante con activos validados.",
    actives: [
      { name: "Niacinamida",        pct: "5%",   note: "Refuerza la función barrera; tono uniforme." },
      { name: "Polifenoles café",   pct: "2%",   note: "Antioxidante de origen local." },
      { name: "Vitamina E",         pct: "0.5%", note: "Tocopheryl acetate; protección antioxidante." },
      { name: "Dimeticona",         pct: "10%",  note: "Sella la hidratación y suaviza la textura." },
      { name: "Ácido hialurónico",  pct: "0.5%", note: "Hidratación inmediata." },
    ],
    free: "Sin parabenos · Sin sulfatos · Sin fragancia · Cruelty-free",
    img: "assets/crema-box.png",
  }];

  return (
    <section className="data" id="data">
      <div className="data-head">
        <span className="section-tag">// productos · 02</span>
        <h2>Tres fórmulas.<br /><em>Una rutina completa.</em></h2>
      </div>
      <div className="data-grid">
        {ps.map((p) =>
        <article className="sheet" key={p.key}>
            <header className="sheet-h">
              <span>{p.name.toUpperCase()} · {p.italic.toUpperCase()}</span>
              <span className="sheet-id">{p.id}</span>
            </header>
            <div className="sheet-img">
              <span className="corner tl" /><span className="corner tr" />
              <span className="corner bl" /><span className="corner br" />
              <img src={p.img} alt={p.name} />
            </div>
            <div className="sheet-body">
              <h3 className="sheet-name">{p.name} <em>{p.italic}</em></h3>
              <p className="sheet-tagline">{p.tagline}</p>
              <div className="sheet-spec">
                <div><dt>Volumen</dt><dd>{p.vol}</dd></div>
                <div><dt>Tipo de piel</dt><dd>{p.piel}</dd></div>
                <div><dt>Uso</dt><dd>{p.uso}</dd></div>
              </div>
              <dl className="sheet-actives">
                <dt className="sheet-actives-h">Activos clave</dt>
                {p.actives.map((a) =>
                <div className="active-row" key={a.name}>
                    <div className="active-top">
                      <span className="active-name">{a.name}</span>
                      <span className="active-pct">{a.pct}</span>
                    </div>
                    <span className="active-note">{a.note}</span>
                  </div>
                )}
              </dl>
              <p className="sheet-free">{p.free}</p>
              <button className="sheet-cta">Agregar a la rutina →</button>
            </div>
          </article>
        )}
      </div>
    </section>);

}

/* ===== Ritual — feminine routine framing, AM / PM ===== */
function Ritual() {
  return (
    <section className="ritual" id="ritual">
      <div className="ritual-head">
        <span className="section-tag">// el ritual</span>
        <h2 className="ritual-h">Una rutina simple,<br /><em>diseñada por tu piel.</em></h2>
        <p className="ritual-deck">
          Tres pasos. Mañana y noche. Pensado para complementarse — la dosis de cada activo está calculada para que las tres fórmulas convivan en tu rutina.
        </p>
      </div>
      <div className="ritual-grid">
        <article className="ritual-col ritual-am">
          <header className="ritual-col-h">
            <span className="ritual-tag" aria-label="Mañana">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
            </span>
            <h3>Mañana</h3>
          </header>
          <ol className="ritual-steps">
            <li><span className="rs-i">01</span><div><b>Limpieza suave</b><span>Con agua tibia y tu limpiador habitual.</span></div></li>
            <li><span className="rs-i">02</span><div><b>Sérum anti-arrugas</b><span>2–3 gotas. Niacinamida + Matrixyl + Bakuchiol.</span></div></li>
            <li><span className="rs-i">03</span><div><b>Contorno de ojos</b><span>Toque suave alrededor del ojo. Despierta.</span></div></li>
            <li><span className="rs-i">04</span><div><b>Crema hidratante</b><span>Sella la rutina. SPF encima, idealmente.</span></div></li>
          </ol>
        </article>
        <article className="ritual-col ritual-pm">
          <header className="ritual-col-h">
            <span className="ritual-tag" aria-label="Noche">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
            </span>
            <h3>Noche</h3>
          </header>
          <ol className="ritual-steps">
            <li><span className="rs-i">01</span><div><b>Doble limpieza</b><span>Aceite + limpiador. Remueve solar y polución.</span></div></li>
            <li><span className="rs-i">02</span><div><b>Sérum anti-arrugas</b><span>El bakuchiol se recomienda de noche por su fotosensibilidad.</span></div></li>
            <li><span className="rs-i">03</span><div><b>Contorno de ojos</b><span>Hidrata el contorno mientras descansás.</span></div></li>
            <li><span className="rs-i">04</span><div><b>Crema hidratante</b><span>Función barrera + protección antioxidante.</span></div></li>
          </ol>
        </article>
      </div>
      <p className="ritual-note">
        <span className="ritual-note-tag">/ tip</span>
        Si recién empezás, podés introducir un producto por semana. Si tu piel es sensible, comenzá por la <em>crema hidratante</em>.
      </p>
    </section>);

}

function Support() {
  return (
    <section className="support" id="support">
      <div className="support-grid">
        <div>
          <span className="section-tag">// apoyo institucional · 03</span>
          <h2>Proyecto apoyado por<br /><em>ANDE&nbsp;y&nbsp;ANII</em> de Uruguay.</h2>
          <p className="support-lead">
            Lupi nace en Uruguay y crece con el respaldo de dos instituciones que apuestan al desarrollo productivo y a la innovación científica del país.
          </p>
          <div className="inst">
            <article className="inst-card">
              <span className="inst-key">ANDE</span>
              <h3>Agencia Nacional de Desarrollo</h3>
              <p>Programa de apoyo a emprendimientos productivos con foco en escalamiento, empleo y federalización.</p>
              <ul className="inst-list">
                <li>Capital semilla productivo</li>
                <li>Mentoría comercial</li>
                <li>Red de proveedores nacionales</li>
              </ul>
            </article>
            <article className="inst-card">
              <span className="inst-key">ANII</span>
              <h3>Agencia Nacional de Investigación e Innovación</h3>
              <p>Programa de innovación en empresas — validación científica y desarrollo de fórmulas con base I+D.</p>
              <ul className="inst-list">
                <li>Validación dermatológica</li>
                <li>Subsidio a I+D cosmecéutico</li>
                <li>Acceso a laboratorios certificados</li>
              </ul>
            </article>
          </div>
        </div>
        <aside className="cert">
          <div className="cert-h">
            <span className="id">CERT · ANDE-ANII · UY</span>
            <span className="ok">En ejecución</span>
          </div>
          <div className="cert-img">
            <img src="assets/ande-anii-original.png" alt="Proyecto apoyado por ANDE y ANII" />
          </div>
          <dl className="cert-meta">
            <div><dt>Instrumento</dt><dd>ANDE — Emprendedores Innovadores</dd></div>
            <div><dt>Programa</dt><dd>ANII — Innovación Empresarial</dd></div>
            <div><dt>Ref.</dt><dd>ANII·24-0391</dd></div>
            <div><dt>Fab.</dt><dd>Onacril S.A. · Reg. Industria UY</dd></div>
          </dl>
        </aside>
      </div>
    </section>);

}

function Newsletter() {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  return (
    <section className="news-lab">
      <div className="news-lab-inner">
        <span className="section-tag" style={{ color: "#9bb0e8" }}>// newsletter</span>
        <h2>Suscribite.</h2>
        <p>Sin promociones. Solo info útil sobre tu piel, nuevos lotes y novedades del laboratorio.</p>
        <form className="news-form-lab" onSubmit={(e) => {e.preventDefault();if (email) setDone(true);}}>
          <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tu@email.com" />
          <button type="submit">{done ? "✓ Listo" : "Suscribirme →"}</button>
        </form>
      </div>
    </section>);

}

function Foot() {
  return (
    <footer className="foot-lab" id="contact">
      <div className="foot-lab-grid">
        <div>
          <div className="foot-mark">lupi</div>
          <p className="foot-tag">LOOPI SAS · Skincare con evidencia · Hecho en Uruguay<br />Brenda 5841 · Montevideo · UY</p>
        </div>
        <div className="foot-col">
          <h4>/ tienda</h4>
          <a href="#">Sérum facial</a>
          <a href="#">Crema hidratante</a>
          <a href="#">Contorno de ojos</a>
          <a href="#">Rutina completa</a>
        </div>
        <div className="foot-col">
          <h4>/ marca</h4>
          <a href="#">Protocolo</a>
          <a href="#">Datasheets</a>
          <a href="#">Apoyo ANDE+ANII</a>
          <a href="#">Lotes activos</a>
        </div>
        <div className="foot-col">
          <h4>/ contacto</h4>
          <a href="mailto:hola@lupi.uy">hola@lupi.uy</a>
          <a href="#">+598 92 952 335</a>
          <a href="#">Brenda 5841, Mvd</a>
          <a href="#">@lupi.coffee</a>
        </div>
      </div>
      <div className="foot-bot">
        <span>© 2026 LOOPI SAS · Reg. Industria UY · Fab. Onacril S.A. · MSP 391</span>
        <span>v.01.0 · build 2026-05</span>
      </div>
    </footer>);

}

function Credibility() {
  const pillars = [
    { k: "Validación dermatológica", v: "Testeo in-vitro y microbiológico por lote." },
    { k: "Registro sanitario",       v: "MSP 391 · Trazabilidad por unidad." },
    { k: "Respaldo institucional",   v: "ANII Innovación Empresarial · ANDE." },
  ];
  return (
    <section className="cred" id="cred">
      <div className="cred-inner">
        {pillars.map((p, i) =>
          <article key={p.k} className="cred-pillar">
            <span className="cred-n">0{i + 1}</span>
            <h3>{p.k}</h3>
            <p>{p.v}</p>
          </article>
        )}
      </div>
    </section>);

}

function Team() {
  const people = [
    {
      key: "joaquin",
      filled: true,
      name: "Joaquín Presa Lombardi",
      role: "Fundador y Director Científico",
      bio: "Lic. en Ingeniería en Alimentos (UCU). Investigador en desarrollo cosmecéutico.",
      linkedin: "#",
    },
    { key: "tbd-1", filled: false },
    { key: "tbd-2", filled: false },
    { key: "tbd-3", filled: false },
  ];
  return (
    <section className="team" id="team">
      <div className="team-head">
        <span className="section-tag">// el equipo · 04</span>
        <h2 className="team-h">Detrás de cada fórmula,<br /><em>científicos.</em></h2>
        <p className="team-lead">
          Lupi se desarrolla en Uruguay por un equipo con formación científica y experiencia en formulación cosmecéutica.
        </p>
      </div>
      <div className="team-grid">
        {people.map((p) =>
          <article key={p.key} className={p.filled ? "team-card" : "team-card team-card--tbd"}>
            <div className="team-photo">
              {p.filled ?
                <image-slot id={"team-" + p.key} shape="rounded" radius="10" placeholder="Foto · retrato"></image-slot> :
                <span className="team-tbd-label">Próximamente</span>
              }
            </div>
            <div className="team-body">
              {p.filled ?
                <React.Fragment>
                  <span className="team-role">{p.role}</span>
                  <h3 className="team-name">{p.name}</h3>
                  <p className="team-bio">{p.bio}</p>
                  <a className="team-li" href={p.linkedin}>LinkedIn →</a>
                </React.Fragment> :
                <React.Fragment>
                  <span className="team-role team-role--tbd">— · —</span>
                  <h3 className="team-name team-name--tbd">A confirmar</h3>
                </React.Fragment>
              }
            </div>
          </article>
        )}
      </div>
    </section>);

}

function Press() {
  const slots = [1, 2, 3, 4, 5, 6];
  return (
    <section className="press" id="press">
      <div className="press-head">
        <span className="section-tag">// en la prensa</span>
        <h2 className="press-h">Cobertura,<br /><em>próximamente.</em></h2>
      </div>
      <div className="press-grid">
        {slots.map((s) =>
          <div key={s} className="press-slot">
            <span>logo · {String(s).padStart(2, "0")}</span>
          </div>
        )}
      </div>
    </section>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<Lab />);