// Blog, index + post
const Blog = ({ nav }) => {
  const D = window.__DSC_DATA;
  const [cat, setCat] = React.useState('All');
  const cats = ['All', ...new Set(D.posts.map(p => p.category))];
  const filtered = cat === 'All' ? D.posts : D.posts.filter(p => p.category === cat);
  const featured = D.posts.find(p => p.featured);
  const rest = filtered.filter(p => !p.featured || cat !== 'All');

  return (
    <div className="page">
      <section style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '56px 32px 32px' }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>The Journal · Independent reporting on the drone show industry</div>
          <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 'clamp(44px, 6vw, 72px)', margin: 0, letterSpacing: '-0.03em', fontWeight: 400, maxWidth: 900 }}>
            Industry reports, <em style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>buyer's guides</em>, and interviews.
          </h1>
        </div>
      </section>

      {/* Featured */}
      {featured && cat === 'All' && (
        <section style={{ borderBottom: '1px solid var(--line)' }}>
          <div className="container" style={{ padding: '40px 32px' }}>
            <div className="card hover-lift" onClick={() => nav({ page: 'blog-post', id: featured.id })} style={{ cursor: 'pointer', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0 }}>
              <DotFormation variant="skyline" color={featured.hex} density={100} />
              <div style={{ padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>Featured · {featured.category} · {featured.readTime}</div>
                <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 40, margin: '0 0 16px', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{featured.title}</h2>
                <p style={{ margin: '0 0 20px', color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.55 }}>{featured.excerpt}</p>
                <div className="mono muted" style={{ fontSize: 12 }}>{featured.author} · {featured.date}</div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Filters & list */}
      <section>
        <div className="container" style={{ padding: '40px 32px 80px' }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32, borderBottom: '1px solid var(--line)', paddingBottom: 20 }}>
            {cats.map(c => (
              <button key={c} className={`chip ${cat === c ? 'solid' : ''}`} onClick={() => setCat(c)} style={{ cursor: 'pointer' }}>{c}</button>
            ))}
          </div>

          <div className="grid grid-3">
            {rest.map(p => (
              <article key={p.id} className="card hover-lift" onClick={() => nav({ page: 'blog-post', id: p.id })} style={{ cursor: 'pointer', overflow: 'hidden' }}>
                <DotFormation variant={['arc','ring','wave','triangle','star','grid','logo','heart','skyline'][D.posts.indexOf(p) % 9]} color={p.hex} density={70} />
                <div style={{ padding: 20 }}>
                  <div className="mono muted" style={{ fontSize: 11, marginBottom: 10, textTransform: 'uppercase' }}>{p.category} · {p.readTime}</div>
                  <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 20, margin: '0 0 10px', fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.2 }}>{p.title}</h3>
                  <p style={{ margin: '0 0 14px', color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.55 }}>{p.excerpt}</p>
                  <div className="mono muted" style={{ fontSize: 11 }}>{p.author} · {p.date}</div>
                </div>
              </article>
            ))}
          </div>

          {/* Newsletter */}
          <div style={{ marginTop: 64, padding: 40, background: 'var(--bg-2)', borderRadius: 4, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>The Weekly Flight Plan</div>
              <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 28, fontWeight: 400, margin: '0 0 8px', letterSpacing: '-0.02em' }}>Industry reporting, every Friday.</h3>
              <p className="muted" style={{ fontSize: 13, margin: 0 }}>Read by 14,200 operators, designers, and event producers.</p>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <input className="input" placeholder="your@email.com" style={{ flex: 1 }} />
              <button className="btn btn-primary">Subscribe</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const BlogPost = ({ nav, route }) => {
  const D = window.__DSC_DATA;
  const p = D.posts.find(x => x.id === route.id) || D.posts[0];

  return (
    <div className="page">
      <div className="container-narrow" style={{ padding: '48px 32px 32px' }}>
        <div className="mono muted" style={{ fontSize: 11, marginBottom: 16 }}>
          <a onClick={() => nav({ page: 'blog' })} style={{ cursor: 'pointer' }}>← Back to Journal</a>
        </div>
        <div className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 16 }}>{p.category} · {p.readTime} · {p.date}</div>
        <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 'clamp(36px, 5vw, 56px)', margin: '0 0 20px', letterSpacing: '-0.02em', fontWeight: 400, lineHeight: 1.05 }}>{p.title}</h1>
        <p style={{ fontSize: 19, color: 'var(--ink-2)', lineHeight: 1.5, margin: '0 0 32px' }}>{p.excerpt}</p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 32, borderBottom: '1px solid var(--line)' }}>
          <Avatar name={p.author} hex={p.hex} size={36} />
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{p.author} desk</div>
            <div className="mono muted" style={{ fontSize: 11 }}>DroneShowCompanies Editorial</div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
            <button className="btn btn-sm">Share</button>
            <button className="btn btn-sm">Save</button>
          </div>
        </div>
      </div>

      <div className="container-narrow" style={{ padding: '0 32px 40px' }}>
        <DotFormation variant="skyline" color={p.hex} density={100} size="wide" />
      </div>

      <article className="container-narrow" style={{ padding: '0 32px 80px', fontFamily: 'var(--ff-display)', fontSize: 18, lineHeight: 1.7, color: 'var(--ink-2)' }}>
        {p.body
          ? p.body.split(/\n\s*\n/).map((para, i) => (
              <p key={i} style={i === 0 ? { marginTop: 0 } : undefined}>{para}</p>
            ))
          : <p style={{ marginTop: 0, fontStyle: 'italic', color: 'var(--ink-3)' }}>Full article body not yet published for this post.</p>}
      </article>

      {/* Related */}
      <section style={{ borderTop: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '48px 32px' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>More from the Journal</div>
          <div className="grid grid-3">
            {D.posts.filter(x => x.id !== p.id).slice(0, 3).map(o => (
              <article key={o.id} className="card hover-lift" onClick={() => nav({ page: 'blog-post', id: o.id })} style={{ cursor: 'pointer', overflow: 'hidden' }}>
                <DotFormation variant={['wave','triangle','ring'][D.posts.indexOf(o) % 3]} color={o.hex} density={60} />
                <div style={{ padding: 20 }}>
                  <div className="mono muted" style={{ fontSize: 11, marginBottom: 8, textTransform: 'uppercase' }}>{o.category}</div>
                  <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 20, margin: '0 0 8px', fontWeight: 400, lineHeight: 1.2 }}>{o.title}</h3>
                  <div className="mono muted" style={{ fontSize: 11 }}>{o.readTime}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { Blog, BlogPost });