/* Blog section for the Rep by Rep marketing site.
   11 real posts from JP’s Field Notes library (RxR/Content/Field Notes Blog/).
   Full bodies live in Drive; these are teaser cards only.
   Links point at # until the blog archive route is built. */

const POSTS = [
  {
    eyebrow: 'Prep',
    slug: 'what-prep-feels-like',
    title: 'What Prep Actually Feels Like',
    excerpt: 'I’m six weeks out from my first stage and I’m not going to sugarcoat it. The hunger is real, the low days are real, and the mental side is harder than the physical by a long stretch.',
    logLine: '6 WEEKS OUT · STAGE BOUND',
    date: 'June 20, 2026',
    readTime: '10 min read',
  },
  {
    eyebrow: 'Mindset',
    slug: 'too-old',
    title: 'You’re Not Too Old. I’m Proof.',
    excerpt: 'I was 42 when I finally figured it out. At 44, I’m stepping on stage. Here’s what changed, and why it can change for you too.',
    logLine: 'AGE 44 · FIRST STAGE',
    date: 'May 16, 2026',
    readTime: '7 min read',
  },
  {
    eyebrow: 'Training',
    slug: 'gym-with-a-plan',
    title: 'Stop Wandering. Go to the Gym With a Plan.',
    excerpt: 'Showing up counts for something. Showing up with a plan counts for a lot more. Effort without direction is just energy expenditure, and your body knows the difference.',
    logLine: 'LOGGED · NOT GUESSED',
    date: 'May 9, 2026',
    readTime: '6 min read',
  },
  {
    eyebrow: 'Mindset',
    slug: 'gym-non-negotiable',
    title: 'The Gym Isn’t Optional. It’s a Non-Negotiable.',
    excerpt: 'Stop asking yourself if you’re going. Start asking yourself when. That one reframe is the difference between someone who exercises occasionally and someone who trains.',
    logLine: 'MONDAY → TODAY',
    date: 'May 2, 2026',
    readTime: '5 min read',
  },
  {
    eyebrow: 'Training',
    slug: 'know-why-you-train',
    title: 'Do You Actually Know Why You Train the Way You Do?',
    excerpt: 'There’s a difference between exercising and training. One is physical activity. The other is purposeful and directed, and the results are not the same.',
    logLine: 'INTENT · NOT JUST EFFORT',
    date: 'April 25, 2026',
    readTime: '6 min read',
  },
  {
    eyebrow: 'Training',
    slug: 'overload',
    title: 'What Progressive Overload Actually Means',
    excerpt: 'If your weights haven’t changed in months, neither has your body. The simplest principle in training, and the one most men quietly ignore.',
    logLine: 'INCLINE 185→190',
    date: 'April 18, 2026',
    readTime: '4 min read',
  },
  {
    eyebrow: 'Training',
    slug: 'training-splits-explained',
    title: 'Bro Splits, PPL, Upper-Lower. Here’s What They All Actually Mean.',
    excerpt: 'The internet will confuse you into never starting. Here’s what each split is actually designed for and how to pick one without falling into a 45-minute tab spiral.',
    logLine: 'PPL · UPPER/LOWER · SPLIT',
    date: 'April 11, 2026',
    readTime: '6 min read',
  },
  {
    eyebrow: 'Nutrition',
    slug: 'diet-real-life',
    title: 'Your Diet Doesn’t Stop When Real Life Starts.',
    excerpt: 'Family events, road trips, work travel. None of it has to derail your progress. Preparation beats willpower every time, and here’s exactly what that looks like in practice.',
    logLine: 'PACK THE COOLER',
    date: 'April 4, 2026',
    readTime: '5 min read',
  },
  {
    eyebrow: 'Nutrition',
    slug: 'meal-prep-simplified',
    title: 'Everything You’ve Been Told About Meal Prep Is Making It Harder Than It Needs to Be.',
    excerpt: 'Stop cooking fifteen identical containers. By Wednesday it feels like a punishment. Prep ingredients, not meals, and the whole week gets easier.',
    logLine: 'BATCH COOK · ASSEMBLE DAILY',
    date: 'March 28, 2026',
    readTime: '5 min read',
  },
  {
    eyebrow: 'Nutrition',
    slug: 'how-to-read-a-food-label',
    title: 'How to Actually Read a Food Label.',
    excerpt: 'That high-protein meal the creator was losing his mind about? It also had 80 grams of fat and 1,400 calories. Here’s how to read what’s actually on the back of the package.',
    logLine: '9 CAL/G FAT · 4 CAL/G PROTEIN',
    date: 'March 21, 2026',
    readTime: '7 min read',
  },
  {
    eyebrow: 'Nutrition',
    slug: 'wreck-diet',
    title: 'The Foods Quietly Wrecking Your Diet',
    excerpt: 'Healthy doesn’t mean calorie-free. The same salad runs 325 calories or 1,140 depending on what you add. Here’s what people chronically underestimate.',
    logLine: 'SALAD 325 vs 1,140',
    date: 'March 14, 2026',
    readTime: '6 min read',
  },
];

const BlogCard = ({ post }) => (
  <article
    style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 6,
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      transition: 'all 200ms cubic-bezier(.16,1,.3,1)',
      cursor: 'pointer',
    }}
    onMouseEnter={e => {
      e.currentTarget.style.transform = 'translateY(-3px)';
      e.currentTarget.style.boxShadow = '0 8px 24px rgba(17,20,24,0.08)';
      e.currentTarget.style.borderColor = 'var(--border-strong)';
    }}
    onMouseLeave={e => {
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = 'none';
      e.currentTarget.style.borderColor = 'var(--border)';
    }}
  >
    {/* Cover — custom RxR logbook. Each card reads as a page out of Jason's
        training log: charcoal cover, sapphire bound spine with stitch holes,
        debossed RxR monogram, and a composition-book label with the category
        + a mono "logged" line tied to the article. Original artwork — does not
        evoke the Field Notes memo-book brand's trade dress. */}
    <div style={{
      aspectRatio: '16 / 9',
      background: 'linear-gradient(135deg, #1A1F26 0%, #11151B 100%)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* faint ruled-page texture across the cover */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.05 }} xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id={`rule-${post.slug}`} width="100%" height="22" patternUnits="userSpaceOnUse">
            <line x1="0" y1="22" x2="100%" y2="22" stroke="#fff" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#rule-${post.slug})`} />
      </svg>

      {/* bound spine — sapphire strip with stitch holes down the left edge */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, width: 26,
        background: 'var(--accent)',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'space-evenly',
        paddingTop: 12, paddingBottom: 12,
      }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <span key={i} style={{
            width: 5, height: 5, borderRadius: 3,
            background: 'rgba(0,0,0,0.32)',
            boxShadow: 'inset 0 1px 1px rgba(0,0,0,0.4)',
          }} />
        ))}
      </div>

      {/* debossed RxR monogram, upper-right */}
      <div style={{
        position: 'absolute', top: 16, right: 18,
        display: 'flex', alignItems: 'center', gap: 7,
        opacity: 0.5,
      }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 13,
          color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em',
        }}>R</span>
        <span style={{ color: 'var(--rxr-sapphire-tint)', fontSize: 11, fontWeight: 700 }}>&times;</span>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 13,
          color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em',
        }}>R</span>
      </div>

      {/* composition-book label, slightly rotated, sitting on the cover */}
      <div style={{
        position: 'absolute', top: '50%', left: 'calc(26px + 28px)',
        transform: 'translateY(-50%) rotate(-1.5deg)',
        background: '#F8F6F1',
        border: '1px solid rgba(0,0,0,0.08)',
        boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
        borderRadius: 3,
        padding: '14px 18px 13px',
        width: 'min(72%, 230px)',
      }}>
        <div style={{
          fontSize: 8, fontWeight: 700, letterSpacing: '0.28em',
          textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6,
        }}>Field Notes</div>
        <div style={{
          fontFamily: 'var(--font-headline)', fontWeight: 600,
          fontSize: 19, lineHeight: 1, textTransform: 'uppercase',
          letterSpacing: '0.02em', color: '#1A1F26',
        }}>{post.eyebrow}</div>
        <div style={{
          marginTop: 10, paddingTop: 9, borderTop: '1px solid rgba(0,0,0,0.1)',
          fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '-0.01em',
          color: '#4B5460', display: 'flex', alignItems: 'center', gap: 7,
        }}>
          <span style={{ color: 'var(--accent)' }}>&rsaquo;</span>{post.logLine}
        </div>
      </div>
    </div>

    <div style={{
      padding: 24,
      display: 'flex',
      flexDirection: 'column',
      flex: 1,
    }}>
      <div style={{
        fontSize: 10,
        fontWeight: 600,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        color: 'var(--accent)',
      }}>
        {post.eyebrow}
      </div>

      <h3 style={{
        fontFamily: 'var(--font-headline)',
        fontWeight: 600,
        fontSize: 20,
        textTransform: 'uppercase',
        letterSpacing: '0.02em',
        lineHeight: 1.15,
        margin: '10px 0 12px',
        color: 'var(--fg)',
      }}>
        {post.title}
      </h3>

      <p style={{
        fontSize: 14,
        lineHeight: 1.55,
        color: 'var(--fg-2)',
        margin: 0,
        marginBottom: 18,
        flex: 1,
      }}>
        {post.excerpt}
      </p>

      <div style={{
        paddingTop: 14,
        borderTop: '1px solid var(--border)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        fontSize: 11,
        color: 'var(--fg-3)',
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        fontWeight: 600,
      }}>
        <span>{post.date}</span>
        <span style={{ fontFamily: 'var(--font-mono)', letterSpacing: '0' }}>{post.readTime}</span>
      </div>
    </div>
  </article>
);

const Blog = () => (
  <section id="blog" className="bg-wash">
    <div className="wrap">
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-end',
        flexWrap: 'wrap',
        gap: 24,
        marginBottom: 16,
      }}>
        <div>
          <div className="eyebrow">Field Notes</div>
          <h2 className="h-section" style={{ marginTop: 12 }}>The thinking<br/>behind the work.</h2>
          <div className="rule" />
        </div>
        <a href="#" style={{
          fontSize: 11,
          fontWeight: 600,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color: 'var(--accent)',
          textDecoration: 'none',
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          paddingBottom: 8,
          whiteSpace: 'nowrap',
        }}>
          All Posts →
        </a>
      </div>

      <div className="m-1" style={{
        marginTop: 40,
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 20,
      }}>
        {POSTS.map(p => <BlogCard key={p.title} post={p} />)}
      </div>
    </div>
  </section>
);

Object.assign(window, { Blog });