// VELOUR marketing site — the four pillars as a hairline tableau.
// Hovering a pillar re-tints the page accent to its color and reveals a live stat;
// clicking glides down to that pillar's interactive demo.
const PILLARS = [
  {
    name: "Rituals", color: "var(--sage)", target: "demo-rituals",
    desc: "Morning and evening routines, tracked as rituals — not chores. Consistency, framed as compounding.",
    stat: "14 days. A ritual forming.",
  },
  {
    name: "Wellness", color: "var(--teal)", target: "demo-wellness",
    desc: "Sleep, hydration, movement, mindfulness — folded into one weekly score you can actually read.",
    stat: "Weekly score: 81 of 100.",
  },
  {
    name: "Wardrobe", color: "var(--amber)", target: "demo-wardrobe",
    desc: "Every piece you own, its cost per wear, and the outfits your capsule has been quietly waiting to make.",
    stat: "Capsule average: $4.10 per wear.",
  },
  {
    name: "Efficiency", color: "var(--terracotta)", target: "demo-efficiency",
    desc: "Meal prep, errands, spending, focus — time and money, sorted by what they return. Do, batch, or let go.",
    stat: "Two hours Sunday. Four dinners covered.",
  },
];

function Pillars() {
  const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const goTo = (target) => {
    const t = document.getElementById(target);
    if (t) t.scrollIntoView({ behavior: reduced ? "auto" : "smooth" });
  };
  const tint = (color) => document.documentElement.style.setProperty("--vlr-accent", color);
  return (
    <window.Section id="pillars" bg="var(--bg-page)" pad={112} style={{ borderBottom: "var(--border-width) solid var(--border)" }}>
      <style>{`
        .vlp-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
        .vlp-pillar {
          position: relative; overflow: hidden; width: 100%; text-align: left; cursor: pointer;
          border: none; border-right: 1px solid var(--border); background: transparent;
          padding: 38px 26px 44px; font-family: var(--font-sans); color: var(--text-primary);
          transition: background .5s cubic-bezier(.16,1,.3,1);
        }
        .vlp-pillar:last-child { border-right: none; }
        .vlp-pillar::before {
          content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pc);
          transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1);
        }
        .vlp-pillar:focus-visible::before { transform: scaleX(1); }
        .vlp-pillar:focus-visible { background: color-mix(in srgb, var(--pc) 6%, var(--bg-page)); }
        @media (hover: hover) and (pointer: fine) {
          .vlp-pillar:hover::before { transform: scaleX(1); }
          .vlp-pillar:hover { background: color-mix(in srgb, var(--pc) 6%, var(--bg-page)); }
        }
        .vlp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); display: block; margin-bottom: 20px; transition: transform .4s cubic-bezier(.16,1,.3,1); }
        @media (hover: hover) and (pointer: fine) { .vlp-pillar:hover .vlp-dot { transform: scale(1.5); } }
        .vlp-pillar h3 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; margin: 0 0 8px; letter-spacing: -0.005em; }
        .vlp-pillar p { font-size: 13.5px; color: var(--text-tertiary); line-height: 1.55; margin: 0; }
        .vlp-stat {
          display: block; margin-top: 22px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
          color: var(--pc); font-weight: 600;
          opacity: 0; transform: translateY(6px); transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
        }
        .vlp-pillar:focus-visible .vlp-stat { opacity: 1; transform: none; }
        @media (hover: hover) and (pointer: fine) {
          .vlp-pillar:hover .vlp-stat { opacity: 1; transform: none; }
        }
        /* The stat is content. On touch it would otherwise never be readable. */
        @media (hover: none) { .vlp-stat { opacity: 1; transform: none; } }
        @media (max-width: 900px) {
          .vlp-grid { grid-template-columns: 1fr 1fr; }
          .vlp-pillar:nth-child(2) { border-right: none; }
          .vlp-pillar:nth-child(1), .vlp-pillar:nth-child(2) { border-bottom: 1px solid var(--border); }
        }
        @media (max-width: 540px) {
          .vlp-grid { grid-template-columns: 1fr; }
          .vlp-pillar { border-right: none; border-bottom: 1px solid var(--border); }
          .vlp-pillar:last-child { border-bottom: none; }
        }
        @media (prefers-reduced-motion: reduce) { .vlp-pillar, .vlp-pillar::before, .vlp-dot, .vlp-stat { transition: none; } }
      `}</style>
      <div style={{ maxWidth: 640, margin: "0 auto 56px", textAlign: "center" }}>
        <window.Eyebrow style={{ marginBottom: 18 }}>The system</window.Eyebrow>
        <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 44, lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--text-primary)", margin: 0, textWrap: "balance" }}>Four pillars. One quiet method.</h2>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-tertiary)", margin: "18px 0 0" }}>Not willpower. Not motivation. A set of soft systems that compound — each pillar watches one part of your life and tells you exactly what it sees.</p>
      </div>
      <div className="vlp-grid">
        {PILLARS.map((p) => (
          <button
            key={p.name}
            className="vlp-pillar"
            style={{ "--pc": p.color }}
            onMouseEnter={() => tint(p.color)}
            onFocus={() => tint(p.color)}
            onClick={() => goTo(p.target)}
            aria-label={`${p.name} — see it working`}
          >
            <span className="vlp-dot" aria-hidden="true"></span>
            <h3>{p.name}</h3>
            <p>{p.desc}</p>
            <span className="vlp-stat">{p.stat}</span>
          </button>
        ))}
      </div>
    </window.Section>
  );
}

window.Pillars = Pillars;