/* ============================================================
   HOMEPAGE  — Red Sea Pulse
   Hero variations: 'immersive' | 'editorial'
   Trip-picker variations: 'cards' | 'board'
   ============================================================ */
const HOME_HEADLINES = {
  a: ['Choose your', 'Dolphin House', 'trip from Hurghada'],
};

/* ---------------- HERO ---------------- */
function Hero({ go, tw }) {
  const trips = DATA.tripOrder.map(k => DATA.trips[k]);
  if (tw.hero === 'editorial') return <HeroEditorial go={go} trips={trips}/>;
  return <HeroImmersive go={go} trips={trips}/>;
}

function TrustRow({ dark }) {
  const ico = { daily: 'dolphinSearch', pickup: 'van', guide: 'guide', respect: 'shield' };
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '14px 26px' }}>
      {DATA.trustRow.map(([k, label]) => {
        const I = Ic[ico[k]];
        return <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 14.5, fontWeight: 600, color: dark ? 'rgba(234,246,247,.92)' : 'var(--ink-soft)' }}>
          <span style={{ width: 30, height: 30, borderRadius: 9, display: 'grid', placeItems: 'center', background: dark ? 'rgba(39,205,226,.16)' : 'rgba(16,182,205,.12)', color: 'var(--turq-bright)' }}><I width="17" height="17"/></span>
          {window.t('trust.' + k)}
        </span>;
      })}
    </div>
  );
}

function HeroImmersive({ go, trips }) {
  return (
    <section className="hero-immersive" style={{ position: 'relative', display: 'flex', flexDirection: 'column', zIndex: 2, overflow: 'hidden' }}>
      {/* full-bleed static image cover (gradient fallback behind), no video */}
      <div className="hero-bg" style={{ position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 0 }}>
        <img className="hero-bg-img" src="/Images/public/Hurghada%20Dolphin%20House.webp"
          alt="Hurghada Dolphin House — Red Sea dolphin boat trip" aria-hidden="true"/>
        <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(105deg, rgba(6,40,61,.9) 0%, rgba(6,40,61,.62) 45%, rgba(6,40,61,.3) 100%)' }}></div>
      </div>
      <div className="wrap hero-content-wrap" style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ maxWidth: 760 }}>
          <div className="tag turq" style={{ background: 'rgba(39,205,226,.18)', color: '#bdf4fb', backdropFilter: 'blur(4px)', marginBottom: 22 }}><Ic.star width="13" height="13"/> {window.t('hero.kicker')}</div>
          <h1 className="h-hero" style={{ color: '#fff' }}>
            {window.t('hero.headline')}
          </h1>
          <p className="lead" style={{ color: 'rgba(234,246,247,.9)', marginTop: 22, maxWidth: '46ch' }}>
            {window.t('hero.sub')}
          </p>
          <p style={{ color: 'rgba(234,246,247,.72)', fontSize: 14, marginTop: 14, maxWidth: '44ch' }}>{window.t('hero.disclaimer')}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 26 }}>
            <WAButton size="lg" msg="Hello, I want to book a Dolphin House trip. Can you help me choose the right program?">{window.t('hero.ctaBook')}</WAButton>
            <Btn kind="ghost-light" size="lg" onClick={() => go('home')} icon="arrow">{window.t('hero.ctaCompare')}</Btn>
          </div>
          <div style={{ marginTop: 40 }}><TrustRow dark/></div>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ go, trips }) {
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--ivory), var(--ivory-2))', paddingTop: 112, paddingBottom: 60, overflow: 'hidden' }}>
      <div className="wrap hero-ed-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
        <div className="hero-ed-copy">
          <div className="tag turq" style={{ marginBottom: 22 }}><Ic.star width="13" height="13"/> {window.t('hero.kickerShort')}</div>
          <h1 className="h-hero">{window.t('hero.headline')}</h1>
          <p className="lead" style={{ marginTop: 22 }}>{window.t('hero.sub')}</p>
          <p style={{ color: 'var(--ink-soft)', fontSize: 14, marginTop: 12 }}>{window.t('hero.disclaimer')}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 26 }}>
            <WAButton size="lg" msg={window.t('wa.helpChoose')}>{window.t('hero.ctaBook')}</WAButton>
            <Btn kind="ghost" size="lg" onClick={() => go('home')} icon="arrow">{window.t('hero.ctaCompare')}</Btn>
          </div>
          <div style={{ marginTop: 38 }}><TrustRow/></div>
        </div>
        <div style={{ position: 'relative' }} className="hero-ed-collage">
          <PhotoSlot label="Red Sea water + boat departure" g1="#2c82c2" g2="#0a3450" ratio="3/4" radius="24px"
            overlay={<PriceChip trip={trips[0]} float/>}/>
          <div style={{ position: 'absolute', bottom: -22, left: -22, width: '52%' }}>
            <PhotoSlot label="Snorkelling the reef" g1="#27cde2" g2="#1e7fb8" ratio="1/1" radius="20px" className="shadow-pop"/>
          </div>
          <div style={{ position: 'absolute', top: 28, right: -20, background: '#fff', borderRadius: 16, padding: '14px 16px', boxShadow: 'var(--shadow-lg)', display: 'flex', alignItems: 'center', gap: 11 }}>
            <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--wa)', display: 'grid', placeItems: 'center', color: '#06351a' }}><Ic.wa width="22" height="22"/></span>
            <span style={{ lineHeight: 1.15 }}><b style={{ fontFamily: 'var(--display)', fontSize: 15 }}>{window.t('hero.fastReply')}</b><br/><span style={{ fontSize: 12.5, color: 'var(--ink-mute)' }}>{window.t('hero.withinMinutes')}</span></span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- TRIP PICKER ---------------- */
function TripPicker({ go, tw }) {
  const trips = DATA.tripOrder.map(k => DATA.trips[k]);
  const pulled = tw.hero === 'immersive';
  return (
    <section className="bg-ivory" style={{ position: 'relative', zIndex: 1, paddingTop: 96, paddingBottom: 96 }}>
      <div className="wrap">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 38 }}>
          <SecHead kicker={window.t('picker.kicker')} title={window.t('picker.title')} lead={window.t('picker.lead')}/>
          <Btn kind="ghost" onClick={() => go('home')} icon="arrow">{window.t('picker.viewPrograms')}</Btn>
        </div>
        {tw.picker === 'board' ? <PickerBoard trips={trips} go={go}/> : <PickerCards trips={trips} go={go}/>}
      </div>
    </section>
  );
}

function PickerCards({ trips, go }) {
  return (
    <div className="grid g-3">
      {trips.map((t, i) => (
        <Reveal key={t.key} delay={i * 90}>
          <div className="tripcard">
            <div className="media">
              <Link to={t.key} className="tripcard-media-link" aria-hidden="true" tabIndex={-1}>
                <PhotoSlot label={t.photo} g1={t.g1} g2={t.g2} radius="0" className="fill" imgSrc={t.imgSrc}/>
              </Link>
              <PriceChip trip={t} float coral={t.accent === 'coral'}/>
            </div>
            <div className="body">
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <Tag tone={t.accent === 'coral' ? 'coral' : 'turq'}>{window.tt(t, 'bestForShort')}</Tag>
                <Pill icon="clock" solid>{window.tt(t, 'duration')}</Pill>
              </div>
              <h3><Link to={t.key} className="tripcard-title-link">{window.tt(t, 'cardTitle') || window.tt(t, 'name')}</Link></h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 15.5, flex: 1 }}>{window.tt(t, 'reason')}</p>
              <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
                <Link to={t.key} className="btn btn-teal btn-block">{window.t('picker.viewTrip')}</Link>
                <a className="btn btn-wa" aria-label={window.t('picker.bookWa')} href={DATA.waLink(window.t('wa.bookTripShort', { name: window.tt(t, 'name'), price: DATA.priceLabel(t).main, note: DATA.priceLabel(t).note }))} target="_blank" rel="noopener" style={{ flex: 'none', padding: '0 16px' }}><Ic.wa/></a>
              </div>
            </div>
          </div>
        </Reveal>
      ))}
    </div>
  );
}

function PickerBoard({ trips, go }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="board-head hide-mobile" style={{ display: 'grid', gridTemplateColumns: '88px 1.6fr 1fr 1fr auto', gap: 18, padding: '0 22px', alignItems: 'center', color: 'var(--turq-deep)', fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase' }}>
        <span></span><span>{window.t('board.trip')}</span><span>{window.t('board.duration')}</span><span>{window.t('board.bestFor')}</span><span>{window.t('board.from')}</span>
      </div>
      {trips.map((t, i) => (
        <Reveal key={t.key} delay={i * 80}>
          <button onClick={() => go(t.key)} className="board-row" style={{ width: '100%', display: 'grid', gridTemplateColumns: '88px 1.6fr 1fr 1fr auto', gap: 18, alignItems: 'center', background: '#fff', border: '1px solid var(--line)', borderRadius: 20, padding: 14, paddingRight: 18, textAlign: 'left', boxShadow: 'var(--shadow-sm)', transition: 'transform .18s ease, box-shadow .2s ease' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}>
            <span style={{ width: 88, height: 70, borderRadius: 13, position: 'relative', overflow: 'hidden', background: `linear-gradient(140deg, ${t.g1}, ${t.g2})` }}>
              {t.imgSrc && <img src={t.imgSrc} alt={window.tt(t, 'name')} loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={e => { e.currentTarget.style.display = 'none'; }}/>}
            </span>
            <span>
              <span style={{ display: 'flex', gap: 9, alignItems: 'center', marginBottom: 5 }}><Tag tone={t.accent === 'coral' ? 'coral' : 'turq'}>{window.tt(t, 'bestForShort')}</Tag></span>
              <span style={{ display: 'block', fontFamily: 'var(--display)', fontWeight: 700, fontSize: 21, color: 'var(--ink)' }}>{window.tt(t, 'name')}</span>
              <span className="only-mobile" style={{ display: 'block', fontSize: 13.5, color: 'var(--ink-mute)', marginTop: 4 }}>{window.tt(t, 'duration')} · {DATA.priceLabel(t).main} {DATA.priceLabel(t).note}</span>
            </span>
            <span className="hide-mobile" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--ink-soft)', fontWeight: 600 }}><Ic.clock width="17" height="17" style={{ color: 'var(--turq-deep)' }}/>{window.tt(t, 'duration')}</span>
            <span className="hide-mobile" style={{ color: 'var(--ink-soft)', fontWeight: 600, fontSize: 14.5 }}>{window.tt(t, 'bestFor')}</span>
            <span className="hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ textAlign: 'right' }}>
                <span style={{ display: 'block', fontFamily: 'var(--display)', fontWeight: 800, fontSize: 26, color: 'var(--teal)', lineHeight: 1 }}>{DATA.priceLabel(t).main}</span>
                <span style={{ fontSize: 12, color: 'var(--ink-mute)' }}>{DATA.priceLabel(t).note}</span>
              </span>
              <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--teal)', color: '#fff', display: 'grid', placeItems: 'center' }}><Ic.arrow width="20" height="20"/></span>
            </span>
          </button>
        </Reveal>
      ))}
    </div>
  );
}

/* ---------------- WHICH TRIP (guided decision) ---------------- */
function WhichTrip({ go }) {
  const cards = [
    { key: 'snorkeling', icon: 'dolphin', g: ['#3e9bda', '#0e3a56'] },
    { key: 'diving', icon: 'diver', g: ['#2bc6da', '#1e7fb8'] },
    { key: 'speedboat', icon: 'speedboat', g: ['#2c82c2', '#0a3450'] },
    { key: 'private_boat', icon: 'family', g: ['#3e9bda', '#0e3a56'] },
  ].map(c => ({ ...c, q: window.t('which.q.' + c.key), a: window.t('which.a.' + c.key), note: window.t('which.note.' + c.key) }));
  return (
    <section className="bg-deep sec" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* cinematic poster-cover background (no iframe / no player) */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, overflow: 'hidden' }}>
        <img className="which-bg-img" src="https://i.ytimg.com/vi/P0z5bP0ygfM/maxresdefault.jpg"
          alt="" aria-hidden="true"
          onError={(e) => { if (!e.target.dataset.fb) { e.target.dataset.fb = '1'; e.target.src = 'https://i.ytimg.com/vi/P0z5bP0ygfM/hqdefault.jpg'; } }}/>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(6,40,61,.86) 0%, rgba(10,52,80,.92) 100%)' }}></div>
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <SecHead dark center kicker={window.t('which.kicker')} title={window.t('which.title')} lead={window.t('which.lead')}/>
        <div className="grid g-2" style={{ marginTop: 48 }}>
          {cards.map((c, i) => (
            <Reveal key={c.key} delay={i * 80}>
              <button onClick={() => go(c.key)} style={{ display: 'flex', flexDirection: 'column', gap: 16, textAlign: 'left', width: '100%', height: '100%', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.14)', borderRadius: 22, padding: 28, transition: '.2s' }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,.09)'; e.currentTarget.style.transform = 'translateY(-5px)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,.05)'; e.currentTarget.style.transform = 'none'; }}>
                <span style={{ width: 54, height: 54, borderRadius: 15, display: 'grid', placeItems: 'center', background: `linear-gradient(140deg, ${c.g[0]}, ${c.g[1]})`, color: '#fff' }}>{React.createElement(Ic[c.icon], { width: 26, height: 26 })}</span>
                <span style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 18, color: '#fff', lineHeight: 1.2 }}>{c.q}</span>
                <span className="on-dark-mute" style={{ fontSize: 14.5 }}>{c.note}</span>
                <span style={{ marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 9, color: 'var(--turq-bright)', fontWeight: 700, fontFamily: 'var(--display)', fontSize: 16 }}>→ {c.a}</span>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- WHY US ---------------- */
function WhyUs() {
  const ico = { local: 'dolphin', direct: 'shield', daily: 'calendar', pickup: 'van', guide: 'guide', wa: 'wa', pay: 'wallet', respect: 'dolphin' };
  return (
    <section className="bg-ivory2 sec">
      <div className="wrap">
        <SecHead kicker={window.t('why.kicker')} title={window.t('why.title')} lead={window.t('why.lead')}/>
        <div className="grid g-4" style={{ marginTop: 44 }}>
          {DATA.whyUs.map(([k, t, d], i) => (
            <Reveal key={k} delay={(i % 4) * 70}>
              <div style={{ background: '#fff', borderRadius: 18, padding: 24, height: '100%', border: '1px solid var(--line)', boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ width: 46, height: 46, borderRadius: 12, display: 'grid', placeItems: 'center', background: k === 'wa' ? 'rgba(37,211,102,.14)' : 'rgba(16,182,205,.12)', color: k === 'wa' ? 'var(--wa-dark)' : 'var(--turq-deep)', marginBottom: 16 }}>{React.createElement(Ic[ico[k]], { width: 23, height: 23 })}</span>
                <h3 style={{ fontSize: 18, marginBottom: 7 }}>{window.t('why.' + k + '.t')}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)' }}>{window.t('why.' + k + '.d')}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TripPicker, WhichTrip, WhyUs, TrustRow });