/* global React, ReactDOM, ProductPreview, Icon, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio */
const { useState, useEffect } = React;

/* ================================================================
   Sticky nav
   ================================================================ */
const Nav = () => (
  <header className="nav">
    <div className="wrap nav-inner">
      <div className="nav-left">
        <a className="brand" href="#top">
          <div className="brand-mark">F</div>
          <div className="brand-name">FashionOne</div>
        </a>
        <nav className="nav-links">
          <a href="#producto">Producto</a>
          <a href="#flujo">Cómo funciona</a>
          <a href="#especs">Especificaciones</a>
          <a href="#precios">Precios</a>
          <a href="https://arguedasone.com">Contacto</a>
        </nav>
      </div>
      <div className="nav-right">
        <button className="btn btn-ghost">Iniciar sesión <span className="kbd">⌘L</span></button>
        <button className="btn btn-primary">Solicitar demo <Icon name="arrow_r" size={12}/></button>
      </div>
    </div>
  </header>
);

/* ================================================================
   Hero
   ================================================================ */
const Hero = () => (
  <section className="hero" id="top">
    <div className="wrap hero-inner">
      <div className="hero-tag">
        <span className="hero-tag-pill">Nuevo</span>
        <span>Facturación electrónica 4.4 + envío automático a <b>Hacienda CR</b></span>
      </div>
      <h1 className="hero-h1">
        El sistema completo<br/>
        para tu <em>salón de belleza</em>,<br/>
        en un solo lugar.
      </h1>
      <p className="hero-sub">
        FashionOne controla tu agenda, clientes, servicios, punto de venta, inventario
        y facturación electrónica — local, express y a domicilio. Hecho para salones
        y peluquerías en Costa Rica.
      </p>
      <div className="hero-ctas">
        <button className="btn btn-accent btn-lg">Solicitar demo <Icon name="arrow_r" size={13}/></button>
        <button className="btn btn-outline btn-lg">Ver producto en vivo</button>
        <span className="meta">14 días gratis · sin tarjeta</span>
      </div>

      <div className="hero-stats">
        <div className="hero-stat"><span className="num">14</span><span className="lbl">— Servicios listos</span></div>
        <div className="hero-stat"><span className="num">3 min</span><span className="lbl">— De cita a factura</span></div>
        <div className="hero-stat"><span className="num">FE 4.4</span><span className="lbl">— Hacienda CR</span></div>
        <div className="hero-stat"><span className="num">99.9%</span><span className="lbl">— Uptime 12 meses</span></div>
      </div>
    </div>
  </section>
);

/* ================================================================
   Product preview section (the big tabbed app)
   ================================================================ */
const ProductSection = () => (
  <section className="preview-section" id="producto">
    <div className="wrap">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"end", gap:24, flexWrap:"wrap", marginTop:32, marginBottom:8}}>
        <div>
          <span className="eyebrow">El producto, en vivo</span>
          <h2 style={{fontSize:"clamp(28px, 3.4vw, 44px)", fontWeight:500, letterSpacing:"-0.025em", lineHeight:1.05, margin:"12px 0 0", maxWidth:560}}>
            Navegá el <em style={{fontFamily:"var(--f-display)", fontStyle:"italic"}}>sistema completo</em> desde acá.
          </h2>
        </div>
        <div style={{fontSize:13, color:"var(--ink-2)", maxWidth:380}}>
          No es un screenshot. Hacé click en la barra lateral o en las pestañas para recorrer cada pantalla —
          datos reales del demo, mismo flujo que usa tu recepción todos los días.
        </div>
      </div>
      <ProductPreview initial="inicio"/>
    </div>
  </section>
);

/* ================================================================
   Feature grid
   ================================================================ */
const features = [
  { icon:"cal", title:"Agenda y citas",
    desc:"Vista mes, semana y día. Citas local, express y a domicilio. Recordatorios automáticos y asignación por estilista.",
    tags:["mes","semana","día","a domicilio"]},
  { icon:"users", title:"Clientes (CRM)",
    desc:"Ficha con historial de visitas, notas, alergias, ubicación en mapa y control de morosidad. Importá y exportá tu base.",
    tags:["historial","notas","morosidad"]},
  { icon:"scissors", title:"Servicios y comisiones",
    desc:"Catálogo con precio, costo de insumos, ganancia y duración. Comisiones por estilista calculadas automáticamente.",
    tags:["precio","ganancia","comisión"]},
  { icon:"box", title:"Bodega e inventario",
    desc:"Productos de venta e insumos por separado, con SKU, stock mínimo y alertas de reposición. Compras suman al inventario.",
    tags:["productos","insumos","stock mínimo"]},
  { icon:"file", title:"Facturación electrónica",
    desc:"Comprobantes 4.4 con envío automático a Hacienda CR. PDF + XML + respuesta firmada, IVA y CABYS por línea.",
    tags:["Hacienda CR","FE 4.4","CABYS"]},
  { icon:"mega", title:"Publicidad y promociones",
    desc:"Catálogo PDF y promociones del mes. Compartilas por WhatsApp, correo o enlace con un solo click.",
    tags:["catálogo PDF","WhatsApp","enlace"]},
];

const Features = () => (
  <section className="section" id="caracteristicas">
    <div className="wrap">
      <div className="section-h">
        <span className="eyebrow">Por qué FashionOne</span>
        <h2>Todo lo que tu salón necesita — <em>nada de lo que no</em>.</h2>
        <p>Pensado para salones de belleza y peluquerías de Costa Rica. Sin módulos genéricos, sin terminología de hospital, sin un ERP gigante que nadie usa.</p>
      </div>
      <div className="features">
        {features.map((f,i)=>(
          <div className="feature" key={i}>
            <div className="icn"><Icon name={f.icon} size={18}/></div>
            <h3>{f.title}</h3>
            <p>{f.desc}</p>
            <div className="ftags">
              {f.tags.map((t,j)=>(<span className="ftag" key={j}>{t}</span>))}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ================================================================
   Workflow / steps
   ================================================================ */
const Workflow = () => (
  <section className="section" id="flujo" style={{background:"var(--canvas)"}}>
    <div className="wrap">
      <div className="section-h">
        <span className="eyebrow">Cómo funciona</span>
        <h2>De la cita al comprobante — <em>en un mismo hilo</em>.</h2>
        <p>Tres movimientos. Sin saltar entre el cuaderno, WhatsApp y la calculadora.</p>
      </div>
      <div className="workflow">
        <div className="step">
          <div className="step-num">01</div>
          <h4>Agendá y confirmá</h4>
          <p>Recepción agenda la cita — local, express o a domicilio — y confirma por WhatsApp. Cada estilista ve su día al instante.</p>
        </div>
        <div className="step">
          <div className="step-num">02</div>
          <h4>Atendé y cobrá</h4>
          <p>Cargá servicios y productos del catálogo, aplicá descuentos y promociones. El inventario de insumos se descuenta solo.</p>
        </div>
        <div className="step">
          <div className="step-num">03</div>
          <h4>Facturá y fidelizá</h4>
          <p>Factura electrónica enviada a Hacienda al cerrar la venta. El historial queda en la ficha del cliente para la próxima visita.</p>
        </div>
      </div>
    </div>
  </section>
);

/* ================================================================
   Spec rail
   ================================================================ */
const SpecRail = () => (
  <section className="spec-section" id="especs">
    <div className="wrap spec-inner">
      <div className="spec-h">
        <div>
          <span className="eyebrow">Especificaciones</span>
          <h2>Seguro y al <em>día con Hacienda</em>.</h2>
        </div>
        <p>FashionOne maneja datos de tus clientes y tu facturación con el mismo cuidado que vos: cifrado, respaldado y listo para TRIBU-CR.</p>
      </div>
      <div className="spec-grid">
        <div className="spec-cell"><span className="k">Comprobantes</span><span className="v">FE 4.4</span><span className="d">Factura, tiquete y nota de crédito electrónicos.</span></div>
        <div className="spec-cell"><span className="k">Hacienda</span><span className="v">TRIBU-CR</span><span className="d">Envío automático, XML + respuesta firmada.</span></div>
        <div className="spec-cell"><span className="k">Cifrado</span><span className="v">AES-256</span><span className="d">Datos de clientes cifrados en reposo.</span></div>
        <div className="spec-cell"><span className="k">Respaldo</span><span className="v">Diario</span><span className="d">Copias automáticas geo-redundantes.</span></div>
        <div className="spec-cell"><span className="k">Catálogo</span><span className="v">CABYS</span><span className="d">Código por servicio y producto.</span></div>
        <div className="spec-cell"><span className="k">Roles</span><span className="v">RBAC</span><span className="d">Admin · recepción · estilista.</span></div>
        <div className="spec-cell"><span className="k">Pagos</span><span className="v">SINPE</span><span className="d">Efectivo, tarjeta y SINPE Móvil.</span></div>
        <div className="spec-cell"><span className="k">Acceso</span><span className="v">Web</span><span className="d">Desde compu, tablet o celular.</span></div>
      </div>
    </div>
  </section>
);

/* ================================================================
   Pricing
   ================================================================ */
const Pricing = () => (
  <section className="section" id="precios">
    <div className="wrap">
      <div className="section-h">
        <span className="eyebrow">Precios</span>
        <h2>Un precio claro <em>por salón</em>, no por factura.</h2>
        <p>Sin sorpresas. Sin "por cita". Sin recargo por enviar a Hacienda. Sin upcharge por el catálogo ni las promociones.</p>
      </div>
      <div className="pricing">
        <div className="plan">
          <div className="plan-name">Express</div>
          <h4>Salón pequeño</h4>
          <div className="price-row">
            <span className="price-amount">$100</span>
            <span className="price-suffix">/ mes · 1 sucursal</span>
          </div>
          <div className="plan-desc">Para el salón de 1 a 2 sillas que quiere agenda y facturación electrónica ya.</div>
          <ul className="plan-features">
            <li><Icon name="check" size={13}/>Hasta 2 estilistas</li>
            <li><Icon name="check" size={13}/>Agenda y clientes (CRM)</li>
            <li><Icon name="check" size={13}/>Servicios y punto de venta</li>
            <li><Icon name="check" size={13}/>Facturación electrónica</li>
            <li><Icon name="check" size={13}/>Inventario básico</li>
          </ul>
          <button className="plan-cta">Empezar</button>
        </div>
        <div className="plan featured">
          <div className="plan-badge">RECOMENDADO</div>
          <div className="plan-name">Salón</div>
          <h4>Salón &amp; Belleza</h4>
          <div className="price-row">
            <span className="price-amount" style={{color:"white"}}>$200</span>
            <span className="price-suffix">/ mes · equipo completo</span>
          </div>
          <div className="plan-desc">Para salones con varias sillas, recepción e inventario de insumos y productos.</div>
          <ul className="plan-features">
            <li><Icon name="check" size={13}/>Estilistas ilimitados</li>
            <li><Icon name="check" size={13}/>Comisiones por estilista</li>
            <li><Icon name="check" size={13}/>Bodega: productos + insumos</li>
            <li><Icon name="check" size={13}/>Compras a proveedores</li>
            <li><Icon name="check" size={13}/>Publicidad y catálogo PDF</li>
            <li><Icon name="check" size={13}/>Reportes y morosidad</li>
          </ul>
          <button className="plan-cta">Solicitar demo</button>
        </div>
        <div className="plan">
          <div className="plan-name">Cadena</div>
          <h4>Varias sucursales</h4>
          <div className="price-row">
            <span className="price-amount price-amount-sm">A medida</span>
          </div>
          <div className="plan-desc">Para cadenas de salones y franquicias con varias sedes y un solo tablero.</div>
          <ul className="plan-features">
            <li><Icon name="check" size={13}/>Multi-sucursal</li>
            <li><Icon name="check" size={13}/>Reportes consolidados</li>
            <li><Icon name="check" size={13}/>Roles y permisos por sede</li>
            <li><Icon name="check" size={13}/>Migración de datos incluida</li>
            <li><Icon name="check" size={13}/>Capacitación al equipo</li>
            <li><Icon name="check" size={13}/>Soporte prioritario</li>
          </ul>
          <button className="plan-cta">Hablemos</button>
        </div>
      </div>
    </div>
  </section>
);

/* ================================================================
   Final CTA
   ================================================================ */
const FinalCTA = () => (
  <section className="final-cta">
    <div className="wrap">
      <h2>Tu salón, <em>bajo control</em> desde hoy.</h2>
      <p>Demo de 30 minutos con tu equipo. Migramos tus clientes y servicios sin costo en el plan Salón.</p>
      <div className="ctas">
        <button className="btn btn-accent btn-lg">Agendar demo <Icon name="arrow_r" size={13}/></button>
        <button className="btn btn-outline btn-lg">Hablar con ventas</button>
      </div>
      <div style={{marginTop:32, fontFamily:"var(--f-mono)", fontSize:11, color:"var(--ink-3)", letterSpacing:".08em"}}>
        FE 4.4 · HACIENDA CR · SINPE MÓVIL · ARGUEDASONE — CALIDAD &amp; SERVICIO
      </div>
    </div>
  </section>
);

/* ================================================================
   Footer
   ================================================================ */
const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer-grid">
        <div className="footer-col">
          <div className="brand" style={{marginBottom:14}}>
            <div className="brand-mark">F</div>
            <div className="brand-name" style={{color:"white"}}>FashionOne</div>
          </div>
          <p style={{fontSize:12.5, lineHeight:1.5, maxWidth:280, color:"rgba(255,255,255,0.55)"}}>
            El sistema integral para salones de belleza y peluquerías. Hecho en Costa Rica por ArguedasOne.
          </p>
        </div>
        <div className="footer-col">
          <h5>Producto</h5>
          <a>Agenda</a><a>Clientes</a><a>Servicios</a><a>Facturación</a><a>Inventario</a>
        </div>
        <div className="footer-col">
          <h5>Empresa</h5>
          <a>Nosotros</a><a>Clientes</a><a>Trabajá con nosotros</a><a>Contacto</a>
        </div>
        <div className="footer-col">
          <h5>Recursos</h5>
          <a>Guías</a><a>Hacienda / FE 4.4</a><a>Novedades</a><a>Estado</a>
        </div>
        <div className="footer-col">
          <h5>Legal</h5>
          <a>Privacidad</a><a>Términos</a><a>Datos (Ley 8968)</a><a>Seguridad</a>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 ArguedasOne · FashionOne · Calidad &amp; Servicio</span>
        <span>v4.4 · BUILT IN CR</span>
      </div>
    </div>
  </footer>
);

/* ================================================================
   Tweaks
   ================================================================ */
const BRAND_PRESETS = /*EDITMODE-BEGIN*/{
  "preset": "ocean",
  "density": "comfortable"
}/*EDITMODE-END*/;

const PALETTES = {
  ocean:    { navy: "#103a5e", deep: "#0a2742", accent: "#2ba8d6", green: "#7cb342" },
  forest:   { navy: "#1a3a2b", deep: "#0d2218", accent: "#10b981", green: "#84cc16" },
  plum:     { navy: "#3b1d52", deep: "#240f33", accent: "#a855f7", green: "#ec4899" },
  graphite: { navy: "#1f2937", deep: "#0f1419", accent: "#f97316", green: "#eab308" },
};

const Tweaks = () => {
  const [t, setTweak] = useTweaks(BRAND_PRESETS);

  useEffect(()=>{
    const p = PALETTES[t.preset] || PALETTES.ocean;
    const r = document.documentElement;
    r.style.setProperty("--brand-navy", p.navy);
    r.style.setProperty("--brand-navy-deep", p.deep);
    r.style.setProperty("--brand-accent", p.accent);
    r.style.setProperty("--brand-accent-2", p.green);
    document.body.dataset.density = t.density;
  }, [t.preset, t.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Marca">
        <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:8}}>
          {Object.entries(PALETTES).map(([k,p])=>(
            <button
              key={k}
              onClick={()=>setTweak("preset", k)}
              style={{
                border: t.preset===k ? "2px solid #0a2540" : "1px solid #dde4ec",
                background:"white",
                borderRadius:8, padding:8, cursor:"pointer",
                display:"flex", flexDirection:"column", gap:6, alignItems:"center",
              }}>
              <div style={{display:"flex", gap:2}}>
                <div style={{width:14, height:14, background:p.navy, borderRadius:3}}/>
                <div style={{width:14, height:14, background:p.accent, borderRadius:3}}/>
                <div style={{width:14, height:14, background:p.green, borderRadius:3}}/>
              </div>
              <div style={{fontSize:10, textTransform:"capitalize", color:"#3d556f"}}>{k}</div>
            </button>
          ))}
        </div>
      </TweakSection>
      <TweakSection title="Densidad">
        <TweakRadio
          value={t.density}
          onChange={(v)=>setTweak("density", v)}
          options={[
            {value:"comfortable", label:"Cómoda"},
            {value:"compact", label:"Compacta"},
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

/* ================================================================
   App root
   ================================================================ */
const App = () => (
  <>
    <Nav/>
    <Hero/>
    <ProductSection/>
    <Features/>
    <Workflow/>
    <SpecRail/>
    <Pricing/>
    <FinalCTA/>
    <Footer/>
    <Tweaks/>
  </>
);

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