// VELOUR marketing — About: what VELOUR is and what it believes.
const { Card, Avatar } = window.VelourDesignSystem_380ed4;

const ABOUT_PILLARS = [
  { name: "Rituals", color: "var(--sage)", line: "Morning and evening routines, tracked as rituals — not chores." },
  { name: "Wellness", color: "var(--teal)", line: "One number that tells the truth about your week." },
  { name: "Wardrobe", color: "var(--amber)", line: "Your capsule, priced by the wear." },
  { name: "Efficiency", color: "var(--terracotta)", line: "Time, sorted by what it returns." },
];

const ABOUT_BELIEFS = [
  { title: "Calm over dopamine", desc: "Most software competes for your attention. VELOUR is built to give it back — no badges, no confetti, no little red number daring you to keep up." },
  { title: "Holds, not streaks", desc: "A streak exists to be broken, and it takes your morale with it. A hold measures how long a ritual has been part of your life — and it forgives a rainy morning." },
  { title: "Observation, not advice", desc: "VELOUR doesn't coach. It notices — the coat unworn for 94 days, the $35 that home coffee kept this week — and trusts you with the next decision." },
];

function AboutPage() {
  return (
    <div>
      <window.Section pad={84} style={{ paddingBottom: 24 }}>
        <div style={{ maxWidth: 720 }}>
          <window.Eyebrow>About</window.Eyebrow>
          <h1 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 60, lineHeight: 1.05, letterSpacing: "-0.025em", color: "var(--text-primary)", margin: "20px 0 0", textWrap: "balance" }}>One calm space for every part of your life.</h1>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: "var(--text-secondary)", margin: "22px 0 0", maxWidth: 560 }}>VELOUR brings rituals, wellness, wardrobe, and time into a single quiet interface — software that behaves less like an app and more like a well-kept room.</p>
        </div>
      </window.Section>

      <window.Section pad={56} style={{ paddingTop: 32 }}>
        <div style={{ maxWidth: 760 }}>
          <window.Eyebrow style={{ marginBottom: 8 }}>Four pillars</window.Eyebrow>
          {ABOUT_PILLARS.map((p) => (
            <div key={p.name} style={{ display: "flex", alignItems: "baseline", gap: 18, padding: "22px 0", borderBottom: "var(--border-width) solid var(--border)" }}>
              <span aria-hidden="true" style={{ width: 8, height: 8, borderRadius: "50%", background: p.color, flexShrink: 0, alignSelf: "center" }}></span>
              <span style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 21, letterSpacing: "-0.01em", color: "var(--text-primary)", width: 130, flexShrink: 0 }}>{p.name}</span>
              <span style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--text-secondary)" }}>{p.line}</span>
            </div>
          ))}
        </div>
      </window.Section>

      <window.Section pad={56}>
        <window.Eyebrow style={{ marginBottom: 24 }}>What we believe</window.Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {ABOUT_BELIEFS.map((b) => (
            <Card key={b.title} padding={28}>
              <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 22, letterSpacing: "-0.01em", color: "var(--text-primary)", margin: "0 0 12px" }}>{b.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.64, color: "var(--text-secondary)", margin: 0, textWrap: "pretty" }}>{b.desc}</p>
            </Card>
          ))}
        </div>
      </window.Section>

      <window.Section pad={72} style={{ paddingBottom: 96 }}>
        <div style={{ maxWidth: 760 }}>
          <window.Eyebrow style={{ marginBottom: 20 }}>How it's being built</window.Eyebrow>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--text-secondary)", margin: 0, maxWidth: 640 }}>VELOUR is a small product, built carefully. We would rather ship one considered feature than five loud ones, and we would rather tell you a page is coming than pretend it exists. What's here works; what isn't here yet is being made properly.</p>
          <blockquote style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, fontSize: 26, lineHeight: 1.45, letterSpacing: "-0.01em", color: "var(--text-primary)", borderLeft: "3px solid var(--sage)", padding: "4px 0 4px 28px", margin: "44px 0 0" }}>We're building VELOUR the way we hope you'll use it — slowly, deliberately, without the noise. If it doesn't make a day feel more intentional, it doesn't ship.</blockquote>
          <div style={{ display: "flex", alignItems: "center", gap: 13, marginTop: 28 }}>
            <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>
    </div>
  );
}

window.AboutPage = AboutPage;