// landing-bits.jsx
// Atoms used by the landing: icons, logo, header, footer, mock cards.
// Receives `variant: 'desktop' | 'mobile'` and tweak values where relevant.

// ── Icon set (lucide-aligned, currentColor strokes) ───────────────
const Icons = {
  arrowRight: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  menu: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="3" y1="6" x2="21" y2="6" />
      <line x1="3" y1="12" x2="21" y2="12" />
      <line x1="3" y1="18" x2="21" y2="18" />
    </svg>
  ),
  close: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  ),
  search: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  ),
  compass: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="10" />
      <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
    </svg>
  ),
  users: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  ),
  zap: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
    </svg>
  ),
  sparkles: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
      <circle cx="12" cy="12" r="3" />
    </svg>
  ),
  check: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  trending: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="3 17 9 11 13 15 21 7" />
      <polyline points="14 7 21 7 21 14" />
    </svg>
  ),
  clipboard: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M9 4h6a1 1 0 0 1 1 1v2H8V5a1 1 0 0 1 1-1Z" />
      <rect x="4" y="4" width="16" height="18" rx="2" />
      <path d="M9 13h6M9 17h4" />
    </svg>
  ),
  route: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="6" cy="19" r="3" />
      <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" />
      <circle cx="18" cy="5" r="3" />
    </svg>
  ),
  hand: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M18 11V6a2 2 0 0 0-4 0v5" />
      <path d="M14 11V4a2 2 0 0 0-4 0v7" />
      <path d="M10 10.5V6a2 2 0 0 0-4 0v8" />
      <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
    </svg>
  ),
};

// ── Logo ─────────────────────────────────────────────────────────
function Logo({ variant = "color" }) {
  const src = variant === "white" ? "assets/logo-white.svg" : "assets/logo-full.svg";
  return <img src={src} alt="Vig-ia Empresarial" />;
}

// ── Header ───────────────────────────────────────────────────────
function Header({ variant }) {
  if (variant === "mobile") {
    return (
      <header className="vig-header">
        <div className="vig-header__inner">
          <div className="vig-header__logo"><Logo /></div>
          <button className="vig-header__hamburger" aria-label="Menú"><Icons.menu /></button>
        </div>
      </header>
    );
  }
  return (
    <header className="vig-header">
      <div className="vig-header__inner">
        <div className="vig-header__left">
          <div className="vig-header__logo"><Logo /></div>
          <nav className="vig-header__nav">
            <a href="#diagnostico">Diagnóstico</a>
            <a href="#consultoria">Consultoría</a>
            <a href="#apps">Apps Vigía</a>
            <a href="#equipo">Nosotros</a>
          </nav>
        </div>
        <div className="vig-header__actions">
          <button className="vig-btn vig-btn--ghost vig-btn--sm">Inicia sesión</button>
          <button className="vig-btn vig-btn--blue vig-btn--sm">Empieza gratis</button>
        </div>
      </div>
    </header>
  );
}

// ── Pill / eyebrow badge (used in hero) ──────────────────────────
function HeroPill({ children, light }) {
  return (
    <span className={"vig-pill" + (light ? " vig-pill--on-blue" : "")}>
      <span className="vig-pill__dot" />
      {children}
    </span>
  );
}

// ── Trust microcopy line ─────────────────────────────────────────
function TrustLine() {
  return (
    <span className="vig-trust">
      <span className="vig-trust__dot" />
      5 minutos · Sin registro · Diagnóstico personalizado
    </span>
  );
}

// ── Hero mockup column — three floating cards (Hero variant A) ───
function HeroMockCards() {
  return (
    <>
      {/* Card 1 — Tu nivel de madurez */}
      <div className="vig-mock-card" style={{
        top: 0, left: 160,
        width: 320,
        transform: "rotate(2deg)"
      }}>
        <div className="vig-mock-card__eyebrow">Diagnóstico</div>
        <div className="vig-mock-card__title">Tu nivel de madurez</div>
        <div className="vig-mock-card__body">Tu empresa está en etapa de profesionalización. 4 áreas con oportunidad clara.</div>
        <div className="vig-mock-card__bar"><i style={{ width: "62%" }} /></div>
        <div className="vig-mock-card__bar-meta">
          <span>Etapa: En crecimiento</span>
          <span>62/100</span>
        </div>
      </div>

      {/* Card 2 — Ruta recomendada */}
      <div className="vig-mock-card" style={{
        top: 165, left: 0,
        width: 288,
        transform: "rotate(-3deg)"
      }}>
        <div className="vig-mock-card__eyebrow" style={{ color: "var(--vig-success)" }}>Ruta recomendada</div>
        <div className="vig-mock-card__title">3 prioridades para los próximos 6 meses</div>
        <div className="vig-mock-card__body">Procesos administrativos, control financiero y certificación ISO 9001.</div>
      </div>

      {/* Card 3 — Equipo asignado */}
      <div className="vig-mock-card" style={{
        top: 330, left: 170,
        width: 288,
        transform: "rotate(1deg)"
      }}>
        <div className="vig-mock-card__eyebrow" style={{ color: "var(--vig-blue-600)" }}>Expertos asignados</div>
        <div className="vig-mock-card__title">Equipo de consultoría</div>
        <div className="vig-mock-card__body">2 consultores senior con experiencia en tu sector, listos para acompañarte.</div>
      </div>
    </>
  );
}

// Mobile-scaled mock cards (smaller, tighter)
function HeroMockCardsMobile() {
  return (
    <>
      <div className="vig-mock-card" style={{
        top: 0, left: 30, right: 30,
        transform: "rotate(1.5deg)"
      }}>
        <div className="vig-mock-card__eyebrow">Diagnóstico</div>
        <div className="vig-mock-card__title">Tu nivel de madurez</div>
        <div className="vig-mock-card__body">Etapa de profesionalización. 4 áreas con oportunidad.</div>
        <div className="vig-mock-card__bar"><i style={{ width: "62%" }} /></div>
        <div className="vig-mock-card__bar-meta">
          <span>En crecimiento</span>
          <span>62/100</span>
        </div>
      </div>
      <div className="vig-mock-card" style={{
        top: 200, left: 0, right: 80,
        transform: "rotate(-2deg)"
      }}>
        <div className="vig-mock-card__eyebrow" style={{ color: "var(--vig-success)" }}>Ruta recomendada</div>
        <div className="vig-mock-card__title">3 prioridades, 6 meses</div>
        <div className="vig-mock-card__body">Procesos, finanzas y certificación ISO 9001.</div>
      </div>
    </>
  );
}

// ── Footer ───────────────────────────────────────────────────────
function Footer({ variant }) {
  return (
    <footer className="vig-footer">
      <div className="vig-footer__top">
        <div className="vig-footer__brand">
          <Logo variant="white" />
          <p className="vig-footer__tag">Nos enfocamos en tu empresa. Diagnóstico, consultoría y apps prácticas para PyMEs mexicanas con ambición.</p>
        </div>
        <div className="vig-footer__col">
          <h5>Servicios</h5>
          <ul>
            <li><a>Diagnóstico</a></li>
            <li><a>Consultoría</a></li>
            <li><a>Apps Vigía</a></li>
            <li><a>Certificaciones</a></li>
          </ul>
        </div>
        <div className="vig-footer__col">
          <h5>Empresa</h5>
          <ul>
            <li><a>Nosotros</a></li>
            <li><a>Equipo</a></li>
            <li><a>Blog</a></li>
            <li><a>Contacto</a></li>
          </ul>
        </div>
        <div className="vig-footer__col">
          <h5>Legal</h5>
          <ul>
            <li><a>Términos</a></li>
            <li><a>Privacidad</a></li>
            <li><a>Aviso ARCO</a></li>
          </ul>
        </div>
      </div>
      <div className="vig-footer__bottom">
        <span>© 2026 Vig-ia Empresarial · Todos los derechos reservados</span>
        <span>Hecho en México</span>
      </div>
    </footer>
  );
}

// Expose to other Babel scripts
Object.assign(window, {
  Icons, Logo, Header, HeroPill, TrustLine,
  HeroMockCards, HeroMockCardsMobile, Footer
});
