// Auré website UI kit — shared chrome (Nav, Footer, layout helpers)
const DS = window.AurDesignSystem_11b9b2;

const ASSETS = './assets';

// Contacto oficial
const CONTACT = {
  whatsapp: 'https://wa.me/525545670174',
  whatsappMsg: (msg) => 'https://wa.me/525545670174?text=' + encodeURIComponent(msg),
  igAure: 'https://www.instagram.com/aure.mx_/',
  igShery: 'https://www.instagram.com/sherydaengomez/',
};

function Eyebrow({ children, color = 'var(--aure-emerald)', style }) {
  return (
    <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 500,
      letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color, ...style }}>
      {children}
    </p>
  );
}

function Section({ bg, children, narrow = false, style }) {
  return (
    <section style={{ background: bg, padding: 'var(--space-9) var(--page-pad)', ...style }}>
      <div style={{ maxWidth: narrow ? 'var(--content-narrow)' : 'var(--page-max)', margin: '0 auto' }}>
        {children}
      </div>
    </section>
  );
}

function Nav({ current, onNavigate }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const links = [
    { id: 'home', label: 'Inicio' },
    { id: 'clases', label: 'Clases' },
    { id: 'membresias', label: 'Membresías' },
    { id: 'shery', label: 'Shery' },
    { id: 'comunidad', label: 'Comunidad' },
  ];
  const go = (id) => { setMobileOpen(false); onNavigate(id); };
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(248, 244, 241, 0.85)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border-subtle)',
    }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--page-pad)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '72px' }}>
        {/* Logo */}
        <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}
          style={{ display: 'flex', alignItems: 'center', gap: '12px', textDecoration: 'none' }}>
          <img src={ASSETS + '/logo/isotipo-plum.png'} alt="Auré" style={{ height: '40px' }} />
          <img src={ASSETS + '/logo/wordmark-rose.png'} alt="auré"
            style={{ height: '30px', filter: 'brightness(0) opacity(0.6)' }} />
        </a>
        {/* Desktop links */}
        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
          {links.map((l) => (
            <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); go(l.id); }} style={{
              fontFamily: 'var(--font-sans)', fontSize: '13px', letterSpacing: 'var(--tracking-nav)',
              textTransform: 'uppercase', textDecoration: 'none',
              color: current === l.id ? 'var(--aure-plum)' : 'var(--text-secondary)',
              borderBottom: current === l.id ? '1px solid var(--aure-plum)' : '1px solid transparent',
              paddingBottom: '3px', transition: 'color var(--duration-base) var(--ease-out)',
            }}>{l.label}</a>
          ))}
          <SocialIcon name="instagram" href={CONTACT.igAure} label="Instagram de Auré" color="var(--aure-plum)" size={18} />
          <SocialIcon name="message-circle" href={CONTACT.whatsappMsg('Hola Auré, quiero informes de las clases ✨')} label="WhatsApp de Auré" color="var(--aure-plum)" size={18} />
          <DS.Button size="sm" onClick={() => { window.location.href = '/registro'; }}>Quiero ser parte</DS.Button>
        </div>
        {/* Hamburger */}
        <button className="nav-hamburger" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menú">
          <span style={{ transform: mobileOpen ? 'rotate(45deg) translate(5px, 5px)' : 'none' }}></span>
          <span style={{ opacity: mobileOpen ? 0 : 1 }}></span>
          <span style={{ transform: mobileOpen ? 'rotate(-45deg) translate(5px, -5px)' : 'none' }}></span>
        </button>
      </div>
      {/* Mobile dropdown */}
      {mobileOpen && (
        <div className="nav-mobile">
          {links.map((l) => (
            <a key={l.id} href="#" data-active={current === l.id ? 'true' : 'false'}
              onClick={(e) => { e.preventDefault(); go(l.id); }}>
              {l.label}
            </a>
          ))}
          <DS.Button size="sm" onClick={() => { window.location.href = '/registro'; }}>Quiero ser parte</DS.Button>
        </div>
      )}
    </nav>
  );
}

function SocialIcon({ name, href, label, color = 'var(--aure-rose)', size = 20 }) {
  const icon = (
    <span aria-hidden="true" style={{
      display: 'inline-block', width: size + 'px', height: size + 'px', backgroundColor: color,
      WebkitMaskImage: `url(https://unpkg.com/lucide-static@0.469.0/icons/${name}.svg)`,
      maskImage: `url(https://unpkg.com/lucide-static@0.469.0/icons/${name}.svg)`,
      WebkitMaskSize: 'contain', maskSize: 'contain', WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
    }}></span>
  );
  if (!href) return icon;
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={label || name}
      style={{ display: 'inline-flex', lineHeight: 0 }}>{icon}</a>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--surface-emerald)', padding: '80px var(--page-pad) 48px' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '48px' }}>
        <img src={ASSETS + '/logo/wordmark-rose.png'} alt="auré — brillo, esencia y movimiento que nos une" style={{ width: '300px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: '24px' }}>
          <p style={{ margin: 0, font: 'var(--text-quote)', fontSize: '22px', color: 'var(--text-on-emerald)', maxWidth: '420px' }}>
            Aquí bailar es una forma de pertenecer, sanar y brillar.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '14px' }}>
            <div style={{ display: 'flex', gap: '20px' }}>
              <SocialIcon name="instagram" href={CONTACT.igAure} label="Instagram @aure.mx_" />
              <SocialIcon name="message-circle" href={CONTACT.whatsappMsg('Hola Auré ✨')} label="WhatsApp 55 4567 0174" />
            </div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: '13px', letterSpacing: '0.04em', color: 'rgba(233,239,233,0.75)', textAlign: 'right' }}>
              <a href={CONTACT.igAure} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--aure-rose)', textDecoration: 'none' }}>@aure.mx_</a>
              {' · '}
              <a href={CONTACT.igShery} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--aure-rose)', textDecoration: 'none' }}>@sherydaengomez</a>
              <br />
              <a href={CONTACT.whatsapp} target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(233,239,233,0.75)', textDecoration: 'none' }}>WhatsApp · 55 4567 0174</a>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--border-inverse)', paddingTop: '24px',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px',
          fontFamily: 'var(--font-sans)', fontSize: '12px', letterSpacing: '0.06em', color: 'rgba(233,239,233,0.6)' }}>
          <span>© 2026 Auré · Ciudad de México</span>
          <span style={{ display: 'flex', gap: '24px' }}><span>Aviso de privacidad</span><span>Políticas</span></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AureShared: { Eyebrow, Section, Nav, Footer, SocialIcon, ASSETS, CONTACT } });