// Landing portada — startup-style marketing page for Cynamonurs.
// Generic names only: "Diagnósticos / Objetivos / Intervenciones de enfermería".

const MASCOT = 'assets/canela-mascot.png';

// Social icons (inline SVG, brand-colored via CSS)
const IconInstagram = (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor"/></svg>;
const IconTikTok    = (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M19.5 8.6a6.7 6.7 0 0 1-3.9-1.3v7.7a5.4 5.4 0 1 1-5.4-5.4c.3 0 .5 0 .8.1V12a2.7 2.7 0 1 0 2 2.6V3h2.7a3.9 3.9 0 0 0 3.8 3.3z"/></svg>;
const IconYouTube   = (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M22 7.4a2.6 2.6 0 0 0-1.8-1.9C18.4 5 12 5 12 5s-6.4 0-8.2.5A2.6 2.6 0 0 0 2 7.4a27 27 0 0 0 0 9.2 2.6 2.6 0 0 0 1.8 1.9c1.8.5 8.2.5 8.2.5s6.4 0 8.2-.5a2.6 2.6 0 0 0 1.8-1.9 27 27 0 0 0 0-9.2zM10 15.5v-7l5.5 3.5z"/></svg>;
const IconLinkedIn  = (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM10 9h3.8v1.7c.6-1 1.8-2 3.8-2 4 0 4.7 2.6 4.7 6V21h-4v-5.6c0-1.4 0-3.2-2-3.2s-2.2 1.5-2.2 3v5.8h-4z"/></svg>;
const IconGitHub    = (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.9c-2.8.6-3.4-1.3-3.4-1.3-.4-1.1-1.1-1.4-1.1-1.4-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5a4 4 0 0 1 1-2.7c-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7a4 4 0 0 1 1 2.7c0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg>;
const IconMail      = (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg>;
const IconChat      = (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z"/></svg>;
const IconMapPin    = (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 1 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>;
const IconFacebook  = (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z"/></svg>;

// ─── Redes sociales (config-driven; ver SOCIAL en data.jsx) ──
const SOCIAL_ICONS = {
  instagram: { Icon: IconInstagram, label: 'Instagram', cls: 'ig' },
  tiktok:    { Icon: IconTikTok,    label: 'TikTok',    cls: 'tt' },
  youtube:   { Icon: IconYouTube,   label: 'YouTube',   cls: 'yt' },
  facebook:  { Icon: IconFacebook,  label: 'Facebook',  cls: 'fb' },
  linkedin:  { Icon: IconLinkedIn,  label: 'LinkedIn',  cls: 'in' },
};
const SOCIAL_ORDER = ['instagram', 'tiktok', 'youtube', 'facebook', 'linkedin'];

// Pastillas con texto (sección Contacto)
function SocialPills({ which }) {
  const cfg = (window.SOCIAL && window.SOCIAL[which]) || {};
  return (
    <div className="social-row">
      {SOCIAL_ORDER.map(k => {
        const { Icon, label, cls } = SOCIAL_ICONS[k];
        const href = cfg[k];
        return (
          <a key={k} className={'social-pill ' + cls + (href ? '' : ' pending')}
             href={href || '#'} target={href ? '_blank' : undefined} rel="noreferrer"
             onClick={href ? undefined : (e) => e.preventDefault()}
             title={href ? label : label + ' — pendiente de configurar'}>
            <Icon/>{label}
          </a>
        );
      })}
    </div>
  );
}

// Iconos redondos (tarjeta de creador y pie de página)
function SocialIcons({ which, variant }) {
  const cfg = (window.SOCIAL && window.SOCIAL[which]) || {};
  return (
    <div className={'social-icons ' + (variant || '')}>
      {SOCIAL_ORDER.map(k => {
        const { Icon, label, cls } = SOCIAL_ICONS[k];
        const href = cfg[k];
        return (
          <a key={k} className={'social-ic ' + cls + (href ? '' : ' pending')}
             href={href || '#'} target={href ? '_blank' : undefined} rel="noreferrer"
             onClick={href ? undefined : (e) => e.preventDefault()}
             aria-label={label} title={href ? label : label + ' — pendiente de configurar'}>
            <Icon width="16" height="16"/>
          </a>
        );
      })}
    </div>
  );
}

// ─── THEME SWITCHER ─────────────────────────────────────────
const THEMES = [
  { id: 'claro', label: 'Claro', icon: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
  ) },
  { id: 'sepia', label: 'Sepia', icon: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5V6a2 2 0 0 1 2-2h12a1 1 0 0 1 1 1v13.5"/><path d="M6 17h12M9 8h6M9 11h6"/></svg>
  ) },
  { id: 'noche', label: 'Nocturno', icon: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8z"/></svg>
  ) },
];

function applyTheme(id) {
  if (id === 'claro') document.documentElement.removeAttribute('data-theme');
  else document.documentElement.setAttribute('data-theme', id);
  try { localStorage.setItem('cyna_theme', id); } catch {}
}

const ThemeSwitch = () => {
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('cyna_theme') || 'claro'; } catch { return 'claro'; }
  });
  React.useEffect(() => { applyTheme(theme); }, [theme]);
  return (
    <div className="theme-switch" role="group" aria-label="Tema de color">
      {THEMES.map(t => (
        <button key={t.id} className={theme === t.id ? 'on' : ''} onClick={() => setTheme(t.id)}
          aria-label={'Tema ' + t.label} title={t.label}>{t.icon}</button>
      ))}
    </div>
  );
};

// ─── NAV ────────────────────────────────────────────────────
const Nav = ({ view, setView, onJump, onAccount }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const go = (id) => {
    setMobileOpen(false);
    if (view !== 'landing') {
      setView('landing');
      setTimeout(() => onJump(id), 60);
    } else {
      onJump(id);
    }
  };

  return (
    <header className={'nav ' + (scrolled || view !== 'landing' ? 'scrolled' : '')}>
      <div className="container nav-inner">
        <button className="nav-brand" onClick={() => { setView('landing'); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <div className="nav-brand-mark"><img src={MASCOT} alt=""/></div>
          <div className="nav-brand-name">Cyna<em>mon</em>urs</div>
        </button>
        <nav className="nav-links">
          <button className="nav-link" onClick={() => go('funciones')}>Funciones</button>
          <button className="nav-link" onClick={() => go('como')}>Cómo funciona</button>
          <button className="nav-link" onClick={() => go('planes')}>Planes</button>
          <button className="nav-link" onClick={() => setView('instrucciones')}>Instrucciones</button>
          <button className="nav-link" onClick={() => go('contacto')}>Contacto</button>
          <button className="nav-link" onClick={() => onAccount && onAccount()}>Cuenta</button>
        </nav>
        <div className="nav-spacer"/>
        <span className="nav-bell">{window.AccountBell ? React.createElement(window.AccountBell) : null}</span>
        <ThemeSwitch/>
        <span className="nav-acct">{window.AccountMenu ? React.createElement(window.AccountMenu, { onAccount }) : null}</span>
        <button className="nav-login" onClick={() => { setView('login'); window.scrollTo({ top: 0 }); }}>Iniciar sesión</button>
        <button className="nav-cta" onClick={() => setView('gate')}>
          <span className="nav-cta-label">Entrar a la app</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </button>
        <button className="nav-menu-btn" onClick={() => setMobileOpen(v => !v)} aria-label="Menú">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
      </div>
      <div className={'mobile-menu ' + (mobileOpen ? 'open' : '')}>
        <div className="container">
          <button className="nav-link" onClick={() => go('funciones')}>Funciones</button>
          <button className="nav-link" onClick={() => go('como')}>Cómo funciona</button>
          <button className="nav-link" onClick={() => go('planes')}>Planes</button>
          <button className="nav-link" onClick={() => { setMobileOpen(false); setView('instrucciones'); }}>Instrucciones</button>
          <button className="nav-link" onClick={() => go('creadores')}>Creador</button>
          <button className="nav-link" onClick={() => go('contacto')}>Contacto</button>
          <button className="nav-link" onClick={() => { setMobileOpen(false); onAccount && onAccount(); }}>Cuenta</button>
          <button className="nav-link" onClick={() => { setMobileOpen(false); setView('login'); window.scrollTo({ top: 0 }); }}>Iniciar sesión</button>
          <button className="nav-menu-notice" onClick={() => { setMobileOpen(false); onAccount && onAccount(); }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>
            <span><b>Notificaciones</b></span>
            <span className="pip">2</span>
          </button>
          <div style={{ marginTop: 12 }}><ThemeSwitch/></div>
        </div>
      </div>
    </header>
  );
};

// ─── HERO ───────────────────────────────────────────────────
const Hero = ({ setView }) => (
  <section className="hero" data-screen-label="Landing — Hero">
    <div className="container hero-grid">
      <div>
        <div className="hero-eyebrow">
          <span className="hero-eyebrow-pill">v 2.0</span>
          Diagnósticos · Objetivos · Intervenciones de enfermería
        </div>
        <h1>
          Tu compañera de <em>planes</em> <span className="underline">de cuidado</span>.
        </h1>
        <p className="hero-lead">
          Cynamonurs organiza las tres taxonomías de enfermería en un flujo simple: elige un diagnóstico,
          define el objetivo y aplica la intervención. Sin ruido, con calidez y siempre a la mano.
        </p>
        <div className="hero-actions">
          <button className="btn-primary" onClick={() => setView('gate')}>
            Empezar ahora
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
          <button className="btn-secondary" onClick={() => document.getElementById('funciones')?.scrollIntoView({ behavior: 'smooth' })}>
            Ver funciones
          </button>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-item"><strong>263</strong> diagnósticos</div>
          <div className="hero-meta-item"><strong>610</strong> objetivos</div>
          <div className="hero-meta-item"><strong>614</strong> intervenciones</div>
          <div className="hero-meta-item"><strong>4.8★</strong> en reseñas</div>
        </div>
      </div>
      <div className="hero-art">
        <div className="hero-moon"/>
        <div className="hero-mascot-wrap"><img src={MASCOT} alt="Mascota Canela — un cachorro sobre la luna"/></div>
        <div className="float-badge b1">
          <span className="dot nanda"/>
          <div>
            <div className="code">Diagnóstico · 00132</div>
            <div className="label">Dolor agudo</div>
          </div>
        </div>
        <div className="float-badge b2">
          <span className="dot noc"/>
          <div>
            <div className="code">Objetivo · 2102</div>
            <div className="label">Nivel del dolor</div>
          </div>
        </div>
        <div className="float-badge b3">
          <span className="dot nic"/>
          <div>
            <div className="code">Intervención · 1400</div>
            <div className="label">Manejo del dolor</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── FUNCIONES (4 apartados) ────────────────────────────────
const Funciones = ({ goToGate, onCreateAccount }) => (
  <section className="section section-cream" id="funciones" data-screen-label="Landing — Funciones">
    <div className="container">
      <div className="section-head">
        <span className="section-eyebrow">Lo que puedes hacer</span>
        <h2 className="section-title">Cuatro apartados, <em>un solo lugar</em> para tu turno.</h2>
        <p className="section-lead">
          La web tiene exactamente las mismas funciones que la app: tu cuenta, las herramientas clínicas,
          tus casos y las tres taxonomías unificadas.
        </p>
      </div>

      <div className="func-grid">
        {/* Diagnósticos+Objetivos+Intervenciones — large */}
        <button className="func-card large tone-dx" onClick={goToGate}>
          <div className="func-glyph">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M6 4h11l4 4v12a0 0 0 0 1 0 0H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M16 4v6h6"/><path d="M8 14h8M8 18h6"/></svg>
          </div>
          <div className="func-eyebrow">04 · Apartado completo</div>
          <h3 className="func-title">Diagnósticos, objetivos e intervenciones</h3>
          <p className="func-desc">
            Las tres taxonomías de enfermería en un solo flujo guiado. Busca por código o palabra, navega por dominios
            y clases, ve relaciones automáticas y arma planes paso a paso.
          </p>
          <div className="func-chips">
            <span className="func-chip nanda">● Diagnósticos · 263</span>
            <span className="func-chip noc">● Objetivos · 610</span>
            <span className="func-chip nic">● Intervenciones · 614</span>
          </div>
          <div className="func-foot">
            <span className="mono" style={{color: 'var(--fg-muted)'}}>Abre el explorador →</span>
            <div className="func-arrow">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </div>
          </div>
        </button>

        {/* Casos — small */}
        <button className="func-card small tone-cases" onClick={goToGate}>
          <div className="func-glyph">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><path d="M4 10h16"/><path d="M9 5V3h6v2"/></svg>
          </div>
          <div className="func-eyebrow">03</div>
          <h3 className="func-title">Casos</h3>
          <p className="func-desc">
            Guarda los planes de cuidado de tus pacientes. Activos, borradores y archivados, todos sincronizados.
          </p>
          <div className="func-foot">
            <span className="chip">Pacientes · Plantillas</span>
            <div className="func-arrow">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </div>
          </div>
        </button>

        {/* Herramientas — small */}
        <button className="func-card small tone-tools" onClick={goToGate}>
          <div className="func-glyph">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2-2z"/></svg>
          </div>
          <div className="func-eyebrow">02</div>
          <h3 className="func-title">Herramientas</h3>
          <p className="func-desc">
            Calculadoras de pérdidas insensibles y factor goteo, más una galería de las escalas que más usas.
          </p>
          <div className="func-foot">
            <span className="chip">Calculadoras · Escalas</span>
            <div className="func-arrow">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </div>
          </div>
        </button>

        {/* Cuenta — large */}
        <button className="func-card large tone-cuenta" onClick={onCreateAccount}>
          <div className="func-glyph">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3.5"/><path d="M5 20c0-3.3 3.1-6 7-6s7 2.7 7 6"/></svg>
          </div>
          <div className="func-eyebrow">01</div>
          <h3 className="func-title">Crear cuenta</h3>
          <p className="func-desc">
            Tu perfil profesional con la suscripción de <strong>CynamonSup</strong>. Crea tu propio perfil, configura
            tus calculadoras y tus diagnósticos, y sincroniza todos tus dispositivos.
          </p>
          <div className="func-chips">
            <span className="func-chip">Perfil profesional</span>
            <span className="func-chip">Calculadoras</span>
            <span className="func-chip">Diagnósticos</span>
            <span className="func-chip">Sincronización</span>
          </div>
          <div className="func-foot">
            <span className="mono" style={{color: 'var(--fg-muted)'}}>Crear cuenta →</span>
            <div className="func-arrow">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </div>
          </div>
        </button>
      </div>
    </div>
  </section>
);

// ─── EDICIONES SOPORTADAS ───────────────────────────────────
const Ediciones = () => (
  <section className="section section-cream" id="ediciones" data-screen-label="Landing — Ediciones soportadas">
    <div className="container">
      <div className="section-head">
        <span className="section-eyebrow">Ediciones soportadas</span>
        <h2 className="section-title">Trabajamos con estas <em>ediciones</em>.</h2>
        <p className="section-lead">
          Cynamonurs organiza la información conforme a las siguientes ediciones de las tres taxonomías de enfermería.
        </p>
      </div>
      <div className="ed-grid">
        {['nanda', 'noc', 'nic'].map(k => {
          const e = EDITIONS[k];
          return (
            <div key={k} className={'ed-card ' + k}>
              <div className="ed-sigla">{e.sigla}</div>
              <div className="ed-nombre">{e.nombre}</div>
              <div className="ed-edicion">{e.edicion}</div>
              <div className="ed-items mono">{e.items} registros</div>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

// ─── CÓMO FUNCIONA ──────────────────────────────────────────
const Como = () => (
  <section className="section" id="como" data-screen-label="Landing — Cómo funciona">
    <div className="container">
      <div className="section-head">
        <span className="section-eyebrow">Cómo funciona</span>
        <h2 className="section-title">De la valoración al plan, en <em>tres pasos</em>.</h2>
        <p className="section-lead">El flujo más usado por enfermeras y estudiantes en formación clínica.</p>
      </div>

      <div className="steps">
        <div className="step s1">
          <div className="step-num">01</div>
          <div className="step-eyebrow">Paso 1 · Diagnóstico</div>
          <h3 className="step-title">Elige el diagnóstico</h3>
          <p className="step-desc">
            Busca por nombre o código o navega por los 13 dominios. Cada ficha muestra definición,
            características definitorias y factores relacionados.
          </p>
        </div>
        <div className="step s2">
          <div className="step-num">02</div>
          <div className="step-eyebrow">Paso 2 · Objetivo</div>
          <h3 className="step-title">Define el objetivo</h3>
          <p className="step-desc">
            Selecciona el resultado esperado. Marca la puntuación basal y la meta sobre la escala apropiada;
            la app rastrea tu progreso entre evaluaciones.
          </p>
        </div>
        <div className="step s3">
          <div className="step-num">03</div>
          <div className="step-eyebrow">Paso 3 · Intervención</div>
          <h3 className="step-title">Aplica la intervención</h3>
          <p className="step-desc">
            Cierra el plan con intervenciones y sus actividades listas para copiar a tu hoja de
            enfermería o exportar a PDF.
          </p>
        </div>
      </div>
    </div>
  </section>
);

// ─── INFO + TÉRMINOS ────────────────────────────────────────
const InfoTerminos = ({ setView }) => (
  <section className="section section-tinted" id="info" data-screen-label="Landing — Información y Términos">
    <div className="container">
      <div className="section-head">
        <span className="section-eyebrow">Información</span>
        <h2 className="section-title">Qué es Cynamonurs y <em>cómo nació</em>.</h2>
      </div>

      <div className="info-grid">
        <div className="info-card">
          <h3>Propósito</h3>
          <p>
            Organizar las <strong>tres taxonomías</strong> que rigen los cuidados de enfermería a nivel mundial y
            relacionarlas entre sí a partir del <strong>criterio clínico</strong> y de las coincidencias que existen
            entre ellas. De este modo resolvemos el día a día con mayor rapidez: reducimos el tiempo de atención y de
            elaboración de los planes, y facilitamos el cuidado de los pacientes.
          </p>
          <h3 style={{ marginTop: 22 }}>Cómo funciona</h3>
          <p>
            Cynamonurs parte de las tres taxonomías que <strong>tú subes</strong>: las codifica y las ordena en una
            base de datos estructurada, convirtiéndolas en una herramienta de búsqueda, clasificación y relación.
            A partir de tu <strong>valoración clínica</strong>, la app vincula diagnósticos, objetivos e intervenciones,
            y reúne todo en una <strong>tabla lista para imprimir</strong>. Sus herramientas integradas
            —constantes vitales, cálculo de líquidos, IMC, presión arterial media e índice de choque— te ayudan a
            ganar tiempo, y cada plan puede guardarse como un <strong>caso</strong> para reutilizarlo más adelante.
          </p>
          <h3 style={{ marginTop: 22 }}>Cómo empezó</h3>
          <p>
            Cynamonurs es un organizador en línea que nació de una doble necesidad: reducir el tiempo que implica
            buscar los libros de forma física y relacionarlos entre sí, y aumentar la productividad en los servicios
            de salud, tanto públicos como privados.
          </p>
          <ul>
            <li><strong>No almacenamos las taxonomías.</strong> Tú subes los documentos —los libros— y nosotros los transformamos y organizamos para que los consultes mejor.</li>
            <li><strong>Todo en línea.</strong> Próximamente, también como aplicación para Android e iOS.</li>
            <li><strong>Confidencialidad.</strong> No guardamos datos del paciente: solo las iniciales, para preservar el registro clínico.</li>
          </ul>
        </div>

        <div>
          <h3 style={{fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, margin: '0 0 16px', color: 'var(--cinnamon-900)', letterSpacing: '-0.015em'}}>Términos y condiciones</h3>
          <ul className="terms-list">
            <li className="terms-item"><details>
              <summary>Sobre el contenido de las taxonomías</summary>
              <div className="terms-body">
                Las clasificaciones de diagnósticos, objetivos e intervenciones de enfermería son propiedad
                intelectual de sus respectivos editores. Cynamonurs <strong>no distribuye, no vende ni obtiene
                lucro</strong> de dicha bibliografía: es el usuario quien la carga y la plataforma se limita a
                organizarla. El usuario debe contar con acceso legítimo a las obras de referencia.
              </div>
            </details></li>
            <li className="terms-item"><details>
              <summary>Carácter organizativo, no clínico</summary>
              <div className="terms-body">
                Cynamonurs es una herramienta de <strong>organización</strong>; no sustituye el juicio profesional
                ni la valoración directa del paciente. Toda decisión clínica es responsabilidad del personal de
                enfermería y debe verificarse conforme a un criterio clínico adecuado.
              </div>
            </details></li>
            <li className="terms-item"><details>
              <summary>Datos del paciente y confidencialidad</summary>
              <div className="terms-body">
                No se solicita ni almacena ningún dato de identificación del paciente más allá de sus
                <strong> iniciales</strong>, con el fin de preservar el registro clínico y la confidencialidad de
                los casos.
              </div>
            </details></li>
            <li className="terms-item"><details>
              <summary>Suscripciones · CynamonSup</summary>
              <div className="terms-body">
                Se ofrece un plan gratuito, sostenido con publicidad y con funciones limitadas, así como planes de
                pago (Basic y PRO) con mayores límites de uso. El cobro de las suscripciones mensuales se procesa de
                forma segura a través de <strong>Stripe</strong>. Consulta el detalle en la sección <strong>Planes</strong>.
              </div>
            </details></li>
          </ul>
          <button className="btn-primary" style={{ marginTop: 18 }} onClick={() => setView('legal')}>
            Ver términos y condiciones completos
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>
    </div>
  </section>
);

// ─── CREADOR ────────────────────────────────────────────────
const Creadores = () => {
  const p = CREATORS[0];
  return (
    <section className="section" id="creadores" data-screen-label="Landing — Creador">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Quién está detrás</span>
          <h2 className="section-title">Un proyecto hecho por quien vive el <em>turno</em>.</h2>
          <p className="section-lead">Cynamonurs es el trabajo de una sola persona, entre la sala y el código.</p>
        </div>

        <div className="creator-feature">
          <div className="creator-photo">
            <img src={p.photo} alt={'Foto de ' + p.name}/>
          </div>
          <div className="creator-body">
            <div className="creator-eyebrow">{p.role}</div>
            <h3 className="creator-name">{p.name}</h3>
            <p className="creator-bio">{p.bio}</p>
            <div className="creator-meta">
              <span className="creator-meta-item"><IconMapPin width="16" height="16"/> Chetumal, Quintana Roo</span>
              <span className="creator-meta-item"><IconMail width="16" height="16"/> {CONTACTO.email}</span>
            </div>
            <div className="creator-social-label">Redes personales</div>
            <SocialIcons which={p.social} variant="creator"/>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── CTA BANNER ─────────────────────────────────────────────
const CTABanner = ({ setView }) => (
  <section className="section">
    <div className="container">
      <div className="cta-banner">
        <div className="cta-banner-body">
          <h3>¿Lista para tu primer plan de cuidado en Cynamonurs?</h3>
          <p>Sube tus tres libros y arma un plan completo en menos de dos minutos.</p>
        </div>
        <button className="btn-banner" onClick={() => setView('gate')}>
          Entrar a la app
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </button>
      </div>
    </div>
  </section>
);

// ─── CONTACTO + REDES ───────────────────────────────────────
const Contacto = () => {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3200);
  };
  return (
    <section className="section section-cream" id="contacto" data-screen-label="Landing — Contacto">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Hablemos</span>
          <h2 className="section-title">Contacto y <em>redes sociales</em>.</h2>
          <p className="section-lead">Escríbenos para sugerencias clínicas, soporte o colaboraciones.</p>
        </div>

        <div className="contact-wrap">
          <form className="contact-card" onSubmit={submit}>
            <h3>Envíanos un mensaje</h3>
            <p>Te respondemos en menos de 48 horas hábiles.</p>
            <div className="contact-field"><label>Nombre</label><input type="text" placeholder="María García" required/></div>
            <div className="contact-field"><label>Correo</label><input type="email" placeholder="maria@hospital.mx" required/></div>
            <div className="contact-field"><label>Mensaje</label><textarea rows="4" placeholder="¿En qué podemos apoyarte?" required></textarea></div>
            <button type="submit" className="btn-primary">
              {sent ? '¡Mensaje enviado! ✓' : 'Enviar mensaje'}
              {!sent && <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>}
            </button>
          </form>

          <div className="contact-side">
            <div className="contact-line">
              <div className="icon-wrap"><IconMail width="20" height="20"/></div>
              <div><div className="lbl">Correo de contacto</div><div className="val">{CONTACTO.email}</div></div>
            </div>
            <div className="contact-line">
              <div className="icon-wrap"><IconMapPin width="20" height="20"/></div>
              <div><div className="lbl">Ubicación</div><div className="val">{CONTACTO.ciudad}</div></div>
            </div>
            <div className="contact-line">
              <div className="icon-wrap"><IconChat width="20" height="20"/></div>
              <div><div className="lbl">Creador</div><div className="val">Salvador Canela</div></div>
            </div>

            <div style={{marginTop: 'auto'}}>
              <div style={{fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-muted)', marginBottom: 10}}>Redes sociales · Cynamonurs</div>
              <SocialPills which="empresa"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── FOOTER ─────────────────────────────────────────────────
const Footer = ({ setView, onJump }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div className="footer-brand">
            <img src={MASCOT} alt=""/>
            <div className="footer-brand-name">Cyna<em style={{fontStyle: 'italic', fontWeight: 400, color: 'var(--cinnamon-200)'}}>mon</em>urs</div>
          </div>
          <p className="footer-tagline">Una compañera cálida para enfermeras, estudiantes e instructores que trabajan con las tres taxonomías de enfermería.</p>
          <SocialIcons which="empresa" variant="footer"/>
        </div>

        <div>
          <h4>Producto</h4>
          <ul className="footer-list">
            <li><a onClick={() => setView('gate')}>Cuenta</a></li>
            <li><a onClick={() => setView('gate')}>Herramientas</a></li>
            <li><a onClick={() => setView('gate')}>Casos</a></li>
            <li><a onClick={() => setView('gate')}>Diagnósticos · Objetivos · Intervenciones</a></li>
            <li><a onClick={() => onJump('como')}>Cómo funciona</a></li>
          </ul>
        </div>

        <div>
          <h4>Cynamonurs</h4>
          <ul className="footer-list">
            <li><a onClick={() => onJump('planes')}>Planes · CynamonSup</a></li>
            <li><a onClick={() => setView('instrucciones')}>Instrucciones de uso</a></li>
            <li><a onClick={() => onJump('creadores')}>Creador</a></li>
            <li><a onClick={() => onJump('info')}>Información</a></li>
            <li><a onClick={() => onJump('contacto')}>Contacto</a></li>
          </ul>
        </div>

        <div>
          <h4>Legal</h4>
          <ul className="footer-list">
            <li><a onClick={() => setView('legal')}>Términos y condiciones</a></li>
            <li><a onClick={() => setView('legal')}>Política de privacidad</a></li>
            <li><a onClick={() => setView('legal')}>Confidencialidad del paciente</a></li>
            <li><a onClick={() => onJump('planes')}>Suscripciones</a></li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <div>© 2026 Cynamonurs · Salvador Canela · Chetumal, Q. Roo</div>
        <div className="footer-bottom-links">
          <a onClick={() => setView('legal')}>Términos</a>
          <a onClick={() => setView('legal')}>Privacidad</a>
          <a onClick={() => onJump('contacto')}>Contacto</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Hero, Funciones, Ediciones, Como, InfoTerminos, Creadores, CTABanner, Contacto, Footer,
  IconInstagram, IconTikTok, IconYouTube, IconLinkedIn, IconGitHub, IconFacebook,
  IconMail, IconChat, IconMapPin, MASCOT, SocialPills, SocialIcons, ThemeSwitch, applyTheme
});
