// ------------------------------------------------------------------------
//  components/WelcomeModal.js - First-visit onboarding popup.
//
//  A friendly, dead-simple overlay that walks a new user through the three
//  key moves in plain language. Auto-shows once on first visit (gated by the
//  sunscope_welcome_seen flag in useAppState) and is reopenable from the
//  footer "How it works" link.
//
//  Purely presentational - all open/close state lives in useAppState.
//
//  Props:
//    onClose - called when the user dismisses (Got it, ×, backdrop, or Esc)
// ------------------------------------------------------------------------

import { h } from '../../vendor/preact.js';
import { useEffect } from '../../vendor/preact-hooks.js';
import htm from '../../vendor/htm.js';

const html = htm.bind(h);

const STEPS = [
  {
    icon: '☀️',
    title: 'SunSoak is the number to watch',
    body: html`Pick a <strong>Solar model</strong> (open, urban, beach…) in the SunSoak dropdown
      to match where you are. It shows what your body actually feels in the sun — not just the
      air temperature.`,
  },
  {
    icon: '🎯',
    title: 'Choose a profile',
    body: html`Tap <strong>Places</strong>, <strong>Activities</strong> or <strong>Work</strong>
      to instantly load the columns that matter for your situation — like Beach, Cycling or
      Farming.`,
  },
  {
    icon: '⚙️',
    title: 'Make it yours',
    body: html`Hit <strong>Edit columns</strong> to add or remove any data you like — UV and
      sunburn time, vehicle interior, soil, air quality and more.`,
  },
];

export function WelcomeModal({ onClose }) {
  // Dismiss on Esc.
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  return html`
    <div class="welcome-overlay" onClick=${onClose}>
      <div class="welcome-card" role="dialog" aria-modal="true" aria-labelledby="welcome-title"
        onClick=${(e) => e.stopPropagation()}>
        <button class="welcome-close" aria-label="Close" onClick=${onClose}>×</button>
        <div class="welcome-head">
          <div class="welcome-kicker">Welcome to SunScope</div>
          <h2 class="welcome-title" id="welcome-title">How to read the sky in 3 steps</h2>
        </div>
        <p class="welcome-intro">
          This isn't your usual weather forecast. SunScope goes deeper than temperature alone —
          it shows how the environment affects you: sun exposure, wind chill, UV intensity, and more.
          For the best results, pick the <strong>environment</strong> that matches where you'll be.
        </p>
        <ol class="welcome-steps">
          ${STEPS.map((s, i) => html`
            <li class="welcome-step" key=${i}>
              <span class="welcome-step-num">${i + 1}</span>
              <span class="welcome-step-icon" aria-hidden="true">${s.icon}</span>
              <span class="welcome-step-text">
                <span class="welcome-step-title">${s.title}</span>
                <span class="welcome-step-body">${s.body}</span>
              </span>
            </li>`)}
        </ol>
        <p class="welcome-remember">💾 Don't worry — SunScope remembers your choices for next time.</p>
        <button class="welcome-cta" onClick=${onClose}>Got it</button>
      </div>
    </div>`;
}