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

const { useState, useEffect } = React;

function MarketingHeader({ active = 'home', onNav }) {
  const [productsOpen, setProductsOpen] = useState(false);

  useEffect(() => {
    if (!productsOpen) return;
    const close = () => setProductsOpen(false);
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, [productsOpen]);

  const links = [
    { id: 'home', label: 'Inicio' },
    { id: 'services', label: 'Servicios' },
    { id: 'products', label: 'Productos' },
    { id: 'cases', label: 'Casos' },
    { id: 'thinking', label: 'Pensamiento' },
    { id: 'contact', label: 'Contacto' },
  ];

  const products = [
    {
      label: 'Yunque',
      desc: 'ERP para ferreterías y distribuidoras',
      href: 'https://yunque.kallpasoft.com/login',
    },
    {
      label: 'PowerGymStation',
      desc: 'Gestión para gimnasios y estudios',
      href: 'https://powergymstation.com',
    },
  ];

  return (
    <header style={mkStyles.header} className="ks-header">
      <div style={mkStyles.headerInner} className="ks-header-inner">
        <button
          type="button"
          onClick={() => onNav?.('home')}
          style={{
            ...mkStyles.brand,
            background: 'none',
            border: 0,
            padding: 0,
            cursor: 'pointer',
          }}
          className="ks-brand"
        >
          <img src="./assets/logomark.svg" width="22" height="22" alt="" />
          <span style={mkStyles.brandWord}>kallpasoft</span>
        </button>
        <nav style={mkStyles.nav} className="ks-nav">
          {links.map((l) => {
            if (l.id === 'products') {
              return (
                <div
                  key="products"
                  style={{ position: 'relative', display: 'flex', alignItems: 'center' }}
                  onClick={(e) => e.stopPropagation()}
                  onKeyDown={(e) => e.stopPropagation()}
                >
                  <button
                    type="button"
                    onClick={() => setProductsOpen((o) => !o)}
                    style={{
                      ...mkStyles.navLink,
                      ...(productsOpen ? mkStyles.navLinkActive : null),
                      background: 'none',
                      border: 'none',
                      fontFamily: 'inherit',
                      cursor: 'pointer',
                    }}
                  >
                    Productos ▾
                  </button>
                  {productsOpen && (
                    <div style={mkStyles.productsDropdown}>
                      {products.map((p) => (
                        <a
                          key={p.label}
                          href={p.href}
                          target="_blank"
                          rel="noopener noreferrer"
                          style={mkStyles.productsDropdownItem}
                          onClick={() => setProductsOpen(false)}
                        >
                          <strong style={mkStyles.productsDropdownLabel}>{p.label}</strong>
                          <span style={mkStyles.productsDropdownDesc}>{p.desc}</span>
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              );
            }
            return (
              <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 type="button" style={mkStyles.btnPrimarySm} onClick={() => onNav?.('contact')}>
            Staff
          </button>
        </div>
        <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 type="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 type="button" style={mkStyles.btnPrimary} onClick={onCta}>
            Empezar un proyecto →
          </button>
          <button type="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>
            <span style={mkStyles.serviceLink}>Ver caso →</span>
          </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>
            <span style={mkStyles.footerLink}>Lima, Perú</span>
          </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',
  },

  productsDropdown: {
    position: 'absolute',
    top: 'calc(100% + 8px)',
    left: '50%',
    transform: 'translateX(-50%)',
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border)',
    borderRadius: 10,
    padding: 8,
    minWidth: 220,
    display: 'flex',
    flexDirection: 'column',
    gap: 4,
    zIndex: 100,
    boxShadow: '0 8px 24px rgba(0,0,0,.18)',
  },
  productsDropdownItem: {
    display: 'flex',
    flexDirection: 'column',
    padding: '10px 12px',
    borderRadius: 7,
    textDecoration: 'none',
    color: 'var(--fg)',
    gap: 2,
    cursor: 'pointer',
  },
  productsDropdownLabel: { fontSize: 14, fontWeight: 500, color: 'var(--fg)' },
  productsDropdownDesc: { fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.4 },

  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,
});