// Blog / Travel stories page

function readHash() {
  // Restrict to slug characters (allow-list) and guard decode against malformed input.
  const m = (window.location.hash || '').match(/^#read-([A-Za-z0-9_-]{1,80})$/);
  if (!m) return null;
  try { return decodeURIComponent(m[1]); } catch (e) { return null; }
}

function FeaturedPost() {
  const bp = useBP();
  const mob = bp === 'mobile';
  const p = BLOG_POSTS.find(x => x.featured) || BLOG_POSTS[0];
  return (
    <section style={{ padding: bpv(bp, '52px 20px 32px', '64px 36px 44px', '80px 56px 48px'), background: TNF.cream }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <SectionEyebrow>Featured story</SectionEyebrow>
        <a href={'#read-' + p.id} className="tnf-card-hover" style={{
          textDecoration: 'none', color: 'inherit',
          marginTop: 16, display: 'grid', gridTemplateColumns: bpv(bp, '1fr', '1.1fr 1fr', '1.2fr 1fr'), gap: bpv(bp, 0, 40, 56),
          background: '#fff', borderRadius: 22, overflow: 'hidden',
          border: `1px solid ${TNF.lineSoft}`,
        }}>
          <div style={{ minHeight: bpv(bp, 220, 360, 460) }}>
            <Img photo={p.photo} style={{ width: '100%', height: '100%' }}/>
          </div>
          <div style={{ padding: bpv(bp, '28px 22px 32px', '40px 40px 40px 0', '56px 56px 56px 0'), display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: TNF.inkSoft, marginBottom: 16 }}>
              <span>{p.date}</span>
              <span>·</span>
              <span>{p.read}</span>
            </div>
            <h2 style={{ fontFamily: 'var(--tnf-display)', fontSize: bpv(bp, 28, 38, 48), lineHeight: 1.1, color: TNF.blueDk, margin: 0, fontWeight: 400, letterSpacing: '-0.02em', textWrap: 'balance' }}>
              {p.title}
            </h2>
            <p style={{ fontSize: mob ? 16 : 17, color: TNF.inkSoft, marginTop: 20, lineHeight: 1.65, maxWidth: 520 }}>
              {p.excerpt}
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 32 }}>
              <Avatar name={p.author} size={40}/>
              <div>
                <div style={{ fontWeight: 600, color: TNF.ink, fontSize: 14 }}>{p.author}</div>
                <div style={{ fontSize: 12, color: TNF.inkSoft }}>Travel consultant</div>
              </div>
              <div style={{ marginLeft: 'auto' }}>
                <span style={{ ...btn(TNF.blueDk, { small: true }) }}>Read story <Icon.arrow width={14} height={14}/></span>
              </div>
            </div>
          </div>
        </a>
      </div>
    </section>
  );
}

function BlogGrid() {
  const bp = useBP();
  const posts = BLOG_POSTS.filter(p => !p.featured);

  return (
    <section style={{ padding: bpv(bp, '32px 20px 56px', '44px 36px 72px', '48px 56px 80px'), background: TNF.cream }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ marginBottom: 32 }}>
          <SectionEyebrow>The journal</SectionEyebrow>
          <H2 style={{ fontWeight: 700 }}>Notes from the road.</H2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'), gap: bpv(bp, 20, 24, 28) }}>
          {posts.map(p => (
            <a key={p.id} href={'#read-' + p.id} className="tnf-card-hover" style={{
              textDecoration: 'none', color: 'inherit',
              borderRadius: 18, overflow: 'hidden', background: '#fff',
              border: `1px solid ${TNF.lineSoft}`,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ height: 240, position: 'relative' }}>
                <Img photo={p.photo} style={{ width: '100%', height: '100%' }}/>
                <div style={{ position: 'absolute', top: 14, left: 14, background: 'rgba(255,255,255,0.92)', color: TNF.blueDk, padding: '5px 11px', borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{p.cat}</div>
              </div>
              <div style={{ padding: '24px 24px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 style={{ fontFamily: 'var(--tnf-display)', fontSize: 24, color: TNF.blueDk, margin: 0, fontWeight: 500, lineHeight: 1.2, letterSpacing: '-0.01em' }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: TNF.inkSoft, marginTop: 12, lineHeight: 1.55, flex: 1 }}>{p.excerpt}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 20, paddingTop: 16, borderTop: `1px solid ${TNF.lineSoft}` }}>
                  <Avatar name={p.author} size={28}/>
                  <div style={{ fontSize: 13, color: TNF.ink, fontWeight: 500 }}>{p.author}</div>
                  <div style={{ marginLeft: 'auto', fontSize: 12, color: TNF.inkSoft }}>{p.read}</div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Full article reading view ===
function ArticleView({ post }) {
  const bp = useBP();
  const mob = bp === 'mobile';
  const body = (window.BLOG_BODIES && BLOG_BODIES[post.id]) || [];
  const related = BLOG_POSTS.filter(p => p.id !== post.id).slice(0, 3);
  const para = { fontSize: mob ? 17 : 18.5, lineHeight: 1.78, color: TNF.ink, margin: '0 0 26px', textWrap: 'pretty' };
  const sub = { fontFamily: 'var(--tnf-display)', fontSize: mob ? 25 : 30, lineHeight: 1.2, color: TNF.blueDk, fontWeight: 500, letterSpacing: '-0.015em', margin: '40px 0 18px' };

  return (
    <article>
      <PageHero eyebrow={post.cat} title={post.title} photo={post.photo} height={540}/>

      <div style={{ background: TNF.cream, padding: '48px 24px 0' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: TNF.inkSoft, fontSize: 14, fontWeight: 600, letterSpacing: '0.02em' }}>
            <span style={{ fontSize: 17, lineHeight: 1 }}>←</span> Back to the journal
          </a>

          <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '32px 0 28px', paddingBottom: 28, borderBottom: `1px solid ${TNF.line}` }}>
            <Avatar name={post.author} size={48}/>
            <div>
              <div style={{ fontWeight: 600, color: TNF.ink, fontSize: 15 }}>{post.author}</div>
              <div style={{ fontSize: 13, color: TNF.inkSoft }}>Travel consultant · Trips N Flys</div>
            </div>
            <div style={{ marginLeft: 'auto', textAlign: 'right', fontSize: 13, color: TNF.inkSoft }}>
              <div>{post.date}</div>
              <div>{post.read}</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ background: TNF.cream, padding: '0 24px 16px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {body.length === 0 && (
            <p style={para}>{post.excerpt}</p>
          )}
          {body.map((b, i) => (
            typeof b === 'string'
              ? <p key={i} style={para}>{b}</p>
              : <h2 key={i} style={sub}>{b.h}</h2>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{ background: TNF.cream, padding: '40px 24px 80px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <div style={{ background: TNF.blueXdk, borderRadius: 22, padding: mob ? '28px 24px' : '44px 48px', color: '#fff', display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 24, justifyContent: 'space-between' }}>
            <div style={{ maxWidth: 420 }}>
              <div style={{ fontFamily: 'var(--tnf-display)', fontSize: mob ? 25 : 30, lineHeight: 1.15, fontWeight: 500, letterSpacing: '-0.01em' }}>Planning a trip like this?</div>
              <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.72)', marginTop: 10, lineHeight: 1.6, marginBottom: 0 }}>Tell us where you’re headed — {post.author.split(' ')[0]} or one of the team will map it out with you.</p>
            </div>
            <button style={{ ...btn(TNF.green, { fg: TNF.blueXdk }), minHeight: 48, width: mob ? '100%' : 'auto', justifyContent: 'center' }} onClick={() => window.__openQuote && window.__openQuote()}>
              Plan my trip <Icon.arrow width={15} height={15}/>
            </button>
          </div>
        </div>
      </div>

      {/* Related */}
      <section style={{ background: '#fff', padding: bpv(bp, '52px 20px 56px', '64px 36px 72px', '72px 56px 88px'), borderTop: `1px solid ${TNF.lineSoft}` }}>
        <div style={{ maxWidth: 1440, margin: '0 auto' }}>
          <SectionEyebrow>Keep reading</SectionEyebrow>
          <H2 style={{ fontSize: 40 }}>More from the journal.</H2>
          <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'), gap: bpv(bp, 20, 24, 28), marginTop: 36 }}>
            {related.map(p => (
              <a key={p.id} href={'#read-' + p.id} className="tnf-card-hover" style={{
                textDecoration: 'none', color: 'inherit',
                borderRadius: 18, overflow: 'hidden', background: '#fff',
                border: `1px solid ${TNF.lineSoft}`, display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ height: 200 }}>
                  <Img photo={p.photo} style={{ width: '100%', height: '100%' }}/>
                </div>
                <div style={{ padding: '22px 22px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: TNF.greenDk, marginBottom: 10 }}>{p.cat}</div>
                  <h3 style={{ fontFamily: 'var(--tnf-display)', fontSize: 22, color: TNF.blueDk, margin: 0, fontWeight: 500, lineHeight: 1.2, letterSpacing: '-0.01em' }}>{p.title}</h3>
                  <div style={{ marginTop: 'auto', paddingTop: 18, fontSize: 12, color: TNF.inkSoft }}>{p.author} · {p.read}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </article>
  );
}

function BlogPage() {
  const [openId, setOpenId] = React.useState(readHash);

  React.useEffect(() => {
    const on = () => setOpenId(readHash());
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);

  React.useEffect(() => { if (openId) window.scrollTo(0, 0); }, [openId]);

  const post = openId ? BLOG_POSTS.find(p => p.id === openId) : null;

  return (
    <SiteShell active="Blog" overHero={true}>
      {post ? (
        <ArticleView post={post}/>
      ) : (
        <React.Fragment>
          <PageHero
            eyebrow="Travel journal"
            title={<>Stories, guides and<br/>notes from the road.</>}
            lede="Itinerary ideas, visa updates, packing tips, and dispatches from our own travels — written by the team that plans your trips."
            photo="blogHeader"
            height={520}
          />
          <FeaturedPost/>
          <BlogGrid/>
        </React.Fragment>
      )}
    </SiteShell>
  );
}
window.BlogPage = BlogPage;