// Marketing UI components — Kallpasoft
// Loaded as JSX via Babel. Components are exposed via `window` for cross-script access.

const { useState } = React;

function MarketingHeader({ active = "home", onNav }) {
  const links = [
    { id: "home",      label: "Inicio" },
    { id: "services",  label: "Servicios" },
    { id: "cases",     label: "Casos" },
    { id: "thinking",  label: "Pensamiento" },
    { id: "contact",   label: "Contacto" },
  ];
  return (
    <header style={mkStyles.header} className="ks-header">
      <div style={mkStyles.headerInner} className="ks-header-inner">
        <a href="#" onClick={(e) => { e.preventDefault(); onNav?.("home"); }} style={mkStyles.brand} className="ks-brand">
          <img src="./assets/logomark.svg" width="22" height="22" alt="" />
          <span style={mkStyles.brandWord}>kallpasoft</span>
        </a>
        <nav style={mkStyles.nav} className="ks-nav">
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`}
               onClick={(e) => { e.preventDefault(); onNav?.(l.id); }}
               style={{...mkStyles.navLink, ...(active === l.id ? mkStyles.navLinkActive : null)}}>
              {l.label}
            </a>
          ))}
        </nav>
        <div style={mkStyles.headerRight} className="ks-header-right">
          <span style={mkStyles.langSwitch} className="ks-lang">ES <span style={{color: "var(--niebla-300)"}}>·</span> <span style={{color: "var(--fg-subtle)"}}>EN</span></span>
          <button style={mkStyles.btnPrimarySm} onClick={() => onNav?.("contact")}>Hablemos →</button>
        </div>
      </div>
    </header>
  );
}

function Eyebrow({ children, num }) {
  return (
    <div style={mkStyles.eyebrow}>
      {num != null && <span style={mkStyles.eyebrowNum}>{String(num).padStart(2, "0")}</span>}
      <span>{children}</span>
    </div>
  );
}

function Hero({ onCta }) {
  return (
    <section style={mkStyles.hero} className="ks-hero">
      <div style={mkStyles.topoBg} aria-hidden="true" />
      <div style={mkStyles.heroInner} className="ks-hero-inner">
        <Eyebrow num={1}>Software a medida · Lima, Perú</Eyebrow>
        <h1 style={mkStyles.heroTitle} className="ks-hero-title">
          Software con <em style={mkStyles.heroEm}>kallpa.</em><br/>
          Hecho contigo, no para ti.
        </h1>
        <p style={mkStyles.heroLead} className="ks-hero-lead">
          Somos un equipo pequeño que construye software a medida para empresas
          de servicios y ferreterías. Sin agencia, sin intermediarios — el
          equipo que diseña es el mismo que codea.
        </p>
        <div style={mkStyles.heroCtas} className="ks-hero-ctas">
          <button style={mkStyles.btnPrimary} onClick={onCta}>Empezar un proyecto →</button>
          <button style={mkStyles.btnSecondary}>Ver cómo trabajamos</button>
        </div>
      </div>
    </section>
  );
}

function ServicesGrid() {
  const items = [
    { num: 1, title: "Inventario para ferreterías", body: "POS, multi-sucursal, lectura de código de barras y conciliación con SUNAT.", tag: "Vertical" },
    { num: 2, title: "Operaciones para servicios", body: "Agenda, partes de trabajo en campo, facturación y cobranza en un solo flujo.", tag: "Vertical" },
    { num: 3, title: "Migraciones desde Excel", body: "Sacamos tu negocio de hojas frágiles sin perder lo que ya funciona.", tag: "Práctica" },
    { num: 4, title: "Integraciones a la medida", body: "SUNAT, pasarelas de pago, ERPs locales. Lo que necesites conectar.", tag: "Práctica" },
  ];
  return (
    <section style={mkStyles.section} className="ks-section">
      <div style={mkStyles.sectionHead}>
        <Eyebrow num={2}>Lo que hacemos</Eyebrow>
        <h2 style={mkStyles.h2} className="ks-h2">Pequeños proyectos, hechos con cuidado.</h2>
      </div>
      <div style={mkStyles.servicesGrid} className="ks-services-grid">
        {items.map(it => (
          <article key={it.num} style={mkStyles.serviceCard}>
            <div style={mkStyles.serviceTop}>
              <span style={mkStyles.serviceNum}>0{it.num}</span>
              <span style={mkStyles.serviceTag}>{it.tag}</span>
            </div>
            <h3 style={mkStyles.serviceTitle}>{it.title}</h3>
            <p style={mkStyles.serviceBody}>{it.body}</p>
            <a href="#" style={mkStyles.serviceLink}>Ver caso →</a>
          </article>
        ))}
      </div>
    </section>
  );
}

function ProcessSteps() {
  const steps = [
    { n: "01", t: "Conversamos", b: "Una llamada, sin formularios. Entendemos tu operación real, no la idealizada." },
    { n: "02", t: "Plan corto", b: "Te entregamos un plan en una página, con plazos honestos y precio cerrado." },
    { n: "03", t: "Sprints de 2 semanas", b: "Demo cada viernes. Ajustes en caliente. Tú ves lo que se construye." },
    { n: "04", t: "Acompañamiento", b: "Cuando se cae algo a las 6pm un viernes, contestamos. No vendemos y desaparecemos." },
  ];
  return (
    <section style={{...mkStyles.section, background: "var(--bg-sunken)"}} className="ks-section ks-section-sunken">
      <div style={mkStyles.sectionHead}>
        <Eyebrow num={3}>Cómo trabajamos</Eyebrow>
        <h2 style={mkStyles.h2} className="ks-h2">Cuatro pasos. Sin agencia.</h2>
      </div>
      <ol style={mkStyles.process} className="ks-process">
        {steps.map(s => (
          <li key={s.n} style={mkStyles.processItem}>
            <span style={mkStyles.processNum}>{s.n}</span>
            <h3 style={mkStyles.processTitle}>{s.t}</h3>
            <p style={mkStyles.processBody}>{s.b}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}

function Testimonial() {
  return (
    <section style={mkStyles.section} className="ks-section">
      <figure style={mkStyles.quoteBlock} className="ks-quote-block">
        <span style={mkStyles.quoteMark} className="ks-quote-mark" aria-hidden="true">"</span>
        <blockquote style={mkStyles.quoteText} className="ks-quote-text">
          Cayó un viernes a las 6&nbsp;pm. A las 8&nbsp;pm ya estaba arriba. <em>Allin</em> &mdash; bien hecho.
        </blockquote>
        <figcaption style={mkStyles.quoteAttrib}>
          <span style={mkStyles.quoteRule}/>
          <span><strong style={{color: "var(--fg)"}}>Ana Manrique</strong> · Operaciones, El Constructor SAC</span>
        </figcaption>
      </figure>
    </section>
  );
}

function ContactCta({ onSubmit }) {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section style={mkStyles.contact} className="ks-contact">
      <div style={mkStyles.contactInner}>
        <Eyebrow num={5}>Hablemos</Eyebrow>
        <h2 style={mkStyles.h2Light} className="ks-h2-light">¿Tienes un proyecto en mente?</h2>
        <p style={mkStyles.contactLead} className="ks-contact-lead">Te respondemos en menos de 24&nbsp;h. Sin formulario largo, sin embudos.</p>
        {!sent ? (
          <form style={mkStyles.form} className="ks-form" onSubmit={(e) => { e.preventDefault(); if(email) { setSent(true); onSubmit?.(email); }}}>
            <input style={mkStyles.formInput} className="ks-form-input" placeholder="tu@empresa.pe" value={email} onChange={(e)=>setEmail(e.target.value)} type="email" aria-label="Email"/>
            <button style={mkStyles.btnPrimaryDark} className="ks-form-submit" type="submit">Empezar conversación →</button>
          </form>
        ) : (
          <div style={mkStyles.formSent}>
            <span style={mkStyles.dot}/>
            Listo. Te escribimos a <strong>{email}</strong> en menos de 24h.
          </div>
        )}
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={mkStyles.footer} className="ks-footer">
      <div style={mkStyles.footerInner} className="ks-footer-inner">
        <div style={mkStyles.footerBrand}>
          <img src="./assets/logomark.svg" width="20" height="20" alt=""/>
          <span style={{fontWeight: 500, color: "var(--fg)"}}>kallpasoft</span>
        </div>
        <div style={mkStyles.footerCols} className="ks-footer-cols">
          <div>
            <div style={mkStyles.footerHead}>Empresa</div>
            <a href="#home" style={mkStyles.footerLink}>Sobre nosotros</a>
            <a href="#contact" style={mkStyles.footerLink}>Contacto</a>
          </div>
          <div>
            <div style={mkStyles.footerHead}>Trabajo</div>
            <a href="#services" style={mkStyles.footerLink}>Servicios</a>
            <a href="#cases" style={mkStyles.footerLink}>Cómo trabajamos</a>
          </div>
          <div>
            <div style={mkStyles.footerHead}>Contacto</div>
            <a href="mailto:hola@kallpasoft.pe" style={mkStyles.footerLink}>hola@kallpasoft.pe</a>
            <a style={mkStyles.footerLink}>Lima, Perú</a>
          </div>
        </div>
      </div>
      <div style={mkStyles.footerBottom} className="ks-footer-bottom">
        <span>© 2026 Kallpasoft S.A.C.</span>
        <span style={{fontFamily: "var(--font-mono)", color: "var(--fg-subtle)"}}>kallpa · fuerza, energía vital</span>
      </div>
    </footer>
  );
}

const mkStyles = {
  header: { position: "sticky", top: 0, zIndex: 10, background: "rgba(245,247,249,0.85)", backdropFilter: "blur(12px) saturate(140%)", borderBottom: "1px solid var(--border)" },
  headerInner: { maxWidth: 1280, margin: "0 auto", padding: "12px 32px", display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 24 },
  brand: { display: "flex", alignItems: "center", gap: 8, textDecoration: "none", color: "var(--fg)" },
  brandWord: { fontSize: 16, fontWeight: 500, letterSpacing: "-0.02em" },
  nav: { display: "flex", gap: 6, justifySelf: "center" },
  navLink: { fontSize: 14, color: "var(--fg-muted)", textDecoration: "none", padding: "6px 10px", borderRadius: 4, transition: "background 120ms cubic-bezier(0.2,0.7,0.1,1), color 120ms" },
  navLinkActive: { color: "var(--fg)", background: "var(--bg-sunken)" },
  headerRight: { display: "flex", alignItems: "center", gap: 14 },
  langSwitch: { fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--fg)", whiteSpace: "nowrap" },
  btnPrimarySm: { height: 32, padding: "0 14px", borderRadius: 4, background: "var(--accent)", color: "var(--accent-fg)", border: 0, fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, cursor: "pointer", whiteSpace: "nowrap" },

  hero: { position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border)" },
  topoBg: { position: "absolute", inset: 0, backgroundImage: "url(./assets/topo-pattern.svg)", backgroundSize: 600, backgroundPosition: "center", opacity: 0.12, pointerEvents: "none" },
  heroInner: { position: "relative", maxWidth: 1280, margin: "0 auto", padding: "96px 32px 80px" },
  heroTitle: { fontFamily: "var(--font-sans)", fontSize: 72, lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 500, color: "var(--fg)", margin: "16px 0 24px", maxWidth: 880 },
  heroEm: { fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, color: "var(--accent)" },
  heroLead: { fontSize: 20, lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 620, margin: 0 },
  heroCtas: { display: "flex", gap: 12, marginTop: 32 },

  eyebrow: { display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--fg-subtle)" },
  eyebrowNum: { display: "inline-block", padding: "1px 6px", border: "1px solid var(--border-strong)", borderRadius: 2, color: "var(--fg)" },

  btnPrimary: { display: "inline-flex", alignItems: "center", gap: 8, height: 44, padding: "0 20px", borderRadius: 4, background: "var(--accent)", color: "var(--accent-fg)", border: 0, fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500, cursor: "pointer", transition: "background 120ms cubic-bezier(0.2,0.7,0.1,1)" },
  btnSecondary: { display: "inline-flex", alignItems: "center", gap: 8, height: 44, padding: "0 20px", borderRadius: 4, background: "transparent", color: "var(--fg)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500, cursor: "pointer" },
  btnPrimaryDark: { height: 48, padding: "0 24px", borderRadius: 4, background: "var(--hielo)", color: "var(--cordillera)", border: 0, fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500, cursor: "pointer" },

  section: { maxWidth: 1280, margin: "0 auto", padding: "96px 32px", borderBottom: "1px solid var(--border)" },
  sectionHead: { marginBottom: 48, display: "flex", flexDirection: "column", gap: 16 },
  h2: { fontFamily: "var(--font-sans)", fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.02em", fontWeight: 500, color: "var(--fg)", margin: 0, maxWidth: 760 },
  h2Light: { fontFamily: "var(--font-sans)", fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.02em", fontWeight: 500, color: "var(--hielo)", margin: 0 },

  servicesGrid: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--border)", borderRadius: 0 },
  serviceCard: { padding: "32px 32px 28px", borderRight: "1px solid var(--border)", borderBottom: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 12, background: "var(--bg-elevated)" },
  serviceTop: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  serviceNum: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-subtle)", letterSpacing: "0.08em" },
  serviceTag: { fontFamily: "var(--font-mono)", fontSize: 11, padding: "2px 8px", border: "1px solid var(--border)", borderRadius: 999, color: "var(--fg-subtle)", textTransform: "uppercase", letterSpacing: "0.06em" },
  serviceTitle: { fontFamily: "var(--font-sans)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--fg)", margin: "8px 0 0" },
  serviceBody: { fontSize: 15, lineHeight: 1.55, color: "var(--fg-muted)", margin: 0 },
  serviceLink: { fontSize: 14, color: "var(--accent)", textDecoration: "none", marginTop: 8, fontWeight: 500 },

  process: { listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 },
  processItem: { display: "flex", flexDirection: "column", gap: 8, paddingTop: 16, borderTop: "1px solid var(--border-strong)" },
  processNum: { fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 500, color: "var(--accent)", letterSpacing: "0.08em" },
  processTitle: { fontFamily: "var(--font-sans)", fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--fg)", margin: 0 },
  processBody: { fontSize: 14, lineHeight: 1.5, color: "var(--fg-muted)", margin: 0 },

  quoteBlock: { maxWidth: 880, margin: "0 auto", textAlign: "left", padding: "32px 0" },
  quoteMark: { fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 96, lineHeight: 1, color: "var(--accent)", display: "block", marginBottom: -20 },
  quoteText: { fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, fontSize: 44, lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--fg)", margin: 0 },
  quoteAttrib: { display: "flex", alignItems: "center", gap: 14, marginTop: 28, fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--fg-subtle)" },
  quoteRule: { width: 32, height: 1, background: "var(--border-strong)" },

  contact: { background: "var(--cordillera)", color: "var(--hielo)", padding: "96px 32px", position: "relative", overflow: "hidden" },
  contactInner: { maxWidth: 1280, margin: "0 auto" },
  contactLead: { fontSize: 20, lineHeight: 1.55, color: "var(--niebla-300)", marginTop: 16, maxWidth: 580 },
  form: { display: "flex", gap: 12, marginTop: 32, maxWidth: 580 },
  formInput: { flex: 1, height: 48, padding: "0 16px", borderRadius: 4, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.15)", color: "var(--hielo)", fontFamily: "var(--font-sans)", fontSize: 15 },
  formSent: { display: "flex", alignItems: "center", gap: 10, marginTop: 32, padding: "16px 20px", border: "1px solid rgba(34,200,197,0.3)", borderRadius: 4, color: "var(--hielo)", maxWidth: 580 },
  dot: { width: 8, height: 8, borderRadius: 999, background: "#22C8C5" },

  footer: { background: "var(--bg)", borderTop: "1px solid var(--border)" },
  footerInner: { maxWidth: 1280, margin: "0 auto", padding: "48px 32px 32px", display: "grid", gridTemplateColumns: "240px 1fr", gap: 48 },
  footerBrand: { display: "flex", alignItems: "center", gap: 8, fontSize: 14 },
  footerCols: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 },
  footerHead: { fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--fg-subtle)", marginBottom: 12 },
  footerLink: { display: "block", fontSize: 14, color: "var(--fg)", textDecoration: "none", padding: "4px 0", cursor: "pointer" },
  footerBottom: { maxWidth: 1280, margin: "0 auto", padding: "20px 32px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--fg-subtle)" },
};

Object.assign(window, { MarketingHeader, Hero, ServicesGrid, ProcessSteps, Testimonial, ContactCta, Footer, Eyebrow });