// Welcome / story intro — shown the first time the app is opened
// (also reachable later via the info button in the header)

const INTRO_SLIDES = [
  {
    kind: 'hero', tone: 'dark',
    eyebrow: 'Why it matters',
    title: 'Rivers change fast.',
    text: "Cold water, shifting currents, and sudden weather can turn a calm-looking river dangerous in minutes. A few minutes of preparation \u2014 checking conditions, knowing your gear, understanding your limits \u2014 can change how your visit goes.",
    icon: <img src="rs-waves-dark.png" alt="" style={{ width: 140, height: 'auto' }} />
  },
  {
    kind: 'steps', tone: 'light',
    eyebrow: 'How RiverSafe works',
    title: 'A safety check before you go in.',
    steps: [
    { title: 'Plan your visit', desc: 'Pick a river, activity, and today\u2019s conditions.' },
    { title: 'Share your skills', desc: 'Tell us your swimming ability and equipment.' },
    { title: 'Get your assessment', desc: 'See a personalized safety score and recommendations.' }]

  },
  {
    kind: 'hero', tone: 'dark',
    eyebrow: 'Ready when you are',
    title: 'Know before you go.',
    text: "It only takes a couple minutes. Let\u2019s check today\u2019s conditions and get you a safety assessment.",
    icon: <img src="rs-logo-nobk-dark.png" alt="" style={{ width: 220, height: 'auto' }} />
  }];


function IntroScreens({ onFinish }) {
  const [slide, setSlide] = React.useState(0);
  const isLast = slide === INTRO_SLIDES.length - 1;
  const current = INTRO_SLIDES[slide];

  function next() {
    if (isLast) { onFinish(); return; }
    setSlide((s) => Math.min(s + 1, INTRO_SLIDES.length - 1));
  }
  function prev() {
    setSlide((s) => Math.max(s - 1, 0));
  }

  return (
    <div className="rs-app rs-intro">
      <div className={`rs-intro-panel rs-intro-panel--${current.tone}`} role="dialog" aria-label="Welcome to RiverSafe">
        {slide > 0 &&
        <button type="button" className="rs-intro-back" onClick={prev} aria-label="Previous screen">←</button>
        }

        <div className="rs-intro-body">
          {current.kind === 'hero' &&
          <React.Fragment>
              <div className="rs-intro-icon" aria-hidden="true">{current.icon}</div>
              <p className="rs-intro-eyebrow">{current.eyebrow}</p>
              <h1 className="rs-intro-title">{current.title}</h1>
              <p className="rs-intro-text">{current.text}</p>
            </React.Fragment>
          }
          {current.kind === 'steps' &&
          <React.Fragment>
              <p className="rs-intro-eyebrow">{current.eyebrow}</p>
              <h1 className="rs-intro-title rs-intro-title--dark">{current.title}</h1>
              <div className="rs-intro-steps">
                {current.steps.map((s, i) =>
              <div className="rs-intro-step" key={i}>
                    <div className="rs-intro-step__num">{i + 1}</div>
                    <div>
                      <p className="rs-intro-step__title">{s.title}</p>
                      <p className="rs-intro-step__desc">{s.desc}</p>
                    </div>
                  </div>
              )}
              </div>
            </React.Fragment>
          }
        </div>

        <div className="rs-intro-footer">
          <div className="rs-intro-dots" role="tablist" aria-label="Intro progress">
            {INTRO_SLIDES.map((_, i) =>
            <button
              key={i}
              type="button"
              className={`rs-intro-dot ${i === slide ? 'rs-intro-dot--active' : ''}`}
              aria-label={`Go to screen ${i + 1} of ${INTRO_SLIDES.length}`}
              aria-current={i === slide}
              onClick={() => setSlide(i)}>
            </button>
            )}
          </div>
          <button
            type="button"
            className={`usa-button usa-button--full ${current.tone === 'dark' ? 'rs-intro-cta--light' : 'usa-button--primary'}`}
            onClick={next}>

            {isLast ? 'Get started' : 'Continue →'}
          </button>
          {isLast &&
          <p style={{ fontSize: 'var(--fs-2)', lineHeight: 'var(--lh-4)', color: 'rgba(255,255,255,0.7)', textAlign: 'center', margin: 'var(--sp-2) 0 0' }}>
              RiverSafe provides guidance only. Always verify conditions before entering the water.
            </p>
          }
        </div>
      </div>
    </div>);

}

Object.assign(window, { IntroScreens });