// ─── Icons (inline, matching main site pattern) ───
const Icon = ({ d, size = 20, fill = "none", stroke = "currentColor", sw = 1.5, children, vb = "0 0 24 24", style }) => (
  <svg width={size} height={size} viewBox={vb} fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden>
    {d ? <path d={d} /> : children}
  </svg>
);
const IArrow = (p) => <Icon {...p} d="M5 12h14M13 6l6 6-6 6" />;

// ─── Category config ───
const CATEGORIES = {
  ritual:         { label: "RITUAL",         dot: "#FFDE03" },
  "supply-chain": { label: "SUPPLY CHAIN",   dot: "#E8A200" },
  "protocol-intel": { label: "PROTOCOL INTEL", dot: "#A8473B" },
  bangkok:        { label: "BANGKOK",         dot: "#4F9D6B" },
  "the-kit":      { label: "THE KIT",         dot: "#FAF8F3", border: true },
  "long-reads":   { label: "LONG READS",      dot: "#666666" },
};

function getCategoryMeta(cat) {
  return CATEGORIES[cat] || { label: cat.toUpperCase(), dot: "#666" };
}

// ─── Category Pill ───
function CategoryPill({ category, small }) {
  const meta = getCategoryMeta(category);
  return (
    <span className="pill" style={small ? { fontSize: 10, padding: "4px 10px" } : undefined}>
      <span className="pill-dot" style={{
        background: meta.dot,
        ...(meta.border ? { border: "1px solid #E5E5E0" } : {})
      }} />
      {meta.label}
    </span>
  );
}

// ─── Date formatter ───
function formatDate(iso) {
  const d = new Date(iso + "T00:00:00");
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
}

// ─── Nav ───
function BlogNav() {
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="/" className="logo">
          <img src="/assets/lockup-horizontal-yellow.png" alt="vialprep" className="logo-mark-img" />
        </a>
        <nav className="nav-links">
          <a href="/#welcome-kit">Prep kit</a>
          <a href="/#monthly">Monthly refill</a>
          <a href="/#how">How it works</a>
          <a href="/#pricing">Pricing</a>
          <a href="/blog/" className="active">The Long Game</a>
        </nav>
        <a className="btn btn-accent btn-sm" href="/waitlist/" onClick={() => gtag('event', 'waitlist_click', { event_category: 'conversion', link_location: 'blog_nav' })}>
          Join the waitlist <IArrow size={14} />
        </a>
      </div>
    </header>
  );
}

// ─── Footer ───
function BlogFooter() {
  return (
    <footer style={{ background: "var(--night)", color: "#F4F1EA", padding: "72px 0 32px", borderTop: "1px solid rgba(255,255,255,0.08)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 32, marginBottom: 56 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <img src="/assets/lockup-horizontal-yellow.png" alt="vialprep" style={{ height: 36, width: "auto" }} />
            <p style={{ color: "var(--ink-4)", fontSize: 14, maxWidth: 320, margin: 0 }}>You run the protocol. We handle the rest.</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.16em", textTransform: "uppercase" }}>Navigate</div>
            <a href="/waitlist/" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>Join the waitlist</a>
            <a href="/#faq" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>FAQ</a>
            <a href="/blog/" style={{ color: "var(--neon)", textDecoration: "none", fontSize: 14 }}>The Long Game</a>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.16em", textTransform: "uppercase" }}>Connect</div>
            <a href="https://line.me/R/ti/p/@038mfjdq" target="_blank" rel="noopener" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>LINE @vialprep</a>
            <a href="https://instagram.com/vialpreppers" target="_blank" rel="noopener" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>Instagram @vialpreppers</a>
            <a href="https://x.com/vialprep" target="_blank" rel="noopener" style={{ color: "#F4F1EA", textDecoration: "none", fontSize: 14 }}>X @vialprep</a>
          </div>
        </div>

        <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 24, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
          <div style={{ color: "var(--ink-4)", fontSize: 12, maxWidth: 720 }}>
            vialprep is an injection supply service headquartered in Singapore, launching in Bangkok. We do not sell, manufacture, prescribe, or distribute peptides, hormones, or controlled substances. Nothing on this page is medical advice. Talk to a licensed clinician before starting a protocol.
          </div>
          <div style={{ display: "flex", gap: 16, fontSize: 12, color: "var(--ink-4)" }}>
            <a href="/privacy/" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="/terms/" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── Post Card ───
function PostCard({ post }) {
  return (
    <a href={`/blog/${post.slug}/`} className="card" style={{ display: "block", color: "inherit" }}>
      {post.heroImage && (
        <img
          src={post.heroImage}
          alt={post.heroAlt || post.title}
          className="post-card-img"
          loading="lazy"
        />
      )}
      {!post.heroImage && (
        <div className="post-card-img" style={{ background: "var(--g-after)" }} />
      )}
      <div className="post-card-body">
        <h3 className="post-card-title">{post.title}</h3>
        <p className="post-card-excerpt">{post.deck}</p>
        <div className="post-card-footer">
          <span className="post-card-date">{formatDate(post.date)}</span>
          <span className="post-card-reading">{post.readingTime} min read</span>
        </div>
      </div>
    </a>
  );
}

// ─── Newsletter CTA ───
function NewsletterCTA() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email) return;
    gtag("event", "newsletter_signup", { event_category: "conversion", link_location: "blog" });
    setSent(true);
  };

  return (
    <section className="newsletter-band">
      <div className="container">
        <h3>Get one piece per week.</h3>
        <p className="sub">No spam, no hype. Just protocol intel.</p>
        {!sent ? (
          <form className="newsletter-form" onSubmit={handleSubmit}>
            <input
              type="email"
              className="field"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <button type="submit" className="btn btn-accent">Subscribe</button>
          </form>
        ) : (
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--ink)" }}>You're in. First piece lands next week.</p>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { BlogNav, BlogFooter, PostCard, CategoryPill, NewsletterCTA, CATEGORIES, getCategoryMeta, formatDate, IArrow });