// Destinations page

function DestinationsIntro() {
  const bp = useBP();
  return (
    <section style={{ padding: bpv(bp, '52px 20px 32px', '64px 36px 44px', '80px 56px 48px'), background: TNF.cream }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <SectionEyebrow>Where we plan</SectionEyebrow>
        <H2 style={{ fontWeight: 700 }}>Hand-picked destinations.<br/>Every kind of journey.</H2>
        <p style={{ fontSize: 16, color: TNF.inkSoft, marginTop: 24, lineHeight: 1.7, maxWidth: 720, margin: '24px auto 0' }}>
          From a long weekend in Oman to a three-week tour of the Indian subcontinent — here are the destinations we plan most often. Don’t see what you’re looking for? Just ask — we can plan trips to almost anywhere.
        </p>
      </div>
    </section>
  );
}

// Three groups, mirroring the home page. Each picks its destinations from the shared data.
const DEST_GROUPS = [
  {
    id: 'asia',
    name: 'Asia',
    accent: 'green',
    blurb: 'Tropical beaches in Bali, city stops in Singapore, food trails in Hanoi — the continent we send the most honeymooners to.',
    match: d => d.region === 'Southeast Asia' && d.id !== 'srilanka',
  },
  {
    id: 'ind',
    name: 'Indian Subcontinent',
    accent: 'turq',
    blurb: 'The places we know best — backwaters, deserts, snow-line lakes and island reefs across India, Sri Lanka and the Maldives.',
    match: d => d.region === 'India' || d.region === 'Indian Ocean' || d.id === 'srilanka',
  },
  {
    id: 'me',
    name: 'Middle East',
    accent: 'green',
    blurb: 'Long weekends in the Gulf, fjords and wadis in Oman, desert escapes near home — short flights from home, worlds away in feel.',
    match: d => d.region === 'Middle East',
  },
];

function DestinationCard({ d }) {
  return (
    <div className="tnf-card-hover" style={{
      background: '#fff', borderRadius: 18, overflow: 'hidden',
      border: `1px solid ${TNF.lineSoft}`, cursor: 'pointer',
    }} onClick={() => window.__openQuote && window.__openQuote(d.name)}>
      <div style={{ height: 240, position: 'relative' }}>
        <Img photo={d.photo} style={{ width: '100%', height: '100%' }}/>
        <div style={{ position: 'absolute', top: 14, left: 14, background: '#fff', padding: '6px 12px', borderRadius: 999, fontSize: 11, color: TNF.blueDk, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{d.tag}</div>
      </div>
      <div style={{ padding: '22px 24px 24px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <h3 style={{ fontFamily: 'var(--tnf-display)', fontSize: 26, color: TNF.blueDk, margin: 0, fontWeight: 500, letterSpacing: '-0.01em' }}>{d.name}</h3>
          <span style={{ fontSize: 12, color: TNF.inkSoft }}>from {d.from}</span>
        </div>
        <p style={{ fontSize: 14, color: TNF.inkSoft, marginTop: 6, marginBottom: 18, lineHeight: 1.55 }}>{d.blurb}</p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px dashed ${TNF.line}`, paddingTop: 14 }}>
          <span style={{ fontSize: 12, color: TNF.green, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Get a quote</span>
          <Icon.arrow width={14} height={14} style={{ color: TNF.blue }}/>
        </div>
      </div>
    </div>
  );
}

// "Looking for something else?" CTA — appended to each region grid.
// Links to the Contact page enquiry section ("Get in touch / Tell us about your dream").
function RegionEnquiryCard({ accent, accentDk, accentFg }) {
  return (
    <a href="contact.html#enquiry" className="tnf-card-hover" style={{
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      background: `linear-gradient(135deg, ${accent}1f, ${accent}08)`,
      border: `1.5px dashed ${accent}`, borderRadius: 18,
      padding: '28px 26px', textDecoration: 'none', color: 'inherit', minHeight: 240,
    }}>
      <div style={{
        width: 48, height: 48, borderRadius: 12, background: accent, color: accentFg,
        display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18,
      }}>
        <Icon.mail width={22} height={22}/>
      </div>
      <h3 style={{ fontFamily: 'var(--tnf-display)', fontSize: 24, color: TNF.blueDk, margin: 0, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
        Looking for something else?
      </h3>
      <p style={{ fontSize: 14, color: TNF.inkSoft, marginTop: 8, marginBottom: 18, lineHeight: 1.55 }}>
        Tell us about it — we plan trips just about anywhere.
      </p>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: accentDk, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
        Tell us about your dream <Icon.arrow width={14} height={14}/>
      </span>
    </a>
  );
}

function DestinationsByRegion() {
  const bp = useBP();
  const [q, setQ] = React.useState('');
  const query = q.trim().toLowerCase();
  const matchesQuery = d => !query || `${d.name} ${d.region} ${d.tag} ${d.blurb}`.toLowerCase().includes(query);
  const totalMatches = DESTINATIONS.filter(matchesQuery).length;

  return (
    <section style={{ padding: bpv(bp, '12px 20px 56px', '16px 36px 72px', '16px 56px 80px'), background: TNF.cream }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        {/* Search bar */}
        <div style={{
          background: '#fff', borderRadius: 18, padding: '16px 20px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.04)', border: `1px solid ${TNF.lineSoft}`,
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16,
        }}>
          <Icon.search width={18} height={18} style={{ color: TNF.inkSoft, flex: '0 0 auto' }}/>
          <input value={q} onChange={e => setQ(InputGuard.search(e.target.value))} maxLength={64} placeholder="Search destinations — try “beach”, “Oman”, “cultural”…"
            style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, background: 'transparent', fontFamily: 'inherit', color: TNF.ink }}/>
          {q && (
            <button onClick={() => setQ('')} aria-label="Clear search" style={{
              border: 'none', background: TNF.cream, color: TNF.inkSoft, cursor: 'pointer',
              borderRadius: 999, width: 28, height: 28, display: 'flex', alignItems: 'center',
              justifyContent: 'center', fontFamily: 'inherit', fontSize: 15, flex: '0 0 auto',
            }}>×</button>
          )}
        </div>
        {query && (
          <div style={{ fontSize: 13, color: TNF.inkSoft, marginBottom: 28 }}>
            Showing <strong style={{ color: TNF.ink }}>{totalMatches}</strong> of {DESTINATIONS.length} destinations
          </div>
        )}

        <div style={{ display: 'flex', flexDirection: 'column', gap: 72 }}>
          {DEST_GROUPS.map(g => {
            const items     = DESTINATIONS.filter(d => g.match(d) && matchesQuery(d));
            const accent    = g.accent === 'green' ? TNF.green   : TNF.turq;
            const accentDk  = g.accent === 'green' ? TNF.greenDk : TNF.turqDk;
            if (items.length === 0) return null;
            return (
              <div key={g.id}>
                {/* Section header */}
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20, marginBottom: 32, flexWrap: 'wrap' }}>
                  <div style={{ width: 6, alignSelf: 'stretch', minHeight: 64, borderRadius: 999, background: accent, flex: '0 0 auto' }}></div>
                  <div style={{ flex: 1, minWidth: 280 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
                      <h2 style={{ fontFamily: 'var(--tnf-display)', fontSize: bpv(bp, 28, 34, 38), color: TNF.blueDk, margin: 0, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>{g.name}</h2>
                      <span style={{ fontSize: 12, color: accentDk, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{items.length} destination{items.length === 1 ? '' : 's'}</span>
                    </div>
                    <p style={{ fontSize: 15, color: TNF.inkSoft, marginTop: 12, marginBottom: 0, lineHeight: 1.6, maxWidth: 760 }}>{g.blurb}</p>
                  </div>
                </div>
                {/* Destination grid */}
                <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'), gap: bpv(bp, 18, 20, 24) }}>
                  {items.map(d => <DestinationCard key={d.id} d={d}/>)}
                  <RegionEnquiryCard accent={accent} accentDk={accentDk} accentFg={g.accent === 'green' ? TNF.blueXdk : '#fff'}/>
                </div>
              </div>
            );
          })}

          {totalMatches === 0 && (
            <div style={{ background: '#fff', borderRadius: 16, padding: 80, textAlign: 'center', color: TNF.inkSoft, border: `1px solid ${TNF.lineSoft}` }}>
              <Icon.search width={32} height={32} style={{ color: TNF.line, margin: '0 auto 16px' }}/>
              <div style={{ fontSize: 18, fontWeight: 600, color: TNF.ink }}>No destinations match “{q}”.</div>
              <div style={{ fontSize: 14, marginTop: 8 }}>
                Try a different search — or
                <a onClick={() => window.__openQuote && window.__openQuote()} style={{ color: TNF.blueDk, fontWeight: 600, cursor: 'pointer', marginLeft: 4 }}>tell us where you want to go</a>.
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function DestinationsRequestStrip() {
  const bp = useBP();
  const mob = bp === 'mobile';
  return (
    <section style={{ padding: secPad(bp, 80, 56), background: '#fff' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        background: TNF.cream, borderRadius: 24, padding: bpv(bp, '32px 24px', '40px 40px', '48px 56px'),
        display: 'grid', gridTemplateColumns: bpv(bp, '1fr', '1.4fr 1fr', '1.4fr 1fr'), gap: bpv(bp, 24, 40, 60), alignItems: 'center',
        border: `1px solid ${TNF.lineSoft}`,
      }}>
        <div>
          <SectionEyebrow>Don’t see your dream trip?</SectionEyebrow>
          <h2 style={{ fontFamily: 'var(--tnf-display)', fontSize: mob ? 30 : 40, color: TNF.blueDk, lineHeight: 1.1, fontWeight: 500, margin: 0, letterSpacing: '-0.02em' }}>
            We plan trips to anywhere — even places not on this list.
          </h2>
          <p style={{ fontSize: 15, color: TNF.inkSoft, marginTop: 16, lineHeight: 1.6, maxWidth: 540 }}>
            Iceland, Japan, Patagonia, a quiet corner of Sri Lanka? Tell us where, we’ll figure out the how.
          </p>
        </div>
        <div style={{ textAlign: mob ? 'left' : 'right' }}>
          <button onClick={() => window.__openQuote && window.__openQuote()} style={{ ...btn(TNF.blueDk), minHeight: 48, width: mob ? '100%' : 'auto', justifyContent: 'center' }}>
            Request a custom trip <Icon.arrow width={16} height={16}/>
          </button>
        </div>
      </div>
    </section>
  );
}

function DestinationsPage() {
  return (
    <SiteShell active="Destinations" overHero={true}>
      <PageHero
        eyebrow="Destinations"
        title={<>Pick a place.<br/>We’ll plan the rest.</>}
        lede="Across the Middle East, India and Asia — every season, every kind of trip. The list below is where we go most often, but we plan trips just about anywhere."
        photo="destHeader"
        height={520}
      />
      <DestinationsIntro/>
      <DestinationsByRegion/>
    </SiteShell>
  );
}
window.DestinationsPage = DestinationsPage;