// Onboarding Step 1 — Welcome
// 800x600 centered modal-like window. Dark mode. DESIGN.md tokens.

const IconMicLg = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" />
    <path d="M19 10v1a7 7 0 0 1-14 0v-1" />
    <line x1="12" y1="19" x2="12" y2="22" />
    <line x1="8" y1="22" x2="16" y2="22" />
  </svg>
);

const IconBulbLg = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
    <path d="M9 18h6" />
    <path d="M10 22h4" />
  </svg>
);

const IconZapLg = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
  </svg>
);

const IconArrowRight = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2" strokeLinecap="round"
       strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);

const FEATURES = [
  {
    Icon: IconMicLg,
    title: "Escucha la reunión",
    body: "La app detecta el audio de Zoom, Teams o Meet en tiempo real.",
  },
  {
    Icon: IconBulbLg,
    title: "Detecta preguntas",
    body: "Identifica automáticamente qué te está preguntando el cliente.",
  },
  {
    Icon: IconZapLg,
    title: "Sugiere respuestas",
    body: "Te muestra una respuesta natural y un apunte técnico interno.",
  },
];

const OnboardingWelcome = () => {
  const [hover, setHover] = React.useState(false);
  return (
    <div className="ob-stage">
      <div className="ob-window" data-screen-label="02 Onboarding · Bienvenida">
        {/* faint grid lines for premium feel — no decorative illustration */}
        <div className="ob-grain" aria-hidden="true" />

        <div className="ob-content">
          {/* Zone 1 — Logo */}
          <div className="ob-logo">
            <div className="ob-logo-mark">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" strokeWidth="2" strokeLinecap="round"
                   strokeLinejoin="round">
                <path d="M12 2v4" />
                <path d="M12 18v4" />
                <path d="M4.93 4.93l2.83 2.83" />
                <path d="M16.24 16.24l2.83 2.83" />
                <path d="M2 12h4" />
                <path d="M18 12h4" />
                <path d="M4.93 19.07l2.83-2.83" />
                <path d="M16.24 7.76l2.83-2.83" />
              </svg>
            </div>
            <span className="ob-logo-name">Copilotoprompter</span>
          </div>

          {/* Zone 2 — Title */}
          <h1 className="ob-title">Tu copiloto en reuniones difíciles</h1>

          {/* Zone 3 — Subtitle */}
          <p className="ob-subtitle">
            Responde mejor a las preguntas técnicas de tus clientes.
          </p>

          {/* Zone 4 — Features */}
          <div className="ob-features">
            {FEATURES.map(({ Icon: Ic, title, body }, i) => (
              <div className="ob-feature" key={i}>
                <div className="ob-feature-icon">
                  <Ic size={24} />
                </div>
                <div className="ob-feature-text">
                  <div className="ob-feature-title">{title}</div>
                  <div className="ob-feature-body">{body}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Zone 5 — Primary CTA */}
          <button
            className="ob-cta"
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
          >
            <span>Empezar configuración</span>
            <span className="ob-cta-arrow" data-hover={hover}>
              <IconArrowRight size={16} />
            </span>
          </button>

          {/* Zone 6 — Secondary link */}
          <a className="ob-secondary" href="#">Ya tengo cuenta</a>
        </div>

        {/* Zone 7 — Step indicator */}
        <div className="ob-step">
          <span className="ob-step-dots">
            <span className="ob-dot active" />
            <span className="ob-dot" />
            <span className="ob-dot" />
          </span>
          <span className="ob-step-text">1 de 3</span>
        </div>
      </div>
    </div>
  );
};

window.OnboardingWelcome = OnboardingWelcome;