// Shared components for BRA Tours

const ArrowI = ({ size = 14 }) => (
  <svg className="arrow-i" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const PlusI = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
  </svg>
);
const MinusI = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
  </svg>
);

const Img = ({ src, alt, label, ratio, style, children }) => {
  const wrap = ratio
    ? { aspectRatio: ratio, width: '100%', ...style }
    : { ...style };
  return (
    <div className="img-wrap" style={wrap}>
      {src ? <img src={src} alt={alt || label || ''} /> : (
        <div className="ph" style={{ width: '100%', height: '100%' }}>{label || 'imagem'}</div>
      )}
      {children}
    </div>
  );
};

const Logo = ({ onClick, variant = 'gold' }) => (
  <a className="logo" onClick={onClick}>
    <img className="logo-mark" src={variant === 'brown' ? 'img/selo-brown.png' : 'img/selo-gold.png'} alt="BRA Tours" />
    <span style={{ display: 'flex', flexDirection: 'column' }}>
      <span className="logo-bra">BRA</span>
      <span className="logo-tours">Tours</span>
    </span>
  </a>
);

// Language switcher pill
const LangSwitch = () => {
  const { lang, setLang } = useLang();
  const opts = [['pt', 'PT'], ['en', 'EN'], ['es', 'ES']];
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      {opts.map(([v, l]) => (
        <button key={v} onClick={() => setLang(v)} aria-pressed={lang === v}>{l}</button>
      ))}
    </div>
  );
};

// Top nav
const Nav = ({ page, go }) => {
  const { t } = useLang();
  const links = [
    { id: 'home', label: t.nav.home },
    { id: 'tours', label: t.nav.tours },
    { id: 'precos', label: t.nav.prices },
    { id: 'ingressos', label: t.nav.tickets },
    { id: 'sobre', label: t.nav.about },
    { id: 'contato', label: t.nav.contact },
  ];
  return (
    <header className="nav">
      <div className="container nav-inner">
        <Logo onClick={() => go('home')} />
        <nav className="nav-links" aria-label="Primary">
          {links.map(l => (
            <a key={l.id}
               className={'nav-link' + ((page === l.id || (l.id === 'tours' && page === 'tour')) ? ' active' : '')}
               onClick={() => go(l.id)}>
              {l.label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <LangSwitch />
          <a className="btn btn-accent" href="https://wa.me/971552427448" target="_blank" rel="noopener">
            {t.nav.wa} <ArrowI />
          </a>
        </div>
      </div>
    </header>
  );
};

// Footer
const Footer = ({ go }) => {
  const { t } = useLang();
  return (
    <footer style={{
      background: 'var(--ink)',
      color: 'var(--paper)',
      padding: 'calc(96px * var(--space)) 0 calc(40px * var(--space))',
      marginTop: 'calc(40px * var(--space))',
    }}>
      <div className="container">
        <div className="footer-grid">
          <div>
            <img src="img/logo-gold.png" alt="BRA Tours" style={{ width: 140, marginBottom: 32, opacity: 0.95 }} />
            <div style={{ fontFamily: 'var(--principal)', fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05, fontWeight: 400, letterSpacing: '0.01em', maxWidth: 520, textTransform: 'uppercase' }}>
              {t.footer.taglineA}<br />
              <span style={{ fontFamily: 'var(--destaque)', fontStyle: 'italic', color: 'var(--accent-2)', textTransform: 'none' }}>{t.footer.taglineB}</span><br />
              {t.footer.taglineC}
            </div>
            <div style={{ marginTop: 36, opacity: 0.7, maxWidth: 380, lineHeight: 1.6, fontSize: 14 }}>
              {t.footer.blurb}
            </div>
          </div>
          <FooterCol title={t.footer.nav} items={[
            { label: t.nav.home, onClick: () => go('home') },
            { label: t.nav.tours, onClick: () => go('tours') },
            { label: t.nav.prices, onClick: () => go('precos') },
            { label: t.nav.tickets, onClick: () => go('ingressos') },
            { label: t.nav.about, onClick: () => go('sobre') },
          ]} />
          <FooterCol title={t.footer.types} items={[
            { label: localizedTour(TOURS.find(x=>x.id==='city-tour-dubai'), t.code).name, onClick: () => go('tour', 'city-tour-dubai') },
            { label: localizedTour(TOURS.find(x=>x.id==='city-tour-abu-dhabi'), t.code).name, onClick: () => go('tour', 'city-tour-abu-dhabi') },
            { label: localizedTour(TOURS.find(x=>x.id==='safari-classico'), t.code).name, onClick: () => go('tour', 'safari-classico') },
            { label: localizedTour(TOURS.find(x=>x.id==='helicoptero'), t.code).name, onClick: () => go('tour', 'helicoptero') },
            { label: localizedTour(TOURS.find(x=>x.id==='yacht'), t.code).name, onClick: () => go('tour', 'yacht') },
          ]} />
          <FooterCol title={t.footer.contact} items={[
            { label: 'WhatsApp +971 55 242 7448', onClick: () => window.open('https://wa.me/971552427448','_blank') },
            { label: 'reservation@bratoursdubai.com', onClick: () => window.location.href = 'mailto:reservation@bratoursdubai.com' },
            { label: '@marianaguiadubai', onClick: () => window.open('https://instagram.com/marianaguiadubai','_blank') },
          ]} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 28, fontSize: 12, opacity: 0.55, flexWrap: 'wrap', gap: 12 }}>
          <span className="eyebrow" style={{ color: 'inherit' }}>{t.footer.copyright}</span>
          <span className="eyebrow" style={{ color: 'inherit' }}>{t.footer.legal}</span>
        </div>
      </div>
    </footer>
  );
};

const FooterCol = ({ title, items }) => (
  <div>
    <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 20 }}>{title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
      {items.map((i, idx) => (
        <li key={idx} style={{ fontSize: 14, opacity: 0.85, cursor: 'pointer' }} onClick={i.onClick}>{i.label}</li>
      ))}
    </ul>
  </div>
);

// Tour card — tall portrait card
const TourCard = ({ tour, onOpen, layout = 'tall' }) => {
  const { lang, t: tt } = useLang();
  const tour_ = localizedTour(tour, lang);
  if (layout === 'wide') {
    return (
      <div className="card tour-card-wide" onClick={() => onOpen(tour.id)} style={{ cursor: 'pointer' }}>
        <Img src={tour.image} label={tour_.name} style={{ height: '100%' }} />
        <div style={{ padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div className="eyebrow">{tour_.region} · {tour_.duration}</div>
            <h3 className="display" style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', margin: '14px 0 14px' }}>{tour_.name}</h3>
            <p style={{ color: 'var(--ink-2)', lineHeight: 1.6, fontSize: 16, margin: 0, maxWidth: 520 }}>{tour_.summary}</p>
          </div>
          <div style={{ display: 'flex', gap: 24, marginTop: 28, alignItems: 'flex-end', flexWrap: 'wrap' }}>
            <Stat label={tt.tour.duration} value={tour_.duration} />
            <Stat label={tt.tour.group} value={tour_.group} />
            {tour.price > 0 && <Stat label={tt.common.from} value={`US$ ${tour.price}`} />}
            <div style={{ flex: 1 }} />
            <a className="btn btn-ghost" onClick={(e) => { e.stopPropagation(); onOpen(tour.id); }}>{tt.common.viewDetails} <ArrowI /></a>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="card" onClick={() => onOpen(tour.id)} style={{ cursor: 'pointer' }}>
      <Img src={tour.image} label={tour_.name} ratio="4 / 5" />
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
        <div className="eyebrow">{tour_.region} · {tour_.duration}</div>
        <h3 className="display" style={{ fontSize: 26, margin: 0 }}>{tour_.name}</h3>
        <p style={{ color: 'var(--ink-2)', lineHeight: 1.55, fontSize: 14, margin: 0, flex: 1 }}>{tour_.summary}</p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 14, borderTop: '1px solid var(--line)', gap: 8 }}>
          {tour.price > 0
            ? <span style={{ fontFamily: 'var(--serif)', fontSize: 18 }}>{tt.common.fromShort} <em style={{ color: 'var(--accent)' }}>US$ {tour.price}</em></span>
            : <span style={{ fontFamily: 'var(--serif)', fontSize: 18, fontStyle: 'italic', color: 'var(--ink-2)' }}>{tt.common.consultPrice}</span>}
          <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>{tour_.difficulty}</span>
        </div>
      </div>
    </div>
  );
};

const Stat = ({ label, value }) => (
  <div>
    <div className="eyebrow" style={{ marginBottom: 4 }}>{label}</div>
    <div style={{ fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 500 }}>{value}</div>
  </div>
);

// Marquee strip
const Marquee = ({ items }) => {
  const dup = [...items, ...items];
  return (
    <div style={{ overflow: 'hidden', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '24px 0', background: 'var(--paper)' }}>
      <div className="marquee">
        {dup.map((it, i) => (
          <span key={i} style={{ fontFamily: 'var(--serif)', fontSize: 28, fontStyle: 'italic', color: 'var(--ink-2)', display: 'inline-flex', alignItems: 'center', gap: 64 }}>
            {it}
            <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--accent)', borderRadius: '50%' }}></span>
          </span>
        ))}
      </div>
    </div>
  );
};

// Section heading
const SectionHead = ({ eyebrow, title, action }) => (
  <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, marginBottom: 56, flexWrap: 'wrap' }}>
    <div>
      {eyebrow && <div className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</div>}
      <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', margin: 0, maxWidth: 800 }}>{title}</h2>
    </div>
    {action}
  </div>
);

// Price table block
const PriceTable = ({ table }) => (
  <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
    <div style={{ padding: '24px 28px 16px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
      <h3 className="display" style={{ margin: 0, fontSize: 26 }}>{table.title}</h3>
      {table.note && <span className="eyebrow" style={{ color: 'var(--ink-3)' }}>{table.note}</span>}
    </div>
    <div style={{ overflowX: 'auto' }}>
      <table className="price-tbl">
        <thead>
          <tr>{table.cols.map((c, i) => <th key={i}>{c}</th>)}</tr>
        </thead>
        <tbody>
          {table.rows.map((row, i) => (
            <tr key={i}>{row.map((c, j) => <td key={j} style={ j === 0 ? { color: 'var(--ink)' } : { color: 'var(--ink-2)' }}>{c}</td>)}</tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

Object.assign(window, {
  ArrowI, PlusI, MinusI, Img, Logo, LangSwitch, Nav, Footer, FooterCol,
  TourCard, Stat, Marquee, SectionHead, PriceTable,
});