// ui.jsx — Shared layout components: Nav, Footer, Logo, Button, Hero shells

const { useState, useEffect, useMemo, useRef } = React;

// ── Logo ─────────────────────────────────────────────────────
const Logo = ({ size = 'md', onClick }) =>
<div className="nav-logo" onClick={onClick}>
    <img src="photos/logo-ki-transparent.png" alt="Centro Ki — creatividad + talento" className="nav-logo-img" />
  </div>;


// ── Nav ─────────────────────────────────────────────────────
const NAV_ITEMS = [
{ id: 'inicio', label: 'Inicio' },
{ id: 'quienes', label: 'Quiénes somos' },
{ id: 'servicios', label: 'Servicios' },
{ id: 'agendar', label: 'Agendar' },
{ id: 'contacto', label: 'Contacto' }];

const isAgendarVisible = () => window.SHOW_AGENDAR_SECTION !== false;


const Nav = ({ current, onNavigate }) => {
  const [open, setOpen] = useState(false);
  const visibleNavItems = NAV_ITEMS.filter((item) => isAgendarVisible() || item.id !== 'agendar');

  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const go = (id) => { setOpen(false); onNavigate(id); };

  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <Logo onClick={() => go('inicio')} />
          <div className="nav-links">
            {visibleNavItems.map((item) =>
              <div
                key={item.id}
                className={`nav-link ${current === item.id ? 'active' : ''}`}
                onClick={() => onNavigate(item.id)}>
                {item.label}
              </div>
            )}
            {isAgendarVisible() &&
            <button className="btn btn-accent btn-sm nav-cta" onClick={() => onNavigate('agendar')}>
                Agendar sesión
              </button>
            }
          </div>
          <button
            className={`nav-toggle ${open ? 'is-open' : ''}`}
            aria-label={open ? 'Cerrar menú' : 'Abrir menú'}
            aria-expanded={open}
            aria-controls="nav-mobile"
            onClick={() => setOpen((o) => !o)}>
            <span /><span /><span />
          </button>
        </div>
      </nav>
      <div
        id="nav-mobile"
        className={`nav-mobile ${open ? 'is-open' : ''}`}
        role="dialog"
        aria-modal="true"
        aria-hidden={!open}>
        <div className="nav-mobile-inner">
          {visibleNavItems.map((item) =>
            <div
              key={item.id}
              className={`nav-mobile-link ${current === item.id ? 'active' : ''}`}
              onClick={() => go(item.id)}>
              {item.label}
            </div>
          )}
          {isAgendarVisible() &&
          <button className="btn btn-accent nav-mobile-cta" onClick={() => go('agendar')}>
              Agendar sesión
            </button>
          }
        </div>
      </div>
    </>
  );
};


// ── Footer ───────────────────────────────────────────────
const Footer = ({ onNavigate }) =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <img src="photos/logo-ki-light.png" alt="Centro Ki" style={{ height: 88, width: 'auto', display: 'block', marginBottom: 6 }} />
          <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)', maxWidth: 320 }}>
            Acompañamos el crecimiento de niños y niñas con Altas Capacidades desde la calidez, la mirada integral y el respeto por su forma única de aprender.
          </p>
        </div>
        <div>
          <h4>Centro</h4>
          <div className="footer-links">
            <a onClick={() => onNavigate('inicio')}>Inicio</a>
            <a onClick={() => onNavigate('quienes')}>Quiénes somos</a>
            <a onClick={() => onNavigate('quienes')}>Nuestro equipo</a>
            <a onClick={() => onNavigate('contacto')}>Contacto</a>
          </div>
        </div>
        <div>
          <h4>Servicios</h4>
          <div className="footer-links">
            <a onClick={() => onNavigate('servicios')}>Detección AACC</a>
            <a onClick={() => onNavigate('servicios')}>Área terapéutica</a>
            <a onClick={() => onNavigate('servicios')}>Talleres</a>
            <a onClick={() => onNavigate('servicios')}>Ki Camp</a>
            <a onClick={() => onNavigate('servicios')}>Academia Ki</a>
          </div>
        </div>
        <div>
          <h4>Contacto</h4>
          <div className="footer-contact">
            {(window.SEDES || []).map((sede) =>
              <div key={sede.name} className="footer-sede">
                <div className="footer-sede-name">{sede.name}</div>
                <div className="footer-links">
                  <a>{sede.address}, {sede.district}</a>
                  <a href={`tel:${sede.phone.replace(/\s/g, '')}`}>{sede.phone}</a>
                </div>
              </div>
            )}
            {isAgendarVisible() &&
            <div className="footer-links" style={{ marginTop: 14 }}>
                <a onClick={() => onNavigate('agendar')}>Agenda tu sesión</a>
              </div>
            }
          </div>
        </div>
      </div>
      <div className="footer-bot">
        <div>© 2026 Centro Ki · Santiago, Chile</div>
        <div style={{ display: 'flex', gap: 18 }}>
          <a>Política de privacidad</a>
          <a>Términos</a>
        </div>
      </div>
    </div>
  </footer>;


// ── Placeholder image ────────────────────────────────────
const Placeholder = ({ label, color, style, children, className = '' }) =>
<div
  className={`ph ${className}`}
  data-label={label}
  style={{ ['--ph-color']: color || 'var(--c-sage)', ...style }}>
  
    {children}
  </div>;


// ── Decorative scatter for backgrounds ───────────────────
const DoodleScatter = ({ kind = 'mix' }) => {
  if (kind === 'mix') return (
    <>
      <div className="doodle-float" style={{ top: '5%', left: '4%', width: 70, color: 'var(--c-mustard-ink)' }}>
        <Sun size={70} />
      </div>
      <div className="doodle-float" style={{ top: '8%', right: '6%', width: 90, color: 'var(--c-accent)' }}>
        <Rainbow size={90} />
      </div>
      <div className="doodle-float" style={{ bottom: '15%', left: '8%', width: 36, color: 'var(--c-primary)' }}>
        <Star size={36} />
      </div>
      <div className="doodle-float" style={{ bottom: '8%', right: '12%', width: 50, color: 'var(--c-sage-ink)' }}>
        <Spiral size={50} />
      </div>
      <div className="doodle-float" style={{ top: '40%', left: '2%', width: 28, color: 'var(--c-accent)' }}>
        <Star size={28} />
      </div>
      <div className="doodle-float" style={{ top: '55%', right: '3%', width: 32, color: 'var(--c-mustard-ink)' }}>
        <Heart size={32} />
      </div>
    </>);

  return null;
};

Object.assign(window, { Logo, Nav, Footer, NAV_ITEMS, Placeholder, DoodleScatter, isAgendarVisible });