// Pages — BRA Tours (with i18n)

const Disclaimer = () => {
  const { t } = useLang();
  return (
    <div className="disclaimer">
      <span className="disclaimer-mark">!</span>
      <div><strong>{t.disclaimer.lead}</strong> {t.disclaimer.body}</div>
    </div>
  );
};

// === Localized price-table builder ===
const buildPriceTables = (t) => {
  const pt = t.prices.priceTables;
  const code = t.code;
  const orMore = pt.rowOrMore;
  const onetwo = code === 'pt' ? '1 ou 2' : code === 'en' ? '1 or 2' : '1 o 2';
  const upN = (n) => (code === 'pt' ? 'até ' : code === 'en' ? 'up to ' : 'hasta ') + n;
  const up = pt.colUpTo;
  return {
    dubai: {
      title: pt.dubaiTitle,
      cols: [pt.colPassengers, `${up} 4h`, `${up} 6h`, `${up} 8h`, pt.colExtraHour],
      rows: [
        [onetwo, '400 USD', '500 USD', '600 USD', '60 USD/h'],
        [upN(4),  '450 USD', '550 USD', '650 USD', '70 USD/h'],
        [upN(6),  '500 USD', '600 USD', '700 USD', '80 USD/h'],
        [upN(8),  '550 USD', '650 USD', '750 USD', '90 USD/h'],
        [`09 ${orMore}`, '55 USD/pp', '80 USD/pp', '100 USD/pp', '100 USD/h'],
      ],
    },
    ad: {
      title: pt.adTitle,
      cols: [pt.colPassengers, `${up} 4h*`, `${up} 8h`, `${up} 10h`, pt.colExtraHour],
      rows: [
        [onetwo, '400 USD', '650 USD', '700 USD', '60 USD/h'],
        [upN(4),  '450 USD', '700 USD', '750 USD', '70 USD/h'],
        [upN(6),  '500 USD', '750 USD', '800 USD', '80 USD/h'],
        [upN(8),  '550 USD', '800 USD', '850 USD', '90 USD/h'],
        [`09 ${orMore}`, '55 USD/pp', '100 USD/pp', '120 USD/pp', '100 USD/h'],
      ],
      note: pt.adNote,
    },
    sh: {
      title: pt.shTitle,
      cols: [pt.colPassengers, `${up} 4h`, `${up} 6h`, `${up} 8h`, pt.colExtraHour],
      rows: [
        [onetwo, '450 USD', '550 USD', '650 USD', '60 USD/h'],
        [upN(4),  '500 USD', '600 USD', '700 USD', '70 USD/h'],
        [upN(6),  '550 USD', '650 USD', '750 USD', '80 USD/h'],
        [upN(8),  '600 USD', '700 USD', '800 USD', '90 USD/h'],
        [`09 ${orMore}`, '65 USD/pp', '90 USD/pp', '110 USD/pp', '100 USD/h'],
      ],
    },
    transfer: {
      title: pt.transferTitle,
      cols: [pt.colPassengers, pt.colRoundtrip, pt.colAirportDxb, pt.colAirportAd, pt.colOneWayAd],
      rows: [
        [onetwo, '200 USD', '250 USD', '350 USD', '250 USD'],
        [upN(4),  '220 USD', '280 USD', '400 USD', '270 USD'],
        [upN(6),  '260 USD', '300 USD', '500 USD', '310 USD'],
        [upN(8),  '280 USD', '350 USD', '600 USD', '350 USD'],
        [`09 ${orMore}`, '350 USD', '400 USD', '700 USD', '400 USD'],
      ],
      note: pt.transferNote,
    },
  };
};

const HomePage = ({ go }) => {
  const { t, lang } = useLang();
  return (
    <main>
      {/* Hero */}
      <section style={{ paddingTop: 'calc(56px * var(--space))', paddingBottom: 'calc(72px * var(--space))' }}>
        <div className="container">
          <div className="eyebrow fade-in text-center" style={{ marginBottom: 28 }}>
            {t.home.eyebrow}
          </div>

          <div className="hero-headline-row fade-in">
            <div className="hero-side-photo">
              <Img src="img/al-fahidi.png" alt="Al Fahidi" ratio="3/4" />
            </div>
            <h1 className="display text-center" style={{ fontSize: 'clamp(40px, 7vw, 110px)', margin: 0, lineHeight: 1.02 }}>
              {t.home.headlineA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.home.headlineB}</span><br />
              {t.home.headlineC}
            </h1>
            <div className="hero-side-photo">
              <Img src="img/safari-camel.png" alt="Safari" ratio="3/4" />
            </div>
          </div>

          <p className="lede fade-in-2 text-center" style={{ margin: '0 auto 32px', maxWidth: 720 }}>
            {t.home.lede}
          </p>
          <div className="fade-in-3" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 64 }}>
            <button className="btn btn-primary" onClick={() => go('tours')}>{t.home.ctaTours} <ArrowI /></button>
            <a className="btn btn-ghost" href="https://wa.me/971552427448" target="_blank" rel="noopener">{t.home.ctaWa} <ArrowI /></a>
          </div>

          <div className="hero-collage">
            <div className="hero-collage-main">
              <Img src="img/hero-burj-arab.png" alt="Burj Al Arab" style={{ height: '100%' }} />
              <img src="img/selo-gold.png" alt="" className="hero-seal" />
            </div>
            <Img src="img/gold-souk.png" alt="Gold Souk" style={{ height: '100%' }} />
            <Img src="img/abu-dhabi.png" alt="Abu Dhabi" style={{ height: '100%' }} />
            <Img src="img/museu-futuro.jpg" alt="Museu do Futuro" style={{ height: '100%' }} />
            <Img src="img/dubai-modern.png" alt="Dubai Moderna" style={{ height: '100%' }} />
          </div>
        </div>
      </section>

      <div className="pattern-stars-blue" style={{ height: 64, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}></div>

      <Marquee items={t.marquee} />

      {/* Featured tours */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow={t.home.featuredEyebrow}
            title={<>{t.home.featuredTitleA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.home.featuredTitleB}</span></>}
            action={<a className="btn btn-ghost" onClick={() => go('tours')}>{t.home.viewAllN.replace('{n}', TOURS.length)} <ArrowI /></a>} />

          <div className="grid-3">
            {TOURS.slice(0, 3).map((tour) => <TourCard key={tour.id} tour={tour} onOpen={(id) => go('tour', id)} />)}
          </div>
          <div style={{ marginTop: 24 }}>
            <TourCard tour={TOURS.find((x) => x.id === 'safari-vip')} onOpen={(id) => go('tour', id)} layout="wide" />
          </div>
          <div className="grid-3" style={{ marginTop: 24 }}>
            {[TOURS.find((x) => x.id === 'helicoptero'), TOURS.find((x) => x.id === 'yacht'), TOURS.find((x) => x.id === 'veuve-clicquot')].map((tour) => <TourCard key={tour.id} tour={tour} onOpen={(id) => go('tour', id)} />)}
          </div>
        </div>
      </section>

      {/* About / Mariana split */}
      <section className="section bg-2 pattern-tile" style={{ backgroundBlendMode: 'multiply' }}>
        <div className="container">
          <div className="swash" style={{ marginBottom: 64 }}>
            <span className="swash-mark">✦</span>
          </div>
          <div className="split-21">
            <div style={{ position: 'relative' }}>
              <Img src="img/mariana.png" alt="Mariana" ratio="4/5" />
              <img src="img/selo-brown.png" alt="" style={{ position: 'absolute', bottom: -32, left: -32, width: 120 }} />
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t.home.founderEyebrow}</div>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: 0, marginBottom: 32 }}>
                {t.home.founderTitleA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.home.founderTitleB}</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 580, marginBottom: 20 }}>
                {t.home.founderP1}
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 580 }}>
                {t.home.founderP2}
              </p>
              <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
                <BigStat n="12+" l={t.home.statLabels[0]} />
                <BigStat n="5" l={t.home.statLabels[1]} />
                <BigStat n="3" l={t.home.statLabels[2]} />
              </div>
              <div style={{ marginTop: 32 }}>
                <button className="btn btn-ghost" onClick={() => go('sobre')}>{t.home.meetTeam} <ArrowI /></button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tickets preview */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow={t.home.ticketsEyebrow}
            title={<>{t.home.ticketsTitleA} <span className="display-script" style={{ color: 'var(--ink-2)' }}>{t.home.ticketsTitleB}</span></>}
            action={<a className="btn btn-ghost" onClick={() => go('ingressos')}>{t.home.ticketsCta} <ArrowI /></a>} />

          <div className="grid-4">
            {t.home.ticketsItems.map((tk, i) => (
              <div key={i} className="card">
                <Img src={['img/burj-khalifa.jpg', 'img/museu-futuro.jpg', 'img/abu-dhabi-mosque.jpg', 'img/louvre-abu-dhabi.jpg'][i]} ratio="1 / 1" />
                <div style={{ padding: 20 }}>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>{t.home.ticketLabel}</div>
                  <div style={{ fontFamily: 'var(--principal)', fontSize: 20, textTransform: 'uppercase', letterSpacing: '0.02em' }}>{tk.l}</div>
                  <div style={{ marginTop: 8, color: 'var(--accent)', fontFamily: 'var(--destaque)', fontStyle: 'italic', fontSize: 18 }}>{tk.v}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28, maxWidth: 880, marginLeft: 'auto', marginRight: 'auto' }}>
            <Disclaimer />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section bg-ink pattern-stars-dark" style={{ backgroundBlendMode: 'soft-light', position: 'relative' }}>
        <div className="container" style={{ textAlign: 'center', position: 'relative' }}>
          <img src="img/logo-gold.png" alt="" style={{ width: 140, margin: '0 auto 32px', display: 'block' }} />
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 32 }}>{t.home.ctaBigEyebrow}</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 6vw, 88px)', margin: 0, marginBottom: 16 }}>
            {t.home.ctaBigTitleA}
          </h2>
          <h2 className="display-script" style={{ fontSize: 'clamp(36px, 6vw, 88px)', margin: 0, marginBottom: 40, color: 'var(--accent-2)' }}>{t.home.ctaBigTitleB}</h2>
          <div style={{ display: 'inline-flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a className="btn" style={{ background: 'var(--mirage)', color: 'var(--night)' }} href="https://wa.me/971552427448" target="_blank" rel="noopener">
              WhatsApp +971 55 242 7448 <ArrowI />
            </a>
            <a className="btn" style={{ background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(255,255,255,0.3)' }} href="mailto:reservation@bratoursdubai.com">
              reservation@bratoursdubai.com
            </a>
          </div>
        </div>
      </section>
    </main>
  );
};


const BigStat = ({ n, l }) =>
<div>
    <div style={{ fontFamily: 'var(--principal)', fontSize: 56, fontWeight: 400, lineHeight: 1, color: 'var(--accent)' }}>{n}</div>
    <div className="eyebrow" style={{ marginTop: 8 }}>{l}</div>
  </div>;


// Tours listing
const ToursPage = ({ go }) => {
  const { t, lang } = useLang();
  const [region, setRegion] = React.useState('__all');
  const regions = Array.from(new Set(TOURS.map((tour) => localizedTour(tour, lang).region)));
  const filtered = TOURS.filter((tour) => region === '__all' || localizedTour(tour, lang).region === region);

  return (
    <main>
      <section style={{ paddingTop: 'calc(56px * var(--space))', paddingBottom: 'calc(48px * var(--space))' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>{t.tours.eyebrowN.replace('{n}', TOURS.length)}</div>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 7vw, 100px)', margin: '0 auto 32px', maxWidth: 1100 }}>
            {t.tours.titleA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.tours.titleB}</span>
          </h1>
          <p className="lede" style={{ maxWidth: 760, margin: '0 auto' }}>
            {t.tours.lede}
          </p>
        </div>
      </section>

      <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', position: 'sticky', top: 76, background: 'color-mix(in oklab, var(--bg) 92%, transparent)', backdropFilter: 'blur(8px)', zIndex: 30 }}>
        <div className="container" style={{ padding: '20px calc(32px * var(--space))', display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
          <span className="eyebrow">{t.tours.filter}</span>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {[['__all', t.tours.all], ...regions.map(r => [r, r])].map(([v, l]) =>
              <button
                key={v}
                onClick={() => setRegion(v)}
                style={{
                  background: region === v ? 'var(--ink)' : 'transparent',
                  color: region === v ? 'var(--paper)' : 'var(--ink-2)',
                  border: '1px solid ' + (region === v ? 'var(--ink)' : 'var(--line)'),
                  borderRadius: 999,
                  padding: '6px 14px',
                  fontSize: 13,
                  fontFamily: 'var(--apoio)'
                }}>{l}</button>
            )}
          </div>
          <div style={{ marginLeft: 'auto', fontSize: 13, color: 'var(--ink-3)' }}>
            <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{filtered.length}</span> {t.tours.of} {TOURS.length}
          </div>
        </div>
      </div>

      <section style={{ paddingTop: 'calc(56px * var(--space))', paddingBottom: 'calc(96px * var(--space))' }}>
        <div className="container">
          <div className="grid-3">
            {filtered.map((tour) => <TourCard key={tour.id} tour={tour} onOpen={(id) => go('tour', id)} />)}
          </div>
        </div>
      </section>
    </main>);
};

// Tour detail
const TourPage = ({ tourId, go }) => {
  const { t, lang } = useLang();
  const baseTour = TOURS.find((x) => x.id === tourId) || TOURS[0];
  const tour = localizedTour(baseTour, lang);
  return (
    <main>
      <section style={{ paddingTop: 'calc(48px * var(--space))', paddingBottom: 'calc(40px * var(--space))' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 24, fontSize: 13, color: 'var(--ink-3)', justifyContent: 'center', flexWrap: 'wrap' }}>
            <a onClick={() => go('home')} style={{ cursor: 'pointer' }}>{t.tour.breadcrumbHome}</a>
            <span>›</span>
            <a onClick={() => go('tours')} style={{ cursor: 'pointer' }}>{t.tour.breadcrumbTours}</a>
            <span>›</span>
            <span style={{ color: 'var(--ink)' }}>{tour.name}</span>
          </div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>{tour.region} · {tour.duration} · {tour.group}</div>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 7vw, 100px)', margin: '0 auto 32px', maxWidth: 1100 }}>{tour.name}</h1>
          <p className="lede" style={{ maxWidth: 760, margin: '0 auto' }}>{tour.summary}</p>
        </div>
      </section>

      <section style={{ paddingBottom: 'calc(64px * var(--space))' }}>
        <div className="container-wide" style={{ position: 'relative' }}>
          <Img src={tour.image} alt={tour.name} ratio="21/9" />
          <img src="img/selo-gold.png" alt="" style={{ position: 'absolute', top: 32, right: 56, width: 110, filter: 'drop-shadow(0 8px 24px rgba(0,0,0,0.4))' }} />
        </div>
      </section>

      <section style={{ paddingBottom: 'calc(96px * var(--space))' }}>
        <div className="container">
          <div className="split-detail">
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{t.tour.optionsEyebrow}</div>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 52px)', margin: 0, marginBottom: 48 }}>
                {t.tour.optionsTitleA} <span className="display-script">{t.tour.optionsTitleB}</span>
              </h2>
              <div style={{ borderTop: '1px solid var(--ink)' }}>
                {tour.options.map((o, i) =>
                <div key={i} className="tour-option" style={{ borderBottom: '1px solid var(--line)', padding: '28px 0', display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32 }}>
                    <div style={{ fontFamily: 'var(--principal)', fontSize: 22, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.02em' }}>{o.label}</div>
                    <div style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)' }}>{o.body}</div>
                  </div>
                )}
              </div>

              <div style={{ marginTop: 64 }}>
                <div className="eyebrow" style={{ marginBottom: 18 }}>{t.tour.highlightsEyebrow}</div>
                <h3 className="display" style={{ fontSize: 'clamp(26px, 4vw, 38px)', margin: '0 0 32px' }}>{t.tour.highlightsTitle}</h3>
                <div className="grid-2" style={{ gap: 16 }}>
                  {tour.highlights.map((h, i) =>
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)', flexShrink: 0, marginTop: 8 }}></span>
                      <span style={{ fontSize: 16 }}>{h}</span>
                    </div>
                  )}
                </div>
              </div>

              <div style={{ marginTop: 32 }}>
                <Disclaimer />
              </div>
            </div>

            <aside>
              <div style={{ position: 'sticky', top: 100, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: 32 }}>
                {baseTour.price > 0 ? <>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>{t.common.from}</div>
                  <div style={{ fontFamily: 'var(--principal)', fontSize: 52, fontWeight: 400, lineHeight: 1, marginBottom: 4, color: 'var(--accent)' }}>US$ {baseTour.price.toLocaleString('pt-BR')}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 32 }}></div>
                </> : <>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>{t.common.valueLabel}</div>
                  <div style={{ fontFamily: 'var(--destaque)', fontSize: 32, fontWeight: 500, lineHeight: 1.1, marginBottom: 4, fontStyle: 'italic' }}>{t.common.consultValue}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 32 }}>{t.common.customTable}</div>
                </>}

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 32, paddingBottom: 32, borderBottom: '1px solid var(--line)' }}>
                  <Stat label={t.tour.duration} value={tour.duration} />
                  <Stat label={t.tour.group} value={tour.group} />
                  <Stat label={t.tour.type} value={tour.difficulty} />
                  <Stat label={t.tour.region} value={tour.region} />
                </div>

                <a className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} href={`https://wa.me/971552427448?text=${encodeURIComponent(t.tour.bookText + tour.name)}`} target="_blank" rel="noopener">{t.common.book} <ArrowI /></a>
                <a className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', marginTop: 10 }} href="mailto:reservation@bratoursdubai.com">{t.common.sendEmail}</a>

                <div style={{ marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>{t.tour.cancellationEyebrow}</div>
                  <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, margin: 0 }}>
                    {t.tour.cancellationBody}
                  </p>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow={t.tour.similarEyebrow} title={<>{t.tour.similarTitleA} <span className="display-script">{tour.region}</span></>} action={<a className="btn btn-ghost" onClick={() => go('tours')}>{t.common.viewAll} <ArrowI /></a>} />
          <div className="grid-3">
            {TOURS.filter((x) => x.id !== baseTour.id).slice(0, 3).map((x) => <TourCard key={x.id} tour={x} onOpen={(id) => go('tour', id)} />)}
          </div>
        </div>
      </section>
    </main>);
};

// Prices page
const PrecosPage = ({ go }) => {
  const { t } = useLang();
  const tables = buildPriceTables(t);
  return (
    <main>
      <section style={{ paddingTop: 'calc(56px * var(--space))', paddingBottom: 'calc(48px * var(--space))' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>{t.prices.eyebrow}</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 8vw, 110px)', margin: '0 auto 40px', maxWidth: 1100 }}>
            {t.prices.titleA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.prices.titleB}</span>
          </h1>
          <p className="lede" style={{ maxWidth: 760, margin: '0 auto 32px' }}>
            {t.prices.lede}
          </p>
          <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'left' }}>
            <Disclaimer />
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <PriceTable table={tables.dubai} />
          <PriceTable table={tables.ad} />
          <PriceTable table={tables.sh} />
          <PriceTable table={tables.transfer} />
        </div>
      </section>

      <section className="section bg-2">
        <div className="container">
          <div className="grid-2" style={{ gap: 64 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{t.prices.payEyebrow}</div>
              <h2 className="display" style={{ fontSize: 'clamp(30px, 4vw, 44px)', margin: '0 0 28px' }}>{t.prices.payTitle}</h2>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16, fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)' }}>
                {t.prices.payItems.map(([k, v], i) => (
                  <li key={i}><strong style={{ color: 'var(--ink)' }}>{k}</strong> {v}</li>
                ))}
              </ul>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{t.prices.notesEyebrow}</div>
              <h2 className="display" style={{ fontSize: 'clamp(30px, 4vw, 44px)', margin: '0 0 28px' }}>{t.prices.notesTitle}</h2>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)' }}>{t.prices.notes1}</p>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)' }}>{t.prices.notes2}</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};


// Tickets page
const IngressosPage = () => {
  const { t } = useLang();
  return (
    <main>
      <section style={{ paddingTop: 'calc(56px * var(--space))', paddingBottom: 'calc(48px * var(--space))' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>{t.tickets.eyebrow}</div>
          <h1 className="display" style={{ fontSize: 'clamp(46px, 8vw, 110px)', margin: '0 auto 32px', maxWidth: 1100 }}>
            {t.tickets.titleA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.tickets.titleB}</span>
          </h1>
          <p className="lede" style={{ maxWidth: 720, margin: '0 auto 32px' }}>
            {t.tickets.lede}
          </p>
          <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'left' }}>
            <Disclaimer />
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="container grid-2" style={{ gap: 32, alignItems: 'flex-start' }}>
          {/* Dubai list */}
          <div>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 38px)', margin: '0 0 24px' }}>{t.tickets.dubai}</h2>
            <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
              <div style={{ overflowX: 'auto' }}>
                <table className="price-tbl">
                  <thead><tr><th>{t.tickets.tableAttraction}</th><th style={{ textAlign: 'right' }}>{t.tickets.tableValue}</th></tr></thead>
                  <tbody>
                    {TICKETS_DUBAI.map(([n, v], i) =>
                      <tr key={i}><td>{n}</td><td style={{ textAlign: 'right', color: 'var(--accent)', fontFamily: 'var(--destaque)', fontStyle: 'italic', fontSize: 18 }}>{v}</td></tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          {/* Abu Dhabi list + CTA card to balance height */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 38px)', margin: '0 0 24px' }}>{t.tickets.abuDhabi}</h2>
              <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
                <div style={{ overflowX: 'auto' }}>
                  <table className="price-tbl">
                    <thead><tr><th>{t.tickets.tableAttraction}</th><th style={{ textAlign: 'right' }}>{t.tickets.tableValue}</th></tr></thead>
                    <tbody>
                      {TICKETS_ABU_DHABI.map(([n, v], i) =>
                        <tr key={i}><td>{n}</td><td style={{ textAlign: 'right', color: 'var(--accent)', fontFamily: 'var(--destaque)', fontStyle: 'italic', fontSize: 18 }}>{v}</td></tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            {/* Image */}
            <Img src="img/louvre-abu-dhabi.jpg" alt="Louvre Abu Dhabi" ratio="16/10" />

            {/* CTA Card */}
            <div className="tickets-cta-card">
              <div className="eyebrow" style={{ color: 'var(--accent-2)' }}>{t.tickets.ctaEyebrow}</div>
              <h3 className="display" style={{ margin: 0, fontSize: 'clamp(24px, 3vw, 32px)', color: 'var(--paper)' }}>{t.tickets.ctaTitle}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)' }}>{t.tickets.ctaBody}</p>
              <ul>
                {t.tickets.ctaBullets.map((b, i) => <li key={i}>{b}</li>)}
              </ul>
              <a className="btn" style={{ background: 'var(--accent-2)', color: 'var(--night)', alignSelf: 'flex-start', marginTop: 8 }} href="https://wa.me/971552427448" target="_blank" rel="noopener">
                {t.tickets.ctaButton} <ArrowI />
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

// Sobre / About
const SobrePage = ({ go }) => {
  const { t, lang } = useLang();
  const mariana = GUIDES.find((g) => g.name === 'Mariana');
  const others = GUIDES.filter((g) => g.name !== 'Mariana');
  const lMariana = mariana ? localizedGuide(mariana, lang) : null;
  const lInfo = localizedInfo(lang);
  return (
    <main>
      <section style={{ paddingTop: 'calc(56px * var(--space))', paddingBottom: 'calc(72px * var(--space))' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>{t.about.eyebrow}</div>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 7.5vw, 110px)', margin: '0 auto 48px', maxWidth: 1100 }}>
            {t.about.titleA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.about.titleB}</span>
          </h1>
          <p className="lede" style={{ maxWidth: 820, margin: '0 auto' }}>
            {t.about.lede}
          </p>
        </div>
      </section>

      <section className="section bg-2">
        <div className="container">
          <SectionHead eyebrow={t.about.teamEyebrow} title={<>{t.about.teamTitleA} <span className="display-script">{t.about.teamTitleB}</span></>} />

          {lMariana &&
          <div className="featured-guide">
              <Img src={lMariana.img} alt={lMariana.name} ratio="4/5" />
              <div>
                <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>{t.about.featuredEyebrow}</div>
                <h3 style={{ fontFamily: 'var(--principal)', fontSize: 'clamp(34px, 4.5vw, 52px)', fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.02em', margin: '0 0 10px' }}>{lMariana.name}</h3>
                <div className="eyebrow" style={{ marginBottom: 22 }}>{lMariana.role}</div>
                <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', margin: 0 }}>{lMariana.bio}</p>
                <div style={{ marginTop: 24 }}>
                  <a className="btn btn-ghost" href="https://wa.me/971552427448" target="_blank" rel="noopener">{t.about.talkToMariana} <ArrowI /></a>
                </div>
              </div>
            </div>
          }

          <div className="grid-2" style={{ gap: 48 }}>
            {others.map((g, i) => {
              const lg = localizedGuide(g, lang);
              return (
                <div key={i} className="guide-row" style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 24, alignItems: 'flex-start' }}>
                  {g.img ? <Img src={g.img} alt={g.name} ratio="4/5" /> : <div className="ph" style={{ aspectRatio: '4/5' }}>{g.name}</div>}
                  <div>
                    <div style={{ fontFamily: 'var(--principal)', fontSize: 26, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.02em' }}>{g.name}</div>
                    <div className="eyebrow" style={{ marginTop: 4, marginBottom: 16 }}>{lg.role}</div>
                    <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>{lg.bio}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow={t.about.infoEyebrow} title={<>{t.about.infoTitleA} <span className="display-script">{t.about.infoTitleB}</span></>} />
          <div className="grid-3" style={{ gap: 40 }}>
            {lInfo.map((info, idx) =>
            <div key={idx} style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>{String(idx + 1).padStart(2, '0')}</div>
                <h3 style={{ fontFamily: 'var(--principal)', fontSize: 24, fontWeight: 400, textTransform: 'uppercase', letterSpacing: '0.02em', margin: '0 0 14px' }}>{info.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>{info.body}</p>
              </div>
            )}
          </div>
        </div>
      </section>
    </main>);
};


// Contato
const ContatoPage = () => {
  const { t } = useLang();
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    const data = new FormData(e.target);
    try {
      const res = await fetch('https://formspree.io/f/maqznrbb', {
        method: 'POST',
        body: data,
        headers: { Accept: 'application/json' }
      });
      if (res.ok) {
        setStatus('success');
        e.target.reset();
      } else {
        setStatus('error');
      }
    } catch (_) {
      setStatus('error');
    }
  };

  return (
    <main>
      <section style={{ paddingTop: 'calc(56px * var(--space))', paddingBottom: 'calc(96px * var(--space))' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div className="eyebrow" style={{ marginBottom: 28 }}>{t.contact.eyebrow}</div>
            <h1 className="display" style={{ fontSize: 'clamp(46px, 8vw, 110px)', margin: '0 auto', maxWidth: 1100 }}>
              {t.contact.titleA} <span className="display-script" style={{ color: 'var(--accent)' }}>{t.contact.titleB}</span>
            </h1>
          </div>
          <div className="split-contact">
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              <Field label={t.contact.name} name="name" required />
              <Field label={t.contact.email} name="email" type="email" required />
              <Field label={t.contact.when} name="dates" placeholder={t.contact.whenPh} />
              <Field label={t.contact.type} name="message" multiline />
              {status === 'success' && (
                <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: '16px 20px', color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.5 }}>
                  ✓ {t.contact.successMsg || 'Mensagem enviada! Entraremos em contato em breve.'}
                </div>
              )}
              {status === 'error' && (
                <div style={{ background: '#fff5f5', border: '1px solid #fca5a5', borderRadius: 'var(--r-md)', padding: '16px 20px', color: '#b91c1c', fontSize: 15 }}>
                  {t.contact.errorMsg || 'Algo deu errado. Tente novamente ou fale pelo WhatsApp.'}
                </div>
              )}
              <button
                className="btn btn-primary"
                type="submit"
                disabled={status === 'sending'}
                style={{ alignSelf: 'flex-start', marginTop: 12, opacity: status === 'sending' ? 0.6 : 1 }}>
                {status === 'sending' ? '...' : <>{t.contact.send} <ArrowI /></>}
              </button>
            </form>
            <div style={{ position: 'relative' }}>
              <img src="img/selo-brown.png" alt="" style={{ width: 96, marginBottom: 24 }} />
              <div className="eyebrow" style={{ marginBottom: 16 }}>{t.contact.or}</div>
              <div style={{ fontFamily: 'var(--destaque)', fontSize: 24, fontWeight: 500, lineHeight: 1.4, marginBottom: 32 }}>
                <a href="https://wa.me/971552427448" target="_blank" rel="noopener" style={{ color: 'var(--accent)' }}>WhatsApp +971 55 242 7448</a><br />
                <a href="mailto:reservation@bratoursdubai.com">reservation@bratoursdubai.com</a><br />
                <a href="https://instagram.com/marianaguiadubai" target="_blank" rel="noopener">@marianaguiadubai</a>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', marginBottom: 40 }}>
                {t.contact.response}
              </p>

              <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: 24, display: 'grid', gridTemplateColumns: '140px 1fr', gap: 20, alignItems: 'center' }}>
                <img src="img/whatsapp-qr.png" alt="QR Code" style={{ width: '100%', borderRadius: 8 }} />
                <div>
                  <div className="eyebrow" style={{ marginBottom: 10 }}>{t.contact.qrEyebrow}</div>
                  <div style={{ fontFamily: 'var(--principal)', fontSize: 20, textTransform: 'uppercase', letterSpacing: '0.02em', lineHeight: 1.15, marginBottom: 8 }}>{t.contact.qrCompany}</div>
                  <a href="https://wa.me/971552427448" target="_blank" rel="noopener" style={{ fontFamily: 'var(--destaque)', fontStyle: 'italic', fontSize: 16, color: 'var(--accent)' }}>wa.me/971552427448</a>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6 }}>WhatsApp Business</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>);
};


const Field = ({ label, placeholder, multiline, name, type, required }) => {
  const Tag = multiline ? 'textarea' : 'input';
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <span className="eyebrow">{label}</span>
      <Tag
        name={name}
        type={type || (multiline ? undefined : 'text')}
        placeholder={placeholder || ''}
        rows={multiline ? 4 : undefined}
        required={required}
        style={{
          fontFamily: 'var(--destaque)',
          fontSize: 22,
          background: 'transparent',
          border: 'none',
          borderBottom: '1px solid var(--ink)',
          padding: '12px 0',
          outline: 'none',
          color: 'var(--ink)',
          resize: multiline ? 'vertical' : 'none'
        }} />
    </label>);
};

Object.assign(window, {
  HomePage, ToursPage, TourPage, PrecosPage, IngressosPage, SobrePage, ContatoPage, Disclaimer
});