// Shared blog components — Nav, Footer, eyebrow, and helpers
const { useState: useStateBS, useEffect: useEffectBS, useRef: useRefBS } = React;

const BS = {
  cream: '#fafaf8',
  black: '#0f0f0f',
  green: '#3d6b4f',
  greenDark: '#2d5239',
  greenLight: '#e8f0eb',
  greenLighter: '#f1f6f2',
  gray: '#6b6b6b',
  grayLight: '#f0efed',
  border: '#e2e0db',
};

// ─── Wordmark ────────────────────────────────────────
function BlogWordmark() {
  return (
    <a href="index.html" style={{
      fontFamily: '"DM Serif Display", Georgia, serif',
      fontSize: 26, color: BS.black,
      letterSpacing: '-.01em', lineHeight: 1,
      textDecoration: 'none',
    }}>Keep<span style={{ color: BS.green }}>After</span></a>
  );
}

// ─── Nav ─────────────────────────────────────────────
function BlogNav({ active }) {
  const linkStyle = (isActive) => ({
    fontFamily: '"DM Sans"', fontSize: 14, fontWeight: isActive ? 600 : 500,
    color: isActive ? BS.green : BS.black, textDecoration: 'none',
    position: 'relative', paddingBottom: 2,
    borderBottom: isActive ? `1.5px solid ${BS.green}` : '1.5px solid transparent',
    transition: 'color .2s ease, border-color .2s ease',
  });
  return (
    <nav style={{
      maxWidth: 1240, margin: '0 auto',
      padding: '24px 32px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      position: 'relative', zIndex: 50,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <BlogWordmark />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 32 }} className="bn-links">
        <a href="index.html#how" style={linkStyle(false)}>How it works</a>
        <a href="index.html#science" style={linkStyle(false)}>Why it works</a>
        <a href="index.html#pricing" style={linkStyle(false)}>Pricing</a>
        <a href="blog.html" style={linkStyle(active === 'blog')}>Field notes</a>
        <a href="index.html#cta" style={{
          padding: '10px 18px',
          background: BS.black, color: BS.cream,
          fontFamily: '"DM Sans"', fontSize: 14, fontWeight: 600,
          borderRadius: 999, textDecoration: 'none',
          transition: 'transform .2s ease, background .2s ease',
        }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.background = BS.green; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.background = BS.black; }}
        >Join the beta</a>
      </div>
    </nav>
  );
}

// ─── Footer ──────────────────────────────────────────
function BlogFooter() {
  return (
    <footer style={{
      background: BS.cream, padding: '60px 32px 40px',
      borderTop: `1px solid ${BS.border}`,
      marginTop: 80,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        flexWrap: 'wrap', gap: 32,
      }}>
        <div style={{ maxWidth: 320 }}>
          <BlogWordmark />
          <div style={{
            marginTop: 14,
            fontFamily: '"DM Sans"', fontSize: 13, color: BS.gray, lineHeight: 1.55,
          }}>The maintenance app for women who stopped their GLP-1. Made by KeepAfter, Inc.</div>
        </div>
        <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
          <FCol title="Product" items={[
            {label:'How it works', href:'index.html#how'},
            {label:'Why it works', href:'index.html#science'},
            {label:'Pricing', href:'index.html#pricing'},
            {label:'Join the beta', href:'index.html#cta'},
          ]}/>
          <FCol title="Reading" items={[
            {label:'Field notes', href:'blog.html'},
            {label:'Newsletter', href:'#'},
            {label:'Research log', href:'#'},
          ]}/>
          <FCol title="Trust" items={[
            {label:'Privacy', href:'mailto:privacy@keepafter.app'},
            {label:'Medical disclaimer', href:'#'},
          ]}/>
        </div>
      </div>
      <div style={{
        maxWidth: 1240, margin: '40px auto 0', paddingTop: 24,
        borderTop: `1px solid ${BS.border}`,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        fontFamily: '"DM Sans"', fontSize: 12, color: BS.gray,
      }}>
        <div>© 2026 KeepAfter, Inc. All rights reserved.</div>
        <div>Not medical advice. Talk to your doctor before changing any treatment plan.</div>
      </div>
    </footer>
  );
}

function FCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
        color: BS.black, letterSpacing: '.08em', textTransform: 'uppercase',
        marginBottom: 14,
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <a key={i} href={it.href} style={{
            fontFamily: '"DM Sans"', fontSize: 13, color: BS.gray,
            textDecoration: 'none', transition: 'color .15s ease',
          }}
            onMouseEnter={e => e.currentTarget.style.color = BS.green}
            onMouseLeave={e => e.currentTarget.style.color = BS.gray}
          >{it.label}</a>
        ))}
      </div>
    </div>
  );
}

// ─── Eyebrow ─────────────────────────────────────────
function BlogEyebrow({ children, color = BS.green }) {
  return (
    <div style={{
      display: 'inline-block',
      fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
      color, letterSpacing: '.14em', textTransform: 'uppercase',
    }}>{children}</div>
  );
}

// ─── Reveal ───────────────────────────────────────────
// Pass-through wrapper. Content is always visible — entrance motion is
// optional and applied via a CSS keyframe class that only enhances; if the
// animation engine doesn't run, the content stays readable.
function Reveal({ children, delay = 0, as = 'div', style = {}, ...rest }) {
  const Tag = as;
  return (
    <Tag
      className="bs-reveal-in"
      style={{ animationDelay: `${delay}ms`, ...style }}
      {...rest}
    >{children}</Tag>
  );
}

// ─── Image placeholder ───────────────────────────────
// Wraps <image-slot> with editorial styling. Drop a file onto it and the
// placeholder swaps for the real photo (persisted across reloads).
function EditorialImage({
  id, ratio = '4 / 3', src = null,
  direction = 'Drop an image, or describe the shot',
  radius = 16, kicker = null,     // optional badge top-left
  style = {}, className = '',
}) {
  return (
    <div className={`ei-frame ${className}`} style={{
      position: 'relative',
      aspectRatio: ratio,
      borderRadius: radius,
      overflow: 'hidden',
      background: `linear-gradient(135deg, ${BS.greenLighter} 0%, ${BS.greenLight} 100%)`,
      border: `1px solid ${BS.border}`,
      ...style,
    }}>
      {/* Dotted pattern — only visible when slot is empty (image-slot covers it once filled) */}
      <div className="ei-pattern" style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(${BS.green}22 1px, transparent 1px)`,
        backgroundSize: '14px 14px',
        opacity: .6,
        pointerEvents: 'none',
      }} />

      {src ? (
        <img
          src={src}
          alt={direction}
          loading="lazy"
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', display: 'block', borderRadius: radius, zIndex: 2,
          }}
        />
      ) : (
        <image-slot
          id={id}
          shape="rect"
          placeholder={direction}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            color: BS.greenDark,
            borderRadius: radius,
          }}
        ></image-slot>
      )}

      {kicker && (
        <div className="ei-kicker" style={{
          position: 'absolute', top: 14, left: 14, zIndex: 3,
          padding: '6px 10px',
          background: BS.cream, color: BS.black,
          fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
          letterSpacing: '.08em', textTransform: 'uppercase',
          borderRadius: 999,
          border: `1px solid ${BS.border}`,
          pointerEvents: 'none',
        }}>{kicker}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  BS, BlogNav, BlogFooter, BlogWordmark, BlogEyebrow, Reveal, EditorialImage,
});