/* 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">C</div>
          <div className="brand-name">Clinic</div>
        </a>
        <nav className="nav-links">
          <a href="#producto">Producto</a>
          <a href="#flujo">Flujo clínico</a>
          <a href="#especs">Especificaciones</a>
          <a href="#precios">Precios</a>
          <a href="#">Cambios</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 expediente clínico<br/>
        para <em>salud mental</em>,<br/>
        sin fricción.
      </h1>
      <p className="hero-sub">
        Clinic es el EHR que tu centro de psicología siempre quiso: agenda enterprise,
        notas SOAP / DAP / BIRP / EMDR, tests psicométricos validados y facturación
        electrónica — todo en un mismo flujo, cifrado y auditado.
      </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">62%</span><span className="lbl">— Menos tiempo en notas</span></div>
        <div className="hero-stat"><span className="num">9</span><span className="lbl">— Tests psicométricos</span></div>
        <div className="hero-stat"><span className="num">DSM-5</span><span className="lbl">— + CIE-11</span></div>
        <div className="hero-stat"><span className="num">99.97%</span><span className="lbl">— Uptime últimos 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"}}>EHR 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 ven tus terapeutas.
        </div>
      </div>
      <ProductPreview initial="dashboard"/>
    </div>
  </section>
);

/* ================================================================
   Feature grid
   ================================================================ */
const features = [
  { icon:"cal", title:"Agenda enterprise",
    desc:"Vista semana, día y mes con detección de conflictos por sala, terapeuta y modalidad. Recurrencias, recordatorios y bloqueo de horarios.",
    tags:["semana","día","mes","recurrencias"]},
  { icon:"shield", title:"Expedientes cifrados",
    desc:"Datos clínicos AES-256 en reposo, TLS 1.3 en tránsito. Cumple Ley 8968 (CR) y diseño compatible con HIPAA / RGPD.",
    tags:["AES-256","Ley 8968","HIPAA-ready"]},
  { icon:"chart", title:"Tests psicométricos",
    desc:"9 instrumentos validados — PHQ-9, GAD-7, BDI-II, ASRS, HAM-D, MMPI-2, WAIS-IV, WISC-V — con corrección automática y baremos.",
    tags:["PHQ-9","GAD-7","WAIS-IV"]},
  { icon:"file", title:"DSM-5 / CIE-11",
    desc:"Catálogo completo, búsqueda instantánea, severidad, estados (activo/remisión/resuelto) y vínculo automático con tratamientos.",
    tags:["DSM-5","CIE-11","severidad"]},
  { icon:"money", title:"Facturación electrónica",
    desc:"Comprobantes 4.4 con envío automático a Hacienda CR. PDF + XML + respuesta firmada, conciliación con pagos y morosidad.",
    tags:["Hacienda CR","FE 4.4","XML"]},
  { icon:"users", title:"Portal del paciente",
    desc:"Acceso seguro a citas, recetas, anexos y resultados de tests. Activación con un click desde la ficha del paciente.",
    tags:["citas","recetas","resultados"]},
];

const Features = () => (
  <section className="section" id="caracteristicas">
    <div className="wrap">
      <div className="section-h">
        <span className="eyebrow">Por qué Clinic</span>
        <h2>Todo lo que el centro necesita — <em>nada de lo que no</em>.</h2>
        <p>Construido junto a 14 clínicas de salud mental en Costa Rica. Sin módulos genéricos, sin terminología hospitalaria, sin SaaS que se siente como un ERP.</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">Flujo clínico</span>
        <h2>De la primera cita al alta — <em>en un mismo hilo</em>.</h2>
        <p>Tres movimientos. Sin saltar entre Excel, WhatsApp y el papel.</p>
      </div>
      <div className="workflow">
        <div className="step">
          <div className="step-num">01</div>
          <h4>Agendá y recibí</h4>
          <p>Recepción confirma la cita por WhatsApp automático. El paciente firma consentimiento desde el portal antes de llegar.</p>
        </div>
        <div className="step">
          <div className="step-num">02</div>
          <h4>Atendé y documentá</h4>
          <p>Plantillas SOAP / DAP / BIRP / EMDR. Aplicá tests con corrección automática. Adjuntá audio, imágenes y PDFs cifrados.</p>
        </div>
        <div className="step">
          <div className="step-num">03</div>
          <h4>Cobrá y archivá</h4>
          <p>Factura electrónica enviada a Hacienda al cerrar la cita. Receta digital firmada. Próxima cita sugerida según el plan de tratamiento.</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>Listo para <em>auditar</em>.</h2>
        </div>
        <p>Clinic es lo que tu departamento legal, tu CISO y la directora del centro auditan en la misma reunión — y todos firman.</p>
      </div>
      <div className="spec-grid">
        <div className="spec-cell"><span className="k">Cifrado en reposo</span><span className="v">AES-256</span><span className="d">Datos clínicos sensibles cifrados a nivel campo.</span></div>
        <div className="spec-cell"><span className="k">Transporte</span><span className="v">TLS 1.3</span><span className="d">HSTS, certificate pinning opcional.</span></div>
        <div className="spec-cell"><span className="k">Auditoría</span><span className="v">100%</span><span className="d">Trazabilidad por usuario · IP · acción.</span></div>
        <div className="spec-cell"><span className="k">Backup</span><span className="v">15 min</span><span className="d">RPO objetivo, geo-redundante.</span></div>
        <div className="spec-cell"><span className="k">SSO</span><span className="v">SAML / OIDC</span><span className="d">Google, Microsoft, Okta. MFA obligatorio.</span></div>
        <div className="spec-cell"><span className="k">Roles</span><span className="v">RBAC</span><span className="d">Admin · terapeuta · recepción · paciente.</span></div>
        <div className="spec-cell"><span className="k">API</span><span className="v">REST + WH</span><span className="d">Webhooks firmados con HMAC-SHA256.</span></div>
        <div className="spec-cell"><span className="k">Cumplimiento</span><span className="v">Ley 8968</span><span className="d">HIPAA-ready · RGPD-compatible.</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>Cobramos por <em>terapeuta activo</em>, no por consulta.</h2>
        <p>Sin sorpresas. Sin "por cita". Sin recargo por enviar a Hacienda. Sin upcharge por el portal del paciente.</p>
      </div>
      <div className="pricing">
        <div className="plan">
          <div className="plan-name">Solo</div>
          <h4>Práctica individual</h4>
          <div className="price-row">
            <span className="price-amount">$100</span>
            <span className="price-suffix">/ · mes máximo 2 terapeutas</span>
          </div>
          <div className="plan-desc">Para psicólogos independientes que cobran electrónico y quieren expediente cifrado.</div>
          <ul className="plan-features">
            <li><Icon name="check" size={13}/>Hasta 40 pacientes activos</li>
            <li><Icon name="check" size={13}/>Agenda · notas SOAP/DAP</li>
            <li><Icon name="check" size={13}/>Facturación electrónica</li>
            <li><Icon name="check" size={13}/>5 tests psicométricos</li>
            <li><Icon name="check" size={13}/>Portal del paciente</li>
          </ul>
          <button className="plan-cta">Empezar</button>
        </div>
        <div className="plan featured">
          <div className="plan-badge">RECOMENDADO</div>
          <div className="plan-name">Centro</div>
          <h4>Centro de psicología</h4>
          <div className="price-row">
            <span className="price-amount" style={{color:"white"}}>$500</span>
            <span className="price-suffix">/ · mes</span>
          </div>
          <div className="plan-desc">Para clínicas con 3 a 20 terapeutas. Salas, recepción, reportes ejecutivos.</div>
          <ul className="plan-features">
            <li><Icon name="check" size={13}/>Pacientes ilimitados</li>
            <li><Icon name="check" size={13}/>Multi-terapeuta · multi-sala</li>
            <li><Icon name="check" size={13}/>9 tests psicométricos</li>
            <li><Icon name="check" size={13}/>Dashboard ejecutivo + reportes</li>
            <li><Icon name="check" size={13}/>Morosidad · plantillas firmadas</li>
            <li><Icon name="check" size={13}/>SSO · auditoría total</li>
          </ul>
          <button className="plan-cta">Solicitar demo</button>
        </div>
        <div className="plan">
          <div className="plan-name">Enterprise</div>
          <h4>Red clínica</h4>
          <div className="price-row">
            <span className="price-amount price-amount-sm">A medida</span>
          </div>
          <div className="plan-desc">Hospitales, redes de salud mental, integraciones con HIS / LIS / programas estatales.</div>
          <ul className="plan-features">
            <li><Icon name="check" size={13}/>Multi-sede · multi-tenant</li>
            <li><Icon name="check" size={13}/>SLA 99.99% con penalización</li>
            <li><Icon name="check" size={13}/>SSO corporativo · SCIM</li>
            <li><Icon name="check" size={13}/>BAA / DPA firmado</li>
            <li><Icon name="check" size={13}/>Onboarding dedicado</li>
            <li><Icon name="check" size={13}/>Hosting en CR opcional</li>
          </ul>
          <button className="plan-cta">Hablemos</button>
        </div>
      </div>
    </div>
  </section>
);

/* ================================================================
   Final CTA
   ================================================================ */
const FinalCTA = () => (
  <section className="final-cta">
    <div className="wrap">
      <h2>¿Listos para <em>cerrar</em> el último Excel?</h2>
      <p>Demo de 30 minutos con tu equipo. Migramos tus pacientes y citas sin costo en el plan Centro.</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"}}>
        AES-256 · TLS 1.3 · AUDITORÍA TOTAL · SOC 2 EN PROCESO
      </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">C</div>
            <div className="brand-name" style={{color:"white"}}>Clinic</div>
          </div>
          <p style={{fontSize:12.5, lineHeight:1.5, maxWidth:280, color:"rgba(255,255,255,0.55)"}}>
            El expediente clínico para salud mental. Hecho en Costa Rica por terapeutas e ingenieros.
          </p>
        </div>
        <div className="footer-col">
          <h5>Producto</h5>
          <a>Agenda</a><a>Expedientes</a><a>Tests</a><a>Facturación</a><a>Portal</a>
        </div>
        <div className="footer-col">
          <h5>Empresa</h5>
          <a>Nosotros</a><a>Clientes</a><a>Carreras</a><a>Prensa</a>
        </div>
        <div className="footer-col">
          <h5>Recursos</h5>
          <a>Documentación</a><a>API</a><a>Cambios</a><a>Estado</a>
        </div>
        <div className="footer-col">
          <h5>Legal</h5>
          <a>Privacidad</a><a>Términos</a><a>BAA / DPA</a><a>Seguridad</a>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 ArguedasOne · Todos los derechos reservados</span>
        <span>v3.4.1 · BUILT IN CR</span>
      </div>
    </div>
  </footer>
);

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

const PALETTES = {
  ocean:    { navy: "#0d2a44", deep: "#061a2d", accent: "#16b6cf", green: "#6cba3e" },
  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/>);