/* ============================================================
   HOMEPAGE part 2 — experience, responsible, practical,
   comparison preview, guides, FAQ preview, final CTA + Home
   ============================================================ */

/* ---------------- EXPERIENCE (visual, emotional) ---------------- */
function Experience() {
  return (
    <section className="bg-ivory sec">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="exp-grid">
          <div>
            <SecHead kicker={window.t('exp.kicker')} title={window.t('exp.title')}
              lead={window.t('exp.lead')}/>
            <ul className="ticks" style={{ marginTop: 26 }}>
              {[['exp.tick1', 'dolphin'], ['exp.tick2', 'mask'], ['exp.tick3', 'dolphin'], ['exp.tick4', 'check']].map(([k, ic], i) => (
                <li key={i}>{React.createElement(Ic[ic], { className: 'tick-yes' })}{window.t(k)}</li>
              ))}
            </ul>
            <div style={{ marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 12, background: 'var(--ivory-2)', border: '1px solid var(--line)', borderRadius: 14, padding: '14px 18px' }}>
              <Ic.dolphin width="22" height="22" style={{ color: 'var(--turq-deep)', flex: 'none' }}/>
              <span style={{ fontSize: 14.5, color: 'var(--ink-soft)' }}><b style={{ color: 'var(--ink)' }}>{window.t('exp.note.b')}</b> {window.t('exp.note.rest')}</span>
            </div>
          </div>
          <div className="exp-collage" aria-hidden="true">
            <img className="exp-col-img exp-col-tall" src="/Images/Home/Hurghada%20Dolphin%20House%20(9).webp" alt="" loading="lazy"/>
            <img className="exp-col-img" src="/Images/Home/Hurghada%20Dolphin%20House%20(3).webp" alt="" loading="lazy"/>
            <img className="exp-col-img" src="/Images/Home/Hurghada%20Dolphin%20House%20(7).webp" alt="" loading="lazy"/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- RESPONSIBLE WATCHING (brand value) ---------------- */
function Responsible() {
  const rules = [window.t('resp.r1'), window.t('resp.r2'), window.t('resp.r3'), window.t('resp.r4')];
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }} className="sec bg-deep">
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="resp-grid">
          <div>
            <div className="kicker on-dark" style={{ marginBottom: 16 }}><Ic.dolphin width="15" height="15" style={{ marginRight: -2 }}/> {window.t('resp.kicker')}</div>
            <h2 className="h-1" style={{ color: '#fff' }}>{window.t('resp.title.1')}<br/>{window.t('resp.title.2')}</h2>
            <p className="lead" style={{ color: 'rgba(234,246,247,.85)', marginTop: 20 }}>
              {window.t('resp.lead')}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 30, maxWidth: 460 }}>
              {rules.map((r, i) => (
                <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.14)', borderRadius: 13, padding: '13px 15px', fontWeight: 600, fontSize: 14.5, color: '#eaf6f7' }}>
                  <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgba(39,205,226,.2)', color: 'var(--turq-bright)', display: 'grid', placeItems: 'center', flex: 'none' }}><Ic.check width="15" height="15"/></span>{r}
                </span>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <PhotoSlot label="Dolphins seen at a respectful distance from the boat" g1="#2c82c2" g2="#06283d" ratio="4/3.4" radius="24px" className="label-top" imgSrc="/Images/Home/Hurghada%20Dolphin%20House%20(2).webp"/>
            <div style={{ position: 'absolute', bottom: -20, left: -16, background: 'var(--ivory)', borderRadius: 16, padding: '14px 18px', boxShadow: 'var(--shadow-lg)', maxWidth: 230 }} className="hide-mobile">
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--teal)', fontFamily: 'var(--display)', fontWeight: 700, fontSize: 15, marginBottom: 4 }}><Ic.shield width="18" height="18"/> {window.t('resp.seaTitle')}</div>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{window.t('resp.seaNote')}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRACTICAL DETAILS ---------------- */
function Practical() {
  return (
    <section className="bg-ivory2 sec">
      <div className="wrap">
        <SecHead center kicker={window.t('prac.kicker')} title={window.t('prac.title')} lead={window.t('prac.lead')}/>
        <div className="grid g-3" style={{ marginTop: 44 }}>
          {DATA.practical.map(([ic, t, d], i) => (
            <Reveal key={t} delay={(i % 3) * 70}>
              <div style={{ display: 'flex', gap: 16, background: '#fff', border: '1px solid var(--line)', borderRadius: 18, padding: 22, height: '100%' }}>
                <span style={{ width: 46, height: 46, borderRadius: 12, flex: 'none', display: 'grid', placeItems: 'center', background: 'var(--ivory-2)', color: 'var(--turq-deep)' }}>{React.createElement(Ic[({ anchor: 'diver', chat: 'calendar' })[ic] || ic], { width: 23, height: 23 })}</span>
                <span>
                  <h3 style={{ fontSize: 17.5, marginBottom: 5 }}>{window.t('prac.' + ic + '.t')}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--ink-soft)' }}>{window.t('prac.' + ic + '.d')}</p>
                </span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- HELP ME CHOOSE (trip advisor) ----------------
   Replaces the old "Four programs, side by side" comparison table. This is an
   advisory section: it helps people decide by scenario, it does NOT repeat the
   full specs or add per-trip "View" buttons (the trip cards above do that). */
function HelpMeChoose({ go }) {
  const scenarios = [
    { key: 'snorkeling',   icon: 'dolphinSearch', label: window.t('finder.o1.label') },
    { key: 'diving',       icon: 'diver',         label: window.t('finder.o2.label') },
    { key: 'speedboat',    icon: 'speedboat',     label: window.t('finder.o3.label') },
    { key: 'private_boat', icon: 'family',        label: window.t('finder.o4.label') },
  ];
  return (
    <section className="bg-ivory2 sec">
      <div className="wrap">
        {/* ocean banner */}
        <div className="advisor-band">
          <img className="advisor-band-img" src="/Images/public/Hurghada%20Dolphin%20House.webp" alt="" aria-hidden="true"/>
          <div className="advisor-band-veil"></div>
          <div className="advisor-band-body">
            <div className="kicker on-dark">{window.t('which.kicker')}</div>
            <h2 className="h-1" style={{ color: '#fff' }}>{window.t('adv.title')}</h2>
            <p className="lead" style={{ color: 'rgba(234,246,247,.9)', marginTop: 14, maxWidth: '52ch' }}>{window.t('adv.sub')}</p>
          </div>
        </div>
        {/* scenario cards */}
        <div className="advisor-cards">
          {scenarios.map(s => {
            const trip = DATA.trips[s.key];
            return (
              <Reveal key={s.key}>
                <div className="advisor-card">
                  <span className="advisor-ic">{React.createElement(Ic[s.icon], { width: 22, height: 22 })}</span>
                  <h3 className="advisor-card-t">{s.label}</h3>
                  <p className="advisor-card-why">{window.t('which.note.' + s.key)}</p>
                  <div className="advisor-card-rec"><Ic.check width="14" height="14"/> {window.tt(trip, 'name')}</div>
                  <div className="advisor-card-meta"><Ic.clock width="13" height="13"/> {window.tt(trip, 'duration')}</div>
                </div>
              </Reveal>
            );
          })}
          <Reveal>
            <div className="advisor-card advisor-card-help" role="button" tabIndex="0" onClick={() => go('contact')}>
              <span className="advisor-ic advisor-ic-help">{React.createElement(Ic.chat, { width: 22, height: 22 })}</span>
              <h3 className="advisor-card-t">{window.t('finder.stillUnsure')}</h3>
              <p className="advisor-card-why">{window.t('finder.lead')}</p>
              <span className="advisor-card-link">{window.t('nav.contact')} <Ic.arrow width="15" height="15"/></span>
            </div>
          </Reveal>
        </div>
        {/* CTA bar — primary Start booking, one subtle WhatsApp secondary */}
        <div className="advisor-bar">
          <span className="advisor-bar-text">{window.t('exp.stillLead')}</span>
          <div className="advisor-bar-cta">
            <Btn kind="coral" size="md" onClick={() => go('contact')} icon="arrow">{window.t('nav.contact')}</Btn>
            <WAButton size="md" msg={window.t('wa.notSure')}>{window.t('co.askWa')}</WAButton>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRICE LIST (SEO-friendly program comparison) ----------------
   Compact, crawlable HTML price table — visible price TEXT for SEO + users. */
function PriceList({ go }) {
  const trips = DATA.tripOrder.map(k => DATA.trips[k]);
  const priceText = (t) => {
    const pl = DATA.priceLabel(t);
    return pl.isFixed
      ? (pl.main + ' ' + window.t('pl.perBoat'))
      : (window.t('prod.from') + ' ' + pl.main + ' ' + window.t('pl.perAdult'));
  };
  return (
    <section className="bg-ivory sec">
      <div className="wrap">
        <SecHead center kicker={window.t('cmp.kicker')} title={window.t('pl.title')} lead={window.t('pl.sub')}/>
        <div className="pricelist-wrap">
          <table className="pricelist">
            <thead>
              <tr>
                <th>{window.t('board.trip')}</th>
                <th>{window.t('cmp.row.price')}</th>
                <th>{window.t('cmp.row.duration')}</th>
                <th>{window.t('prod.includedShort')}</th>
                <th>{window.t('cmp.row.bestFor')}</th>
              </tr>
            </thead>
            <tbody>
              {trips.map(t => (
                <tr key={t.key}>
                  <td className="pl-prog" data-label={window.t('board.trip')}>{window.tt(t, 'name')}</td>
                  <td className="pl-price" data-label={window.t('cmp.row.price')}>{priceText(t)}</td>
                  <td className="pl-dur" data-label={window.t('cmp.row.duration')}>{window.tt(t, 'duration')}</td>
                  <td className="pl-inc" data-label={window.t('prod.includedShort')}>{(window.tt(t, 'personality') || []).slice(0, 3).join(' · ')}</td>
                  <td className="pl-best" data-label={window.t('cmp.row.bestFor')}>{window.tt(t, 'bestFor')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ textAlign: 'center', marginTop: 26 }}>
          <Btn kind="coral" size="lg" onClick={() => go('contact')} icon="arrow">{window.t('nav.contact')}</Btn>
        </div>
      </div>
    </section>
  );
}

/* ---------------- GUIDES / SEO PREVIEW ---------------- */
function Guides({ go }) {
  return (
    <section className="bg-ivory2 sec">
      <div className="wrap">
        <SecHead kicker={window.t('guides.kicker')} title={window.t('guides.title')} lead={window.t('guides.lead')}/>
        <div className="grid g-3" style={{ marginTop: 40 }}>
          {DATA.guides.map(([title, desc, tag, g1, g2], i) => (
            <Reveal key={title} delay={i * 90}>
              <article className="tripcard" style={{ cursor: 'pointer' }} onClick={() => go('explained')}>
                <div className="media" style={{ aspectRatio: '16/10' }}>
                  <PhotoSlot label={title} g1={g1} g2={g2} radius="0" className="fill"/>
                  <div style={{ position: 'absolute', top: 14, left: 14, zIndex: 3 }}><span className="tag" style={{ background: 'rgba(252,247,237,.94)', color: 'var(--turq-deep)' }}>{window.t('guide.' + (i + 1) + '.tag')}</span></div>
                </div>
                <div className="body">
                  <h3 style={{ fontSize: 20 }}>{window.t('guide.' + (i + 1) + '.title')}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', flex: 1 }}>{window.t('guide.' + (i + 1) + '.desc')}</p>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--turq-deep)', fontWeight: 700, fontSize: 14.5 }}>{window.t('guides.read')} <Ic.arrow width="17" height="17"/></span>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ PREVIEW ---------------- */
function FaqPreview({ go }) {
  const ft = (ci, qi, field, fb) => { const k = 'faq.' + ci + '.' + qi + '.' + field; const v = window.t(k); return v === k ? fb : v; };
  const pickRefs = [[0, 0], [0, 3], [1, 0], [2, 0], [4, 0]];
  const catKeys = Object.keys(DATA.faqs);
  const picks = pickRefs.map(([ci, qi]) => { const raw = DATA.faqs[catKeys[ci]][qi]; return [ft(ci, qi, 'q', raw[0]), ft(ci, qi, 'a', raw[1])]; });
  const icons = ['shield', 'dolphinSearch', 'tag', 'calendar', 'bag'];
  return (
    <section className="sec faqc-sec">
      <div className="wrap faqc-wrap">
        <div className="faqc-head">
          <div className="kicker center"><Ic.dolphin width="14" height="14" style={{ marginRight: -2 }}/> {window.t('faqp.kicker')}</div>
          <h2 className="h-1">{window.t('faqp.title')}</h2>
          <p className="lead">{window.t('faqp.lead')}</p>
        </div>
        <div className="faqc-card">
          {picks.map(([q, a], i) => <Accordion key={i} q={q} a={a} icon={icons[i]} defaultOpen={i === 0}/>)}
        </div>
        <div className="faqc-foot">
          <button className="faq-seeall" onClick={() => go('faq')}>{window.t('faqp.all')} <Ic.arrow width="16" height="16"/></button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- GUEST REVIEWS ---------------- */
function GuestReviews() {
  const reviews = [
    { av: 'A', name: 'Anna K.', tk: 'rev.1.text', mk: 'rev.1.meta' },
    { av: 'M', name: 'Mark T.', tk: 'rev.2.text', mk: 'rev.2.meta' },
    { av: 'S', name: 'Sofia R.', tk: 'rev.3.text', mk: 'rev.3.meta' },
  ];
  return (
    <section className="sec reviews-sec">
      <div className="wrap">
        <SecHead center title={window.t('rev.title')} lead={window.t('rev.sub')}/>
        <div className="reviews-grid">
          {reviews.map((r, i) => (
            <Reveal key={i} delay={i * 80}>
              <article className="rev-card">
                <div className="rev-stars" role="img" aria-label={window.t('faqp.reviewAria')}>
                  {[0, 1, 2, 3, 4].map(s => <Ic.star key={s} width="16" height="16"/>)}
                </div>
                <p className="rev-text">“{window.t(r.tk)}”</p>
                <div className="rev-by">
                  <span className="rev-av" aria-hidden="true">{r.av}</span>
                  <span>
                    <span className="rev-name">{r.name}</span>
                    <span className="rev-meta">{window.t(r.mk)}</span>
                  </span>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FINAL CTA ---------------- */
function FinalCTA({ go, trip }) {
  const msg = trip ? window.t('wa.finalBook', { name: window.tt(trip, 'name'), price: DATA.priceLabel(trip).main, note: DATA.priceLabel(trip).note }) : window.t('wa.helpChoose');
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <PhotoSlot label="Wild spinner dolphins in the open Red Sea" g1="#2c82c2" g2="#06283d" radius="0" className="fill-abs"
        imgSrc="/Images/Home/Hurghada%20Dolphin%20House%20(4).webp"
        overlay={<div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(120deg, rgba(6,40,61,.92) 0%, rgba(6,40,61,.7) 45%, rgba(10,52,80,.55) 100%)' }}/>}/>
      <div className="wrap" style={{ position: 'relative', zIndex: 2, padding: '110px 24px', textAlign: 'center' }}>
        <div className="kicker on-dark center" style={{ marginBottom: 18 }}>{window.t('final.kicker')}</div>
        <h2 className="h-1" style={{ color: '#fff', maxWidth: 760, margin: '0 auto' }}>{window.t('final.title')}</h2>
        <p className="lead" style={{ color: 'rgba(234,246,247,.88)', margin: '20px auto 0', textAlign: 'center' }}>{window.t('final.lead')}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center', marginTop: 34 }}>
          <WAButton size="lg" msg={msg}>{window.t('nav.bookViaWhatsapp')}</WAButton>
          <Btn kind="ghost-light" size="lg" onClick={() => go('contact')}>{window.t('final.book')}</Btn>
        </div>
      </div>
    </section>
  );
}

/* ---------------- HOME ASSEMBLY ---------------- */
function Home({ go, tw }) {
  return (
    <main>
      <Hero go={go} tw={tw}/>
      <HelpMeChoose go={go}/>
      <TripPicker go={go} tw={tw}/>
      <WhichTrip go={go}/>
      <WhyUs/>
      <Experience/>
      <Responsible/>
      <Practical/>
      <PriceList go={go}/>
      <Guides go={go}/>
      <FaqPreview go={go}/>
      <GuestReviews/>
      <FinalCTA go={go}/>
    </main>
  );
}

Object.assign(window, { Home, Experience, Responsible, Practical, HelpMeChoose, PriceList, Guides, FaqPreview, GuestReviews, FinalCTA });