/* ============================================================
   Compare · FAQ · Contact
   ============================================================ */
const { useState, useEffect, useRef } = React;

function PageHero({ kicker, title, lead, g1 = '#2c82c2', g2 = '#06283d', label, imgSrc, alt }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 140, paddingBottom: 64 }}>
      <PhotoSlot label={label} alt={alt} imgSrc={imgSrc} g1={g1} g2={g2} radius="0" className="fill-abs"
        overlay={<div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(115deg, rgba(6,40,61,.92), rgba(6,40,61,.6))' }}/>}/>
      <div className="wrap" style={{ position: 'relative', zIndex: 2, maxWidth: 800 }}>
        <div className="kicker on-dark" style={{ marginBottom: 16 }}>{kicker}</div>
        <h1 className="h-hero" style={{ color: '#fff', fontSize: 'clamp(36px,5.4vw,64px)' }}>{title}</h1>
        {lead && <p className="lead" style={{ color: 'rgba(234,246,247,.9)', marginTop: 18 }}>{lead}</p>}
      </div>
    </section>
  );
}

/* ---------------- COMPARE ---------------- */
function ComparePage({ go }) {
  const trips = DATA.tripOrder.map(k => DATA.trips[k]);
  const rows = [
    ['Price', t => `${DATA.priceLabel(t).main} ${DATA.priceLabel(t).note}`],
    ['Duration', t => t.duration],
    ['Dolphin search', () => 'Included'],
    ['Snorkeling', t => t.key === 'speedboat' ? 'Depending on package' : 'Included'],
    ['Diving stop', t => t.key === 'diving' ? 'Included' : '—'],
    ['VIP breakfast', t => t.key === 'diving' ? 'Oriental breakfast' : '—'],
    ['Lunch', t => t.key === 'speedboat' ? 'Optional / extra' : 'Included'],
    ['Flexibility', t => t.flexibility],
    ['Best for', t => t.bestFor],
  ];
  const styles = [
    { icon: 'dolphin', t: 'Best for dolphin search', d: 'All four programs include a dolphin-search route. The captain chooses the best area for the day.', pick: 'snorkeling' },
    { icon: 'diver', t: 'Best for divers', d: 'Dolphin with Diving adds VIP oriental breakfast and one diving stop to the standard program.', pick: 'diving' },
    { icon: 'family', t: 'Best for families', d: 'The Dolphin House trip and Private Boat are family-friendly with life jackets and Professional Snorkeling Guide.', pick: 'private_boat' },
    { icon: 'speedboat', t: 'Best for speed', d: 'Private Speedboat is the fastest option — great for couples and guests with limited time.', pick: 'speedboat' },
    { icon: 'shield', t: 'Best for privacy', d: 'Both Private Speedboat and Private Boat give you your own boat. The Private Boat also includes lunch and Professional Snorkeling Guide.', pick: 'private_boat' },
    { icon: 'star', t: 'Best VIP experience', d: 'Dolphin with Diving offers the richest program with oriental breakfast, snorkeling, dolphin search, and a diving stop.', pick: 'diving' },
  ];
  return (
    <main>
      <PageHero kicker="Compare programs" title="Find your perfect Dolphin House day" label="Dolphin House Hurghada boat on the Red Sea"
        lead="Four programs built around dolphin search, snorkeling, and good food. Compare at a glance and choose the one that fits."/>

      {/* choose by travel style */}
      <section className="bg-ivory sec-sm">
        <div className="wrap">
          <SecHead center kicker="Choose by travel style" title="What matters most to you?"/>
          <div className="grid g-3" style={{ marginTop: 36 }}>
            {styles.map((s, i) => {
              const t = DATA.trips[s.pick];
              return (
                <Reveal key={i} delay={(i % 3) * 70}>
                  <div className="surface" style={{ padding: 24, height: '100%', display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <span style={{ width: 48, height: 48, borderRadius: 13, display: 'grid', placeItems: 'center', background: 'rgba(16,182,205,.12)', color: 'var(--turq-deep)' }}>{React.createElement(Ic[s.icon], { width: 24, height: 24 })}</span>
                    <h3 style={{ fontSize: 19 }}>{s.t}</h3>
                    <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', flex: 1 }}>{s.d}</p>
                    <button onClick={() => go(s.pick)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--turq-deep)', fontWeight: 700, fontSize: 14.5 }}>→ {t.name}</button>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* full table */}
      <section className="bg-ivory2 sec-sm">
        <div className="wrap">
          <SecHead kicker="Side by side" title="The full comparison"/>
          <div className="hide-mobile" style={{ marginTop: 28, overflowX: 'auto' }}>
            <table className="cmp">
              <thead><tr><th className="feat" style={{ minWidth: 150 }}>&nbsp;</th>{trips.map(t => <th key={t.key} className={t.accent === 'coral' ? 'hl' : ''} style={{ minWidth: 190 }}>{t.name}<br/><span style={{ fontFamily: 'var(--body)', fontWeight: 600, fontSize: 13, color: 'rgba(255,255,255,.78)' }}>{DATA.priceLabel(t).main} {DATA.priceLabel(t).note}</span></th>)}</tr></thead>
              <tbody>
                {rows.map(([label, fn]) => <tr key={label}><td className="rowlabel">{label}</td>{trips.map(t => <td key={t.key} className={t.accent === 'coral' ? 'hl' : ''}>{fn(t)}</td>)}</tr>)}
                <tr><td className="rowlabel"></td>{trips.map(t => <td key={t.key} className={t.accent === 'coral' ? 'hl' : ''}><div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}><Btn kind="teal" size="sm" onClick={() => go(t.key)}>View</Btn><a className="btn btn-wa btn-sm" href={DATA.waLink(`Hi! I'd like to book the ${t.name} (${DATA.priceLabel(t).main} ${DATA.priceLabel(t).note}).`)} target="_blank" rel="noopener"><Ic.wa/></a></div></td>)}</tr>
              </tbody>
            </table>
          </div>
          {/* mobile stacked */}
          <div className="only-mobile" style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
            {trips.map(t => (
              <div key={t.key} className="surface" style={{ padding: 18 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}><h3 style={{ fontSize: 20 }}>{t.name}</h3><PriceChip trip={t} coral={t.accent === 'coral'}/></div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {rows.slice(1).map(([label, fn]) => <div key={label} style={{ display: 'flex', justifyContent: 'space-between', gap: 14, fontSize: 14, borderBottom: '1px dashed var(--line)', paddingBottom: 8 }}><span style={{ color: 'var(--ink-mute)', fontWeight: 600 }}>{label}</span><span style={{ textAlign: 'right' }}>{fn(t)}</span></div>)}
                </div>
                <div style={{ marginTop: 14 }}><Btn kind="teal" block size="sm" onClick={() => go(t.key)}>View {t.name}</Btn></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* recommendation logic */}
      <section className="bg-deep sec">
        <div className="wrap" style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <SecHead dark center kicker="Still deciding?" title="Our honest recommendation"/>
          <div className="grid g-2" style={{ marginTop: 40, textAlign: 'left' }}>
            {[['snorkeling', 'Choose Dolphin House and Snorkeling if…', 'you want the classic shared dolphin-search day with snorkeling stops, lunch, unlimited soft drinks, Professional Snorkeling Guide, and hotel pickup.'],
              ['diving', 'Choose Snorkeling and Diving if…', 'you want a fuller Red Sea experience — oriental breakfast, dolphin search, snorkeling, and one scuba diving stop with a certified instructor.'],
              ['speedboat', 'Choose the Speedboat trip if…', 'you want a fast, private dolphin-search trip for a couple or small group without a full-day shared boat.'],
              ['private_boat', 'Choose the Private Boat if…', 'you want a private day for your whole group with dolphin search, snorkeling, Professional Snorkeling Guide, lunch, and unlimited soft drinks.']].map(([k, t, d], i) => (
              <div key={k} style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.14)', borderRadius: 20, padding: 26 }}>
                <PriceChip trip={DATA.trips[k]} coral={DATA.trips[k].accent === 'coral'}/>
                <h3 style={{ color: '#fff', fontSize: 19, margin: '14px 0 8px' }}>{t}</h3>
                <p className="on-dark-mute" style={{ fontSize: 14.5 }}>{d}</p>
                <button onClick={() => go(k)} style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--turq-bright)', fontWeight: 700 }}>View {DATA.trips[k].name} <Ic.arrow width="17" height="17"/></button>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40 }}><WAButton size="lg" msg="Hello, I want to book a Dolphin House trip. Can you help me choose the right program?">Ask us to help you choose</WAButton></div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- FAQ ---------------- */
function FaqPage({ go }) {
  const cats = Object.keys(DATA.faqs);
  const catIcon = { 'Dolphin sightings': 'dolphin', 'Programs & inclusions': 'anchor', 'Booking & payment': 'chat', 'Children & safety': 'family', 'Practical details': 'mask' };
  const [active, setActive] = useState(cats[0]);
  const faqTr = (ci, qi, field, fallback) => { const k = 'faq.' + ci + '.' + qi + '.' + field; const v = window.t(k); return v === k ? fallback : v; };
  return (
    <main>
      <PageHero kicker={window.t('faqpage.heroKicker')} title={window.t('faqpage.heroTitle')} label="Calm Red Sea morning at the marina"
        imgSrc="/Images/Hero/Hurghada%20Dolphin%20House%20%20(1).webp" alt="Hurghada Dolphin House snorkeling and dolphin trip"
        lead={window.t('faqpage.heroLead')}/>
      <section className="bg-ivory sec-sm">
        <div className="wrap faq-layout" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 48, alignItems: 'start' }}>
          <aside style={{ position: 'sticky', top: 100 }} className="faq-nav">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {cats.map(c => (
                <button key={c} onClick={() => { setActive(c); document.getElementById('faq-' + c.replace(/\W/g, '')).scrollTop; const el = document.getElementById('faq-' + c.replace(/\W/g, '')); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' }); }}
                  style={{ display: 'flex', alignItems: 'center', gap: 11, textAlign: 'left', padding: '12px 14px', borderRadius: 12, background: active === c ? 'var(--teal)' : 'transparent', color: active === c ? '#fff' : 'var(--ink-soft)', fontWeight: 600, fontSize: 14.5, transition: '.15s' }}>
                  {React.createElement(Ic[catIcon[c]], { width: 18, height: 18 })}{window.t('faqcat.' + c)}
                </button>
              ))}
            </div>
            <div className="surface" style={{ padding: 20, marginTop: 20, background: 'var(--ivory-2)' }}>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', marginBottom: 12 }}>{window.t('faqpage.stillQuestion')}</p>
              <WAButton block size="md" msg={window.t('wa.question')}>{window.t('faqpage.askWa')}</WAButton>
            </div>
          </aside>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
            {cats.map(c => (
              <div key={c} id={'faq-' + c.replace(/\W/g, '')}>
                <h2 className="h-2" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}><span style={{ width: 40, height: 40, borderRadius: 11, background: 'rgba(16,182,205,.12)', color: 'var(--turq-deep)', display: 'grid', placeItems: 'center' }}>{React.createElement(Ic[catIcon[c]], { width: 21, height: 21 })}</span>{window.t('faqcat.' + c)}</h2>
                <div>{DATA.faqs[c].map(([q, a], i) => { const ci = cats.indexOf(c); return <Accordion key={i} q={faqTr(ci, i, 'q', q)} a={faqTr(ci, i, 'a', a)}/>; })}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA go={go}/>
    </main>
  );
}

/* ---------------- HOW YOUR SNORKELING STOP IS CHOSEN (Explained page) ----------------
   Premium, honest, photo-led guide. All copy is crawlable static HTML — no tabs, no map.
   Reef names are presented as "names you may hear", never as guaranteed route stops. */
function SnorkelSpots() {
  const tx = (k, fb) => { const v = window.t(k); return v === k ? fb : v; };

  // The five things the captain actually weighs before picking a snorkeling stop.
  const points = [
    ['wave', tx('dhe.cf.p1.t', 'Sea conditions & wind'), tx('dhe.cf.p1.d', 'Calm water and light wind decide whether a reef is comfortable — and safe — to snorkel.')],
    ['sun', tx('dhe.cf.p2.t', 'Water visibility'), tx('dhe.cf.p2.d', 'Clear, sunlit water makes the reef and its marine life far easier to see.')],
    ['lifejacket', tx('dhe.cf.p3.t', 'Safe entry & exit'), tx('dhe.cf.p3.d', 'The crew chooses a stop where getting in and out of the water stays easy and secure.')],
    ['coral', tx('dhe.cf.p4.t', 'Reef life & snorkeling quality'), tx('dhe.cf.p4.d', 'Healthy coral, reef fish and shallow turquoise water make for the best snorkeling.')],
    ['dolphin', tx('dhe.cf.p5.t', 'Responsible dolphin distance'), tx('dhe.cf.p5.d', 'Wild dolphins are watched calmly, from a respectful distance — never chased or crowded.')],
  ];

  // Honest horizontal flow of how a day unfolds — not a fixed, guaranteed route.
  const flow = [
    ['boat', tx('dhe.cf.f1', 'Hurghada marina')],
    ['wave', tx('dhe.cf.f2', 'Sea conditions check')],
    ['dolphin', tx('dhe.cf.f3', 'Dolphin House area')],
    ['snorkel', tx('dhe.cf.f4', 'Best available reef stop')],
    ['anchor', tx('dhe.cf.f5', 'Return to Hurghada')],
  ];

  // Reef names people hear around Hurghada. Reuse existing translated copy so /de & /zh
  // keep these (honesty-critical) lines localised; Giftun keeps its non-positioning note.
  const reefs = [
    { name: 'Shaab El Erg (Dolphin House)', main: true, line: tx('dhe.spot.shaab', 'Famous reef lagoon area associated with Dolphin House and dolphin-search trips.') },
    { name: 'Abu Nugar Reef', line: tx('dhe.spot.abunugar', 'Coral gardens, reef fish and clear-water snorkeling on suitable sea days.') },
    { name: 'Giftun Island Reefs', line: tx('dhe.spot.giftun.n', 'Dolphin House trips are not sold as Giftun or Orange Bay island trips.') },
    { name: 'Umm Gamar', line: tx('dhe.spot.ummgamar', 'Dramatic reef structures and clear blue water, on selected boat routes.') },
    { name: 'Erg Abu Ramada', line: tx('dhe.spot.ergaburamada', 'Beautiful coral formations and schooling fish in a classic Hurghada reef area.') },
  ];

  const collage = [
    '/Images/Home/Hurghada%20Dolphin%20House%20(5).webp',
    '/Images/Home/Hurghada%20Dolphin%20House%20(8).webp',
    '/Images/Home/Hurghada%20Dolphin%20House%20(6).webp',
  ];

  return (
    <section className="snork-sec sec-sm">
      <div className="wrap">
        <div className="snork-head">
          <div className="kicker">{tx('dhe.spotsKicker', 'Red Sea guide')}</div>
          <h2 className="h-2">{tx('dhe.cf.title', 'How your snorkeling stop is chosen')}</h2>
          <p className="lead">{tx('dhe.cf.lead', 'Popular reef names are useful, but the best stop is chosen based on the sea conditions on the day.')}</p>
        </div>

        <div className="snork-main">
          <Reveal>
            <ul className="snork-points">
              {points.map(([ic, t, d], i) => (
                <li key={i} className="snork-point">
                  <span className="snork-point-ic">{React.createElement(Ic[ic] || Ic.wave, { width: 20, height: 20 })}</span>
                  <div className="snork-point-b">
                    <h3>{t}</h3>
                    <p>{d}</p>
                  </div>
                </li>
              ))}
            </ul>
          </Reveal>
          <Reveal delay={90}>
            <div className="snork-collage">
              <img className="snork-col-img snork-col-tall" src={collage[0]} alt="Wild dolphins and reef water in the Dolphin House area near Hurghada" loading="lazy"/>
              <img className="snork-col-img" src={collage[1]} alt="Snorkeling over a Red Sea coral reef near Hurghada" loading="lazy"/>
              <img className="snork-col-img" src={collage[2]} alt="Clear turquoise Red Sea water on a Hurghada boat day" loading="lazy"/>
              <span className="snork-col-tag">{React.createElement(Ic.pin, { width: 13, height: 13 })} {tx('dhe.cf.tag', 'Hurghada · Red Sea')}</span>
            </div>
          </Reveal>
        </div>

        <div className="snork-flow">
          <div className="snork-flow-cap">{tx('dhe.cf.flowCap', 'How a stop is decided on the day')}</div>
          <ol className="snork-steps">
            {flow.map(([ic, l], i) => (
              <li key={i} className="snork-step">
                <span className="snork-step-ic">{React.createElement(Ic[ic] || Ic.wave, { width: 16, height: 16 })}</span>
                <span className="snork-step-l">{l}</span>
              </li>
            ))}
          </ol>
        </div>

        <div className="snork-reefs">
          <div className="snork-reefs-cap">{tx('dhe.cf.reefsCap', 'Popular reef names you may hear')}</div>
          <p className="snork-reefs-note">{tx('dhe.cf.shaabNote', "Dolphin House is commonly associated with Shaab El Erg, a Red Sea reef area north of Hurghada, Egypt, but exact stops depend on sea conditions and the captain's safety decision.")}</p>
          <div className="snork-chip-grid">
            {reefs.map((r, i) => (
              <article key={i} className={'snork-reef' + (r.main ? ' is-main' : '')}>
                <div className="snork-reef-h">
                  <h3>{r.name}</h3>
                  {r.main && <span className="snork-reef-badge">{tx('dhe.spotMain', 'Main Dolphin House area')}</span>}
                </div>
                <p>{r.line}</p>
              </article>
            ))}
          </div>
        </div>

        <p className="snork-note">{React.createElement(Ic.shield, { width: 17, height: 17 })}
          <span>{tx('dhe.spotsDisclaimer', "Routes depend on weather, sea conditions, trip type, and the captain's safety decision.")} {tx('dhe.spot.shaab.n', 'Dolphins are wild and sightings are never guaranteed.')}</span>
        </p>
      </div>
    </section>
  );
}

/* ---------------- EXPLAINED PAGE (long-form SEO guide) ---------------- */
function ExplainedPage({ go }) {
  // English-first content for new sections: returns the translation when a key
  // exists in the active language, otherwise the English fallback (no raw keys).
  const tx = (k, fb) => { const v = window.t(k); return v === k ? fb : v; };
  const faqs = [0, 1, 2, 3, 4, 5, 6].map(i => [window.t('expf.' + i + '.q'), window.t('expf.' + i + '.a')]);

  const keyPoints = [
    tx('dhe.kp.1', 'Dolphin House is a natural Red Sea reef area — not an aquarium or dolphin show.'),
    tx('dhe.kp.2', 'The dolphins are wild and free, never trained or kept in captivity.'),
    tx('dhe.kp.3', 'Sightings are common but can never be guaranteed.'),
    tx('dhe.kp.4', 'The day is built around dolphin search, snorkeling, reef time and a relaxed boat day.'),
    tx('dhe.kp.5', 'Most trips include snorkeling gear, a guide, lunch, soft drinks and hotel pickup.'),
  ];
  const activities = [
    ['dolphinSearch', tx('dhe.act.1.t', 'Dolphin search'), tx('dhe.act.1.d', 'The crew follows the sea conditions to look for wild dolphins — calmly, and without chasing them.')],
    ['mask', tx('dhe.act.2.t', 'Snorkeling stops'), tx('dhe.act.2.d', 'Guided snorkeling over coral gardens and clear Red Sea water at suitable reef stops.')],
    ['fish', tx('dhe.act.3.t', 'Reef & marine life'), tx('dhe.act.3.d', 'Colourful reef fish, coral blocks and shallow turquoise water — beautiful even when dolphins stay away.')],
    ['anchor', tx('dhe.act.4.t', 'A full boat day'), tx('dhe.act.4.d', 'Time on deck, lunch and soft drinks on board, and an easy day at sea from Hurghada.')],
  ];
  const species = [
    { name: 'Spinner Dolphin', img: '/Images/public/Spinner%20Dolphin.webp',
      desc: tx('dhe.sp.spinner', 'Slim, fast and acrobatic — the species most associated with Red Sea dolphin trips. They travel in social groups and may appear near reef areas when the sea is calm.'),
      note: tx('dhe.sp.spinner.n', 'Most often hoped for · sightings still vary by day') },
    { name: 'Bottlenose Dolphin', img: '/Images/public/Bottlenose%20Dolphin.webp',
      desc: tx('dhe.sp.bottlenose', 'Intelligent, social and powerful swimmers, often linked to reef and lagoon water. Around Dolphin House they may move through reef channels or open-water sections.'),
      note: tx('dhe.sp.bottlenose.n', 'Sometimes seen · never guaranteed') },
    { name: 'Common Bottlenose Dolphin', img: '/Images/public/Common%20Bottlenose%20Dolphin.webp',
      desc: tx('dhe.sp.common', 'Strong, curious and highly social — one of the most recognised dolphins worldwide. In the Red Sea they range across coastal and offshore water.'),
      note: tx('dhe.sp.common.n', 'Depends on route, season & conditions') },
    { name: "Risso's Dolphin", img: "/Images/public/Risso's%20Dolphin.webp",
      desc: tx('dhe.sp.risso', "Larger, with a distinctive pale, scarred body. Usually tied to deeper water and much less likely on a typical Hurghada snorkeling trip, but part of the wider Red Sea population."),
      note: tx('dhe.sp.risso.n', 'Rare on snorkeling trips · deeper water') },
  ];
  const conditions = [
    tx('dhe.cnd.1', 'Calm sea and light wind'),
    tx('dhe.cnd.2', 'Good underwater visibility'),
    tx('dhe.cnd.3', 'An early-morning departure'),
    tx('dhe.cnd.4', 'A flexible route chosen on the day'),
    tx('dhe.cnd.5', 'A responsible, unhurried crew'),
  ];
  const responsible = [
    tx('dhe.rsp.1', 'Never chase, touch or jump on top of dolphins.'),
    tx('dhe.rsp.2', 'Keep a respectful distance and never block their path.'),
    tx('dhe.rsp.3', 'Enter the water calmly and quietly, only when the guide allows.'),
    tx('dhe.rsp.4', 'If dolphins are resting or moving away, watch from the boat.'),
    tx('dhe.rsp.5', 'Enjoy the reef even when dolphins are not present.'),
  ];
  const options = [
    { k: 'snorkeling', best: tx('dhe.opt.snorkeling', 'Best value — a relaxed full-day shared boat with snorkeling stops, lunch, soft drinks and a guide.') },
    { k: 'speedboat', best: tx('dhe.opt.speedboat', 'Fastest and most flexible — a private speedboat for couples and small groups with limited time.') },
    { k: 'private_boat', best: tx('dhe.opt.private_boat', 'Most comfortable — a private boat for families, groups and special occasions, at your own pace.') },
  ];

  return (
    <main>
      <PageHero kicker={window.t('exp.heroKicker')} title={window.t('exp.heroTitle')} label="Dolphin House Hurghada boat trip on the Red Sea"
        imgSrc="/Images/Hero/Hurghada%20Dolphin%20House%20%20(9).webp" alt="Dolphins in the Red Sea near Hurghada"
        lead={window.t('exp.heroLead')}/>

      {/* intro + honest note */}
      <section className="bg-ivory sec-sm">
        <div className="wrap" style={{ maxWidth: 880, margin: '0 auto' }}>
          <div style={{ background: 'var(--ivory-2)', border: '1px solid var(--line)', borderRadius: 16, padding: '18px 22px', marginBottom: 34, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <Ic.dolphin width="22" height="22" style={{ color: 'var(--turq-deep)', flex: 'none', marginTop: 2 }}/>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
              <b style={{ color: 'var(--ink)' }}>{window.t('exp.policyLabel')}</b> {window.t('exp.policyBody')}
            </p>
          </div>
          <h2 className="h-2">{tx('dhe.whatTitle', 'What is Dolphin House in Hurghada?')}</h2>
          <div className="dhe-prose">
            <p>{tx('dhe.what.p1', 'Dolphin House is the popular name for a natural reef area in the Red Sea, north of Hurghada, where wild dolphins are often seen. It is not an aquarium, a pool or a dolphin show — it is open sea, and the dolphins are wild, free and move with the conditions, feeding and their own behaviour.')}</p>
            <p>{tx('dhe.what.p2', 'Because of that, every trip is different. Some days bring unforgettable dolphin encounters; other days are more about snorkeling, coral reefs and simply enjoying the water. A good Dolphin House trip never promises guaranteed dolphin contact.')}</p>
          </div>
          <ul className="ticks dhe-points">
            {keyPoints.map((p, i) => <li key={i}><Ic.check className="tick-yes"/>{p}</li>)}
          </ul>
        </div>
      </section>

      {/* what visitors usually do */}
      <section className="bg-ivory2 sec-sm">
        <div className="wrap">
          <SecHead center kicker={tx('dhe.doKicker', 'On the day')} title={tx('dhe.doTitle', 'What visitors usually do at Dolphin House')}
            lead={tx('dhe.doLead', 'A Dolphin House day mixes dolphin search with a proper Red Sea snorkeling trip — the reefs are a big part of the experience.')}/>
          <div className="grid g-4" style={{ marginTop: 36 }}>
            {activities.map(([ic, t, d], i) => (
              <Reveal key={i} delay={(i % 4) * 60}>
                <div className="surface" style={{ padding: 22, height: '100%' }}>
                  <span style={{ width: 46, height: 46, borderRadius: 12, display: 'grid', placeItems: 'center', background: 'rgba(16,182,205,.12)', color: 'var(--turq-deep)', marginBottom: 14 }}>{React.createElement(Ic[ic] || Ic.dolphin, { width: 23, height: 23 })}</span>
                  <h3 style={{ fontSize: 17.5, marginBottom: 6 }}>{t}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--ink-soft)' }}>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* how your snorkeling stop is chosen — honest, photo-led reef guide */}
      <SnorkelSpots/>

      {/* dolphin species — each card uses its own matching image */}
      <section className="bg-ivory sec-sm">
        <div className="wrap">
          <SecHead center kicker={tx('dhe.spKicker', 'Red Sea dolphins')} title={tx('dhe.spTitle', 'Dolphin species you may see')}
            lead={tx('dhe.spLead', 'Around Hurghada the dolphins most often hoped for are spinner and bottlenose dolphins. Every sighting is of a wild animal and varies day to day.')}/>
          <div className="dhe-species">
            {species.map((s, i) => (
              <Reveal key={i} delay={(i % 2) * 70}>
                <article className="dhe-card">
                  <img className="dhe-card-img" src={s.img} alt={s.name + ' — wild dolphin in the Red Sea near Hurghada'} loading="lazy"/>
                  <div className="dhe-card-body">
                    <h3 style={{ fontSize: 18 }}>{s.name}</h3>
                    <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.55, flex: 1 }}>{s.desc}</p>
                    <span className="dhe-card-note"><Ic.dolphin width="14" height="14"/>{s.note}</span>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* swim with dolphins Hurghada — dedicated, honest two-column section */}
      <section className="bg-ivory2 sec-sm">
        <div className="wrap">
          <SecHead center kicker={window.t('dhe.swim.kicker')} title={window.t('dhe.swim.title')} lead={window.t('dhe.swim.lead')}/>
          <div className="swim-grid">
            <div className="swim-text">
              <div className="dhe-prose">
                <p>{window.t('dhe.swim.p1')}</p>
                <p>{window.t('dhe.swim.p2')}</p>
                <p>{window.t('dhe.swim.p3')}</p>
              </div>
              <div className="swim-badges">
                {[['b1', 'wave'], ['b2', 'lifejacket'], ['b3', 'shield'], ['b4', 'dolphin']].map(([k, ic], i) => (
                  <span className="swim-badge" key={i}>
                    {React.createElement(Ic[ic] || Ic.check, { width: 16, height: 16 })}{window.t('dhe.swim.' + k)}
                  </span>
                ))}
              </div>
            </div>
            <aside className="swim-card">
              <h3 className="swim-card-h">{React.createElement(Ic.check, { width: 18, height: 18 })}{window.t('dhe.swim.checkTitle')}</h3>
              <ul className="swim-checklist">
                {['c1', 'c2', 'c3', 'c4', 'c5', 'c6'].map((k, i) => (
                  <li key={i}><Ic.check className="tick-yes"/>{window.t('dhe.swim.' + k)}</li>
                ))}
              </ul>
            </aside>
          </div>
          <div className="swim-note">
            <Ic.dolphin width="20" height="20"/>
            <p>{window.t('dhe.swim.note')}</p>
          </div>
        </div>
      </section>

      {/* best conditions + responsible behaviour */}
      <section className="bg-deep sec-sm">
        <div className="wrap">
          <SecHead dark center kicker={tx('dhe.careKicker', 'Sea conditions & respect')} title={tx('dhe.careTitle', 'Best conditions and responsible behaviour')}/>
          <div className="dhe-care-grid" style={{ marginTop: 36, textAlign: 'left' }}>
            <figure className="dhe-care-photo">
              <img src="/Images/Hero/Hurghada%20Dolphin%20House%20%20(4).webp" alt="Red Sea boat and snorkeling conditions near Hurghada" loading="lazy"/>
            </figure>
            <div className="dhe-care-cards">
              <div style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.14)', borderRadius: 20, padding: 26 }}>
                <h3 style={{ color: '#fff', fontSize: 18, marginBottom: 14 }}>{tx('dhe.cndTitle', 'Best conditions for a great day')}</h3>
                <ul className="dhe-darklist">{conditions.map((c, i) => <li key={i}><Ic.check width="15" height="15"/>{c}</li>)}</ul>
              </div>
              <div style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.14)', borderRadius: 20, padding: 26 }}>
                <h3 style={{ color: '#fff', fontSize: 18, marginBottom: 14 }}>{tx('dhe.rspTitle', 'Respecting wild dolphins')}</h3>
                <ul className="dhe-darklist">{responsible.map((c, i) => <li key={i}><Ic.shield width="15" height="15"/>{c}</li>)}</ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* which option fits you — internal links to the trip pages */}
      <section className="bg-ivory sec-sm">
        <div className="wrap">
          <SecHead center kicker={tx('dhe.optKicker', 'Choosing a trip')} title={tx('dhe.optTitle', 'Which Dolphin House option fits you?')}/>
          <div className="grid g-3" style={{ marginTop: 36 }}>
            {options.map((o, i) => {
              const t = DATA.trips[o.k];
              return (
                <Reveal key={o.k} delay={(i % 3) * 70}>
                  <div className="surface" style={{ padding: 24, height: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <PriceChip trip={t} coral={t.accent === 'coral'}/>
                    <h3 style={{ fontSize: 19, marginTop: 6 }}>{t.name}</h3>
                    <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', flex: 1 }}>{o.best}</p>
                    <button onClick={() => go(o.k)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--turq-deep)', fontWeight: 700, fontSize: 14.5 }}>{tx('dhe.view', 'View')} {t.name} <Ic.arrow width="16" height="16"/></button>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-ivory2 sec-sm">
        <div className="wrap" style={{ textAlign: 'center' }}>
          <SecHead center kicker={window.t('exp.stillKicker')} title={window.t('exp.stillTitle')} lead={window.t('exp.stillLead')}/>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center', marginTop: 28 }}>
            <WAButton size="lg" msg={window.t('wa.helpChoose')}>{window.t('exp.askFit')}</WAButton>
            <Btn kind="ghost" size="lg" onClick={() => go('home')} icon="arrow">{window.t('exp.comparePrograms')}</Btn>
          </div>
        </div>
      </section>

      {/* FAQ — now one part of the page, not the whole page */}
      <section className="bg-ivory sec-sm">
        <div className="wrap" style={{ maxWidth: 880, margin: '0 auto' }}>
          <SecHead center kicker={tx('dhe.faqKicker', 'Good to know')} title={tx('dhe.faqTitle', 'Dolphin House Hurghada FAQ')}/>
          <div style={{ marginTop: 28 }}>
            {faqs.map(([q, a], i) => <Accordion key={i} q={q} a={a} defaultOpen={i === 0}/>)}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PageHero, ComparePage, FaqPage, ExplainedPage, SnorkelSpots });