/* global React, SecHead */
const { useState: useStateX } = React;
const { Ic } = window;

/* ============================================================
   VIDEO REELS — short, 60-second educational guides
   Horizontal scroll-snap rail of 9:16 reel cards.
   image-slot holds the poster (user drops a frame); a play
   button + bottom gradient + title sit on top (pointer-none
   so the drop target underneath still works).
   ============================================================ */
const REELS = [
{ id: 'vid-1', tag: 'Patient story', url: 'https://youtube.com/shorts/tesuoGosJ9g', thumb: 'https://i.ytimg.com/vi/tesuoGosJ9g/oardefault.jpg',
  t: 'Care Beyond the Clinic', accent: '#271A11', ic: 'MessageCircle', ph: '' },
{ id: 'vid-2', tag: 'Patient story', url: 'https://youtube.com/shorts/A_dH_mA9BE0', thumb: 'https://i.ytimg.com/vi/A_dH_mA9BE0/oardefault.jpg',
  t: 'Trusted Care, Right at Home', accent: '#271A11', ic: 'MessageCircle', ph: '' },
{ id: 'vid-3', tag: 'Patient story', url: 'https://youtube.com/shorts/3yMlnsNFjpU', thumb: 'https://i.ytimg.com/vi/3yMlnsNFjpU/oardefault.jpg',
  t: 'Healthcare That Came Home', accent: '#271A11', ic: 'MessageCircle', ph: '' },
{ id: 'vid-4', tag: 'Patient story', url: 'https://youtube.com/shorts/rcSWb_jsw0A', thumb: 'https://i.ytimg.com/vi/rcSWb_jsw0A/oardefault.jpg',
  t: 'Why I Chose Dr. Morepen Home', accent: '#271A11', ic: 'MessageCircle', ph: '' },
{ id: 'vid-5', tag: 'Patient story', url: 'https://youtube.com/shorts/e5u0B1Tm3Kw', thumb: 'https://i.ytimg.com/vi/e5u0B1Tm3Kw/oardefault.jpg',
  t: 'Trusted Healthcare at Home', accent: '#271A11', ic: 'MessageCircle', ph: '' }];

function VideoReels() {
  return (
    <div className="sec" style={{ background: 'var(--paper)', paddingBottom: 8 }}>
      <SecHead kicker="Watch · 60-second guides">Health, <em style={{ fontStyle: 'normal', fontWeight: 500 }}>explained simply.</em></SecHead>
      <p style={{ color: 'var(--muted)', fontSize: 14, marginTop: -6, marginBottom: 18, textAlign: 'center', maxWidth: 320, marginLeft: 'auto', marginRight: 'auto' }}>
        Quick answers to the questions families ask us most.
      </p>

      <div style={{ display: 'flex', gap: 14, overflowX: 'auto', scrollSnapType: 'x mandatory', scrollPaddingLeft: '22px', WebkitOverflowScrolling: 'touch',
        margin: '0 -22px', padding: '4px 22px 14px', scrollbarWidth: 'none' }}>
        {REELS.map((r) => {
          const CardTag = r.url ? 'a' : 'div';
          const linkProps = r.url ? { href: r.url, target: '_blank', rel: 'noopener noreferrer' } : {};
          return (
        <div key={r.id} style={{ flex: '0 0 188px', scrollSnapAlign: 'start' }}>
            <CardTag {...linkProps} style={{ display: 'block', position: 'relative', width: 188, height: 320, borderRadius: 22, overflow: 'hidden', boxShadow: 'var(--shadow-md)', background: 'var(--espresso)', cursor: r.url ? 'pointer' : 'default', textDecoration: 'none' }}>
              {r.thumb ? (
              <img src={r.thumb} alt={r.t} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              ) : (
              <image-slot id={r.id} shape="rect" fit="cover" placeholder={r.ph}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
              )}

              {/* darkening gradient for text legibility */}
              <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
              background: 'linear-gradient(to top, rgba(20,12,4,.82) 0%, rgba(20,12,4,.18) 46%, rgba(20,12,4,.04) 70%, transparent 100%)' }}></div>

              {/* category tag */}
              <span aria-hidden="true" style={{ position: 'absolute', top: 12, left: 12, pointerEvents: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'rgba(255,255,255,.94)', color: r.accent, borderRadius: 999, padding: '5px 11px', fontSize: 10.5, fontWeight: 700,
              letterSpacing: '.03em', textTransform: 'uppercase', whiteSpace: 'nowrap', boxShadow: 'var(--shadow-sm)' }}>
                <Ic n={r.ic} size={13} color={r.accent} stroke={2} />
                {r.tag}
              </span>

              {/* play button */}
              <span aria-hidden="true" style={{ position: 'absolute', left: '50%', top: '48%', transform: 'translate(-50%,-50%)', pointerEvents: 'none',
              width: 54, height: 54, borderRadius: '50%', background: 'rgba(255,255,255,.92)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 20px rgba(20,12,4,.4)' }}>
                <Ic n="Play" size={22} color="var(--espresso)" fill="var(--espresso)" stroke={1.5} />
              </span>

              {/* title */}
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, pointerEvents: 'none', padding: '0 15px 16px' }}>
                <h3 style={{ color: '#fff', fontSize: 17, lineHeight: 1.2, fontWeight: 700 }}>{r.t}</h3>
              </div>
            </CardTag>
          </div>
          );
        })}
      </div>
    </div>);

}

/* ============================================================
   CARE KIT — what your doctor brings to every home visit.
   Concise horizontal scroll-snap rail of compact item cards.
   Sits inside / after "Meet your care team".
   ============================================================ */
const KIT = [
{ id: 'kit-iv', t: 'IV Kit', s: 'In-home infusion & drips', ph: 'Sterile IV infusion set & cannula',
  src: 'app/images/kit-iv.jpeg', ic: 'Syringe' },
{ id: 'kit-vitals', t: 'Vitals kit', s: 'BP, SpO₂, temp & pulse', ph: 'BP monitor, pulse oximeter, thermometer',
  ic: 'HeartPulse' },
{ id: 'kit-ecg', t: '12-lead ECG', s: 'A full heart check at home', ph: 'Portable ECG device',
  ic: 'Activity' },
{ id: 'kit-glucose', t: 'Glucometer', s: 'Sugar reading on the spot', ph: 'Glucometer & test strips',
  ic: 'Droplet' },
{ id: 'kit-labs', t: 'Lab sample kit', s: 'Blood drawn at home', ph: 'Vacutainers & sample collection kit',
  ic: 'FlaskConical' },
{ id: 'kit-meds', t: 'Essential medicines', s: 'First-line & emergency', ph: 'Organised medicine & first-aid case',
  ic: 'Package' },
{ id: 'kit-neb', t: 'Nebulizer', s: 'Breathing support', ph: 'Nebulizer and small oxygen support',
  ic: 'Wind' }];

function CareKit() {
  return (
    <div style={{ marginTop: 28 }}>
      <div aria-hidden="true" style={{ width: 48, height: 3, borderRadius: 999, background: 'var(--line-2)', margin: '0 auto 22px' }}></div>
      <h3 style={{ fontSize: 19, color: 'var(--ink)', lineHeight: 1.15, textAlign: 'center', fontStyle: 'italic', fontWeight: 700 }}>The kit they bring along</h3>

      <div style={{ display: 'flex', gap: 12, overflowX: 'auto', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch',
        margin: '14px -22px 0 0', padding: '0 22px 6px 0', scrollbarWidth: 'none' }}>
        {KIT.map((k) =>
        <div key={k.id} style={{ flex: '0 0 142px', scrollSnapAlign: 'start' }}>
            <div style={{ position: 'relative', width: 142, height: 132, borderRadius: 18, overflow: 'hidden', background: '#fff', boxShadow: 'var(--shadow-sm)' }}>
              <image-slot id={k.id} shape="rect" fit="contain" placeholder={k.ph} src={k.src || `app/images/${k.id}.png`}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
              <span aria-hidden="true" style={{ position: 'absolute', top: 9, left: 9, pointerEvents: 'none', width: 30, height: 30, borderRadius: 9,
              background: 'rgba(255,255,255,.94)', display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-sm)' }}>
                <Ic n={k.ic} size={17} color="var(--espresso)" stroke={1.9} />
              </span>
            </div>
            <h4 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', marginTop: 10, lineHeight: 1.2 }}>{k.t}</h4>
            <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2, lineHeight: 1.3 }}>{k.s}</p>
          </div>
        )}
      </div>
    </div>);

}

Object.assign(window, { VideoReels, CareKit });