const DS = window.BaumannCoDS6_9a0e65 || {};
const { Button, Icon, IndexRow, Label } = DS;
const MEET = 'https://meetings.hubspot.com/manuel-baumann';
const NAV = [
  { label: 'Problema', href: '#problema', screen: 'home' },
  { label: 'Método ORCA', href: '#metodo', screen: 'metodo' },
  { label: 'Evidencia', href: '#evidencia', screen: 'home' },
  { label: 'Diagnóstico', href: '#diagnostico', screen: 'diagnostico' },
];

function Menu({ open, onClose, go }) {
  if (!open) return null;
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'var(--forest)', color: 'var(--paper)', display: 'flex', flexDirection: 'column', padding: 'clamp(20px,4vw,40px)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <img src="./assets/logo-small-blanco.svg" alt="Baumann &Company" style={{ width: 148, height: 'auto', display: 'block' }} />
        <button onClick={onClose} aria-label="Cerrar menú" style={{ background: 'none', border: '1px solid rgba(244,242,236,.22)', borderRadius: 4, width: 40, height: 40, color: 'var(--paper)', cursor: 'pointer', display: 'grid', placeItems: 'center' }}><Icon name="x" /></button>
      </div>
      <div style={{ margin: 'auto 0', maxWidth: 760 }}>
        {NAV.map((n, i) => (
          <IndexRow key={n.label} tone="dark" index={String(i + 1).padStart(2, '0')} title={n.label}
            onClick={() => { go(n.screen); onClose(); }} meta="" />
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <Button href={MEET} variant="primary" size="lg" iconRight={<Icon name="arrow-up-right" size={16} />}>Agendar diagnóstico</Button>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(244,242,236,.6)' }}>hola@baumannco.com</span>
      </div>
    </div>
  );
}

function Header({ tone, screen, go }) {
  const [menu, setMenu] = React.useState(false);
  return (<>
    <header style={{ position: 'sticky', top: 0, zIndex: 40, height: 'var(--header-h)', display: 'flex', alignItems: 'center', gap: 28, padding: '10px clamp(24px,4vw,48px)', background: 'var(--white)', borderBottom: '1px solid var(--border)' }}>
      <a href="#top" aria-label="Baumann &Company, inicio" style={{ display: 'inline-flex', alignItems: 'center', flex: '0 0 auto' }}>
        <img className="ds10-header-logo" src="./assets/logo-small-azul.svg" alt="Baumann &Company" />
      </a>
      <nav className="ds10-hide-mobile" aria-label="Navegación principal" style={{ display: 'flex', alignItems: 'center', gap: 28, marginLeft: 'auto' }}>
        {NAV.slice(0, 3).map(n => <a key={n.label} href={n.href} onClick={(e) => { if (n.screen !== 'home') { e.preventDefault(); go(n.screen); } }} style={{ color: 'var(--navy)', fontSize: 14, textDecoration: 'none' }}>{n.label}</a>)}
      </nav>
      <a className="ds10-hide-mobile" href={MEET} style={{ background: 'var(--action)', color: 'var(--white)', minHeight: 44, display: 'inline-flex', alignItems: 'center', padding: '0 20px', fontSize: 14, fontWeight: 600, textDecoration: 'none' }}>Conversemos</a>
      <button className="ds10-show-mobile" aria-label="Abrir menú" onClick={() => setMenu(true)} style={{ marginLeft: 'auto', width: 44, height: 44, placeItems: 'center', background: 'transparent', color: 'var(--navy)', border: '1px solid var(--border)', cursor: 'pointer' }}><Icon name="menu" /></button>
    </header>
    <Menu open={menu} onClose={() => setMenu(false)} go={go} />
  </>);
}

function Footer({ go }) {
  return (
    <footer style={{ background: 'var(--navy)', color: 'var(--white)', padding: '96px clamp(24px,4vw,48px) 32px' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gap: 48 }}>
        <div className="ds10-stack" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.2fr) minmax(0,.8fr)', gap: 48, alignItems: 'end' }}>
          <div>
            <Label tone="inverse" index="05">Invitación</Label>
            <h2 style={{ margin: '18px 0 0', font: 'var(--text-display)', letterSpacing: 'var(--ls-tight)' }}>Una conversación de diagnóstico, sin propuesta comercial.</h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
            <Button href={MEET} variant="primary" size="lg" iconRight={<Icon name="arrow-up-right" size={16} />}>Agendar 45 minutos</Button>
            <a href="mailto:hola@baumannco.com" style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'rgba(244,242,236,.7)', textDecoration: 'none' }}>hola@baumannco.com</a>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.24)', fontFamily: 'var(--font-sans)', fontSize: 12, color: 'rgba(255,255,255,.7)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}><img src="./assets/logo-small-blanco.svg" alt="Baumann &Company" style={{ width: 130, height: 'auto' }} /> <span>ORCA®</span></span>
          <span style={{ display: 'flex', gap: 20 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('metodo'); }} style={{ color: 'inherit', textDecoration: 'none' }}>Método</a>
            <a href="#" onClick={(e) => { e.preventDefault(); go('diagnostico'); }} style={{ color: 'inherit', textDecoration: 'none' }}>Diagnóstico</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacidad</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, Menu, NAV, MEET });