// VELOUR marketing — Blog: index + first article.
const { Badge, Avatar } = window.VelourDesignSystem_380ed4;

function BlogPage() {
  return (
    <article>
      <window.Section pad={80} style={{ paddingBottom: 0 }}>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
            <Badge tone="rituals">Rituals</Badge>
            <span style={{ fontSize: 13.5, color: "var(--text-tertiary)" }}>June 13, 2026 · 4 min read</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 52, lineHeight: 1.08, letterSpacing: "-0.025em", color: "var(--text-primary)", margin: 0, textWrap: "balance" }}>The quietest ritual is the one that lasts.</h1>
          <div style={{ display: "flex", alignItems: "center", gap: 13, marginTop: 32 }}>
            <Avatar name="Jennifer Sichenzia" ring="rituals" />
            <div>
              <div style={{ fontSize: 14.5, color: "var(--text-primary)", fontWeight: 500 }}>Jennifer Sichenzia</div>
              <div style={{ fontSize: 13, color: "var(--text-tertiary)" }}>Founder &amp; CEO, VELOUR</div>
            </div>
          </div>
        </div>
      </window.Section>

      <window.Section pad={56} style={{ paddingTop: 40 }}>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>
          <div style={{ height: 320, borderRadius: 16, overflow: "hidden", border: "var(--border-width) solid var(--border)", marginBottom: 48 }}>
            {/* Absolute — see the note in site.jsx. */}
            <img
              src="/src/assets/blog-morning-ritual.jpg"
              alt="A calm morning ritual by a sunlit window — tea, journal, and a sprig of eucalyptus"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          </div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 18.5, lineHeight: 1.78, color: "var(--text-secondary)" }}>
            <p style={{ margin: "0 0 26px" }}>Most habit advice is loud. Streaks, badges, confetti, the little red number daring you to break it. It works — for about three weeks. Then life happens: a rainy morning, a late night, a week that simply asks too much. The streak breaks, and with it, the whole fragile scaffolding.</p>
            <p style={{ margin: "0 0 26px" }}>We built VELOUR on the opposite premise. The habits that survive aren't the ones you're nagged into. They're the ones that get quiet enough to disappear into your life — until one day you notice you've walked every morning for two weeks, including the two rainy ones, and nobody had to remind you.</p>
            <blockquote style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, fontSize: 28, lineHeight: 1.4, letterSpacing: "-0.01em", color: "var(--text-primary)", borderLeft: "3px solid var(--sage)", padding: "4px 0 4px 28px", margin: "40px 0" }}>A ritual you have to be reminded of isn't a ritual yet. It's a chore with a notification.</blockquote>
            <p style={{ margin: "0 0 26px" }}>So instead of pushing, VELOUR notices. It tells you the walk lengthened your sleep. It mentions, once, that the beige coat hasn't moved in 94 days. It shows dining-out spending quietly falling as the cooking ritual takes hold. No goals you didn't set, no shame when you miss — just your own life, reflected back clearly enough that the next intentional choice becomes the obvious one.</p>
            <p style={{ margin: 0 }}>That's the whole idea. Soft systems, sharp life. Start with one ritual, and let the rest follow.</p>
          </div>
        </div>
      </window.Section>
    </article>
  );
}

window.BlogPage = BlogPage;
