// VELOUR marketing — Features page.
const { Card } = window.VelourDesignSystem_380ed4;

const FEATURES = [
  { icon: "sparkle", color: "var(--sage)", title: "Quiet intelligence", desc: "VELOUR reflects your own patterns back to you — specific, never preachy. Insights drawn from your real data, not generic advice." },
  { icon: "squares-four", color: "var(--teal)", title: "One unified space", desc: "Rituals, wellness, wardrobe, and spending share a single considered home — your life reads as one picture, not a dozen dashboards." },
  { icon: "bell-slash", color: "var(--amber)", title: "No streak anxiety", desc: "Rituals that forgive a rainy morning. One calm nudge instead of a wall of notifications — momentum without the guilt." },
  { icon: "chart-line-up", color: "var(--terracotta)", title: "Patterns over numbers", desc: "We surface the connection — the way a morning walk lengthens your sleep — rather than burying you in raw metrics." },
  { icon: "lock-simple", color: "var(--ink)", title: "Private by default", desc: "Your data stays yours. No selling, no ad targeting, no exceptions. Export or delete everything, any time." },
  { icon: "device-mobile", color: "var(--sage)", title: "Everywhere you are", desc: "A calm interface on phone, tablet, and web — your rituals and reflections always a glance away, fully in sync." },
];

function FeaturesPage() {
  return (
    <div>
      <window.Section pad={84} style={{ paddingBottom: 24 }}>
        <div style={{ maxWidth: 720 }}>
          <window.Eyebrow>Features</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" }}>Everything you need. Nothing you don't.</h1>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: "var(--text-secondary)", margin: "22px 0 0", maxWidth: 560 }}>VELOUR is built on restraint. Every feature earns its place by making your life feel more intentional — and quieter.</p>
        </div>
      </window.Section>
      <window.Section pad={56} style={{ paddingTop: 32 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {FEATURES.map((f) => (
            <Card key={f.title} padding={28}>
              <div style={{ width: 52, height: 52, borderRadius: 13, background: f.color, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 22 }}>
                <i className={`ph ph-${f.icon}`} style={{ fontSize: 24, color: "#fff" }}></i>
              </div>
              <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 19, color: "var(--text-primary)", margin: "0 0 12px", letterSpacing: "-0.005em" }}>{f.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.64, color: "var(--text-secondary)", margin: 0, textWrap: "pretty" }}>{f.desc}</p>
            </Card>
          ))}
        </div>
      </window.Section>
    </div>
  );
}

window.FeaturesPage = FeaturesPage;