// blog.jsx — The Journal (blog index)
// POSTS is the single source of truth for the listing. To add a transferred
// post: add an entry here (and later we'll create its individual article page,
// then point `href` at it). Placeholder entries below show the layout.

const POSTS = [
  {
    title: 'The Ultimate Guide to Botox in Edina, Minnesota',
    excerpt: 'Everything you need to know about Botox — what it is, the treatment process step by step, and why clients choose Rachel Dahlen Aesthetics.',
    category: 'Botox · Edina, MN', date: 'June 7, 2023',
    img: '/assets/studio-establishing.jpg', pos: 'center 42%',
    href: '/blog/the-ultimate-guide-to-botox-in-edina-minnesota/',
  },
  {
    title: 'Choosing the Best Botox Clinic in Edina, MN: What to Look For',
    excerpt: 'What sets the best Botox clinic apart — expertise, personalized care, atmosphere, and an unwavering commitment to safety.',
    category: 'Botox · Edina, MN', date: 'June 7, 2023',
    img: '/assets/rachel.jpeg', pos: 'center 22%',
    href: '/blog/choosing-the-best-botox-clinic-in-edina-mn-what-to-look-for/',
  },
  {
    title: 'Unlock Youthful Radiance: Botox Treatments in Edina, MN',
    excerpt: 'How thoughtful Botox treatments smooth fine lines while keeping your expression natural — never frozen, never overdone.',
    category: 'Botox · Edina, MN', date: 'June 7, 2023',
    img: '/assets/tx/t-botox.jpg', pos: 'center 32%',
    href: '/blog/unlock-youthful-radiance-botox-treatments-in-edina-mn/',
  },
  {
    title: 'How to Choose a Botox Provider: Finding the Right Fit',
    excerpt: 'Six factors that matter when selecting a provider — qualifications, experience, reputation, comfort, atmosphere, and convenience.',
    category: 'Botox · Edina, MN', date: 'May 15, 2023',
    img: '/assets/tx/t-featured.jpg', pos: 'center 22%',
    href: '/blog/how-to-choose-a-botox-provider-finding-the-right-fit-for-your-botox-edina-treatment-at-rachel-dahlen-aesthetics/',
  },
  {
    title: 'Botox for Different Age Groups: From Millennials to Seniors',
    excerpt: 'How Botox benefits every age — preventative care in your 20s and 30s, maintenance through Gen X, and refreshing results beyond.',
    category: 'Botox · Edina, MN', date: 'May 15, 2023',
    img: '/assets/tx/t-sculptra.jpg', pos: 'center 26%',
    href: '/blog/botox-for-different-age-groups-discover-the-benefits-of-botox-edina-at-rachel-dahlen-aesthetics/',
  },
  {
    title: 'The Botox Edina Procedure: A Comprehensive Guide',
    excerpt: 'A step-by-step walkthrough — from consultation and preparation to the injection itself, aftercare, and seeing your results.',
    category: 'Botox · Edina, MN', date: 'May 15, 2023',
    img: '/assets/tx/t-filler.jpg', pos: 'center 35%',
    href: '/blog/the-botox-edina-procedure-a-comprehensive-guide-to-botox-injections-at-rachel-dahlen-aesthetics/',
  },
  {
    title: 'The Benefits of Botox: Discover a World of Rejuvenation',
    excerpt: 'What Botox is, how it works, and its benefits — from smoothing fine lines and wrinkles to acting as preventative care.',
    category: 'Botox · Edina, MN', date: 'May 15, 2023',
    img: '/assets/tx/t-vipeel.jpg', pos: 'center 35%',
    href: '/blog/the-benefits-of-botox-discover-a-world-of-rejuvenation-at-rachel-dahlen-aesthetics/',
  },
];

function BlogPage() {
  const featured = POSTS[0];
  const rest = POSTS.slice(1);
  return (
    <div>
      <Header active="Blog" />
      <PageHeader
        eyebrow="The Journal"
        title="Notes on skin, health &"
        accent="aesthetics."
        body="Education, insight, and honest perspective from the chair — on treatments, long-term skin health, and aging with intention."
      />

      <section style={{ padding: '100px 0 70px' }}>
        <div className="container">
          <FeaturedPost post={featured} />
        </div>
      </section>

      {rest.length > 0 && (
        <section style={{ padding: '0 0 120px' }}>
          <div className="container">
            <div className="eyebrow" style={{ marginBottom: 30 }}>More from the Journal</div>
            <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
              {rest.map((p, i) => <PostCard key={i} post={p} />)}
            </div>
          </div>
        </section>
      )}

      <BookCTA />
      <Footer />
    </div>
  );
}

function FeaturedPost({ post }) {
  return (
    <a href={post.href} className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
      <div className="photo-frame" style={{ aspectRatio: '4 / 3', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)' }}>
        <img src={post.img} alt={post.title} style={{ objectPosition: post.pos }} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <span className="badge badge-tan">{post.category}</span>
          <span className="eyebrow">{post.date}</span>
        </div>
        <h2 className="h-section" style={{ fontSize: 'clamp(32px, 3.4vw, 46px)' }}>{post.title}</h2>
        <div className="burgundy-rule" />
        <p className="body-lg" style={{ color: 'var(--color-taupe)' }}>{post.excerpt}</p>
        <div className="link-arrow" style={{ marginTop: 6 }}>Read Article →</div>
      </div>
    </a>
  );
}

function PostCard({ post }) {
  return (
    <a href={post.href} style={{ display: 'flex', flexDirection: 'column', background: 'var(--color-surface-raised)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', transition: 'all .3s ease' }}
       onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
       onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}>
      <div style={{ aspectRatio: '3 / 2', overflow: 'hidden' }}>
        <img src={post.img} alt={post.title} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: post.pos, filter: 'contrast(0.97) saturate(0.92)' }} />
      </div>
      <div style={{ padding: '24px 26px 28px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <span className="eyebrow">{post.category}</span>
          <span style={{ fontSize: 10, color: 'var(--color-text-muted)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>{post.date}</span>
        </div>
        <h3 className="h-sub" style={{ fontSize: 24 }}>{post.title}</h3>
        <p className="body-sm" style={{ color: 'var(--color-taupe)', flex: 1 }}>{post.excerpt}</p>
        <div style={{ marginTop: 4, fontSize: 11, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-deep-brown)' }}>Read more →</div>
      </div>
    </a>
  );
}

Object.assign(window, { BlogPage });