// VELOUR — "a little science, on the house." Shared education content.
// Logged-out marketing shows teasers (hook only). Signed-in users (free OR paid)
// get the full claim, a stat, and a real citation. All sources are verified.
// Framed as real-world knowledge nuggets, refreshed on a regular cadence.
const { Card } = window.VelourDesignSystem_380ed4;

const VELOUR_EDUCATION = [
  {
    id: "automaticity-66-days", pillar: "Rituals", icon: "sun", color: "var(--sage)", fill: "var(--sage-fill)", text: "var(--sage-text)",
    teaser: "The “21 days to a habit” rule is a myth.",
    claim: "A new behaviour takes about 66 days of repetition — not 21 — before it becomes automatic. Consistency outlasts intensity.",
    stat: "~66 days to automatic",
    source: "Lally et al., European Journal of Social Psychology (2010)",
    url: "https://onlinelibrary.wiley.com/doi/10.1002/ejsp.674",
    why: "Repeated daily, a new act took a median of 66 days to feel automatic for the 96 people studied — and missing a single day didn’t set anyone back.",
  },
  {
    pillar: "Rituals", icon: "sun", color: "var(--sage)", fill: "var(--sage-fill)", text: "var(--sage-text)",
    teaser: "Willpower fades. A plan doesn’t.",
    claim: "Deciding in advance exactly when and where you’ll act — an “if-then” plan — reliably increases follow-through. Across 94 studies it had a medium-to-large effect on reaching goals.",
    stat: "“If-then” plans: d ≈ 0.65 on follow-through",
    source: "Gollwitzer & Sheeran, Advances in Experimental Social Psychology (2006)",
    url: "https://cancercontrol.cancer.gov/sites/default/files/2020-06/goal_intent_attain.pdf",
  },
  {
    // Referenced by id from the dashboard's Rituals × Wellness pattern, 13 Sep
    // 2026, replacing sleep-routine-satisfaction there. That paper studied
    // sleep-schedule consistency and life satisfaction; this one studied how
    // regular the whole DAY is against sleep, which is what the card compares.
    // Correlational, and the paper says so — the card says "compare", not "cause".
    id: "routine-regularity-sleep", pillar: "Rituals", icon: "sun", color: "var(--sage)", fill: "var(--sage-fill)", text: "var(--sage-text)",
    teaser: "A steady day tends to end in a steadier night.",
    claim: "Among 100 healthy adults who kept a two-week diary of when their day’s activities happened, those with more regular routines reported fewer sleep problems — and poor sleepers were twice as common among the irregular.",
    stat: "Irregular routines: 2× the share of poor sleepers",
    source: "Monk et al., Chronobiology International (2003)",
    url: "https://doi.org/10.1081/cbi-120017812",
    why: "In a study of 100 adults, people whose days ran on a more regular routine reported fewer sleep problems — poor sleepers were twice as common among the irregular.",
  },
  {
    id: "mild-dehydration-mood", pillar: "Wellness", icon: "heart", color: "var(--teal)", fill: "var(--teal-fill)", text: "var(--teal-text)",
    teaser: "A little dehydration shows up as a bad mood.",
    claim: "Losing as little as ~1.4% of your body weight in water lowered mood and concentration and brought on headaches in a controlled study.",
    stat: "~1.4% fluid loss dips mood & focus",
    source: "Armstrong et al., The Journal of Nutrition (2012)",
    url: "https://doi.org/10.3945/jn.111.142000",
    why: "In a controlled study, losing about 1.4% of body weight in water was enough to lower mood and concentration and bring on headaches.",
  },
  {
    // Referenced by id from the Wellness pillar insight (when the day's water is at
    // goal). It backed the dashboard's Rituals × Wellness pattern from 12 Sep 2026
    // until routine-regularity-sleep replaced it there on 13 Sep: this paper is
    // about sleep schedules and life satisfaction, which only loosely matched a
    // card comparing morning rituals with sleep. Verified against the paper's own
    // host page before adding, not taken from a summary of it.
    id: "sleep-routine-satisfaction",
    pillar: "Wellness", icon: "heart", color: "var(--teal)", fill: "var(--teal-fill)", text: "var(--teal-text)",
    teaser: "A steady sleep schedule shows up in how satisfied you feel, not just how you sleep.",
    claim: "University students with more consistent sleep routines reported higher life satisfaction — and nearly half of that link ran through better sleep quality rather than the schedule alone.",
    stat: "~44% of the effect runs through sleep quality",
    source: "Prokeš, Frontiers in Psychology (2023)",
    url: "https://doi.org/10.3389/fpsyg.2023.1231773",
    why: "Among 2,488 students, a steadier sleep routine went with higher life satisfaction — and nearly half of that link ran through better sleep.",
  },
  {
    // Referenced by id from the dashboard's Daylight × Sleep insight. Renaming or
    // removing this id drops the reading line there — silently, by design, rather
    // than breaking the observation it sits under.
    id: "activity-sleep",
    pillar: "Wellness", icon: "heart", color: "var(--teal)", fill: "var(--teal-fill)", text: "var(--teal-text)",
    teaser: "Moving today is tomorrow’s good sleep.",
    claim: "Adults who meet the basic physical-activity guidelines are about 65% less likely to feel overly sleepy during the day.",
    stat: "Meeting activity guidelines → ~65% less daytime sleepiness",
    source: "Loprinzi & Cardinal, Mental Health and Physical Activity (2011), NHANES",
    url: "https://news.oregonstate.edu/news/study-physical-activity-impacts-overall-quality-sleep",
  },
  {
    id: "wear-nine-months", pillar: "Wardrobe", icon: "coat-hanger", color: "var(--amber)", fill: "var(--amber-fill)", text: "var(--amber-text)",
    teaser: "The greenest piece is the one you already own.",
    claim: "Wearing the clothes you already own just nine months longer cuts their carbon, water and waste footprints by roughly 20–30% each.",
    stat: "+9 months wear ≈ 20–30% lower footprint",
    source: "WRAP, “Valuing Our Clothes” (UK)",
    url: "https://www.wrap.ngo/resources/report/valuing-our-clothes-cost-uk-fashion",
    why: "Wearing what you already own nine months longer cuts each piece’s carbon, water and waste footprint by roughly 20–30%.",
  },
  {
    pillar: "Wardrobe", icon: "coat-hanger", color: "var(--amber)", fill: "var(--amber-fill)", text: "var(--amber-text)",
    teaser: "We wear our clothes half as long as we used to.",
    claim: "Worldwide, the number of times a garment is worn before it’s discarded has fallen about 36% in 15 years — the average piece is now worn only around ten times.",
    stat: "Garment use down ~36% in 15 years",
    source: "Ellen MacArthur Foundation, A New Textiles Economy (2017)",
    url: "https://www.ellenmacarthurfoundation.org/a-new-textiles-economy",
  },
  {
    id: "subscriptions-forgotten", pillar: "Efficiency", icon: "currency-circle-dollar", color: "var(--terracotta)", fill: "var(--terracotta-fill)", text: "var(--terracotta-text)",
    teaser: "You’re likely paying for something you forgot.",
    claim: "People guess they spend about $86 a month on subscriptions, but actually spend around $219 — about $1,600 a year more than they think, and 42% had forgotten one they no longer use.",
    stat: "~$1,600/yr more than people think",
    source: "C+R Research subscription survey (2022)",
    url: "https://www.crresearch.com/blog/subscription-service-statistics-and-costs/",
    why: "In a 2022 survey of 1,000 people, 42% had stopped using a subscription and forgotten they were still paying for it.",
  },
  {
    id: "food-away-from-home", pillar: "Efficiency", icon: "currency-circle-dollar", color: "var(--terracotta)", fill: "var(--terracotta-fill)", text: "var(--terracotta-text)",
    teaser: "The kitchen table quietly beats the tab.",
    claim: "The average U.S. household spends about $3,933 a year on food away from home. Small shifts back to the kitchen add up quickly.",
    stat: "~$3,933/yr eating out (avg US household)",
    source: "U.S. Bureau of Labor Statistics, Consumer Expenditure Survey (2023)",
    url: "https://www.bls.gov/opub/reports/consumer-expenditures/2023/",
    why: "The average U.S. household spent $3,933 on food away from home in 2023 — the money a packed lunch and home coffee quietly keep.",
  },
];
window.VELOUR_EDUCATION = VELOUR_EDUCATION;

// First insight per pillar — used in compact contexts (marketing strip, dashboard inline).
function eduPrimary() {
  const seen = {};
  return VELOUR_EDUCATION.filter((e) => (seen[e.pillar] ? false : (seen[e.pillar] = true)));
}

function EduIcon({ e, size = 40 }) {
  return (
    <span style={{ width: size, height: size, borderRadius: 11, background: e.color, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
      <i className={`ph ph-${e.icon}`} style={{ fontSize: size * 0.45, color: "#fff" }}></i>
    </span>
  );
}

// Teaser card (logged out) — hook + a locked "citation inside" cue.
function EduTeaserCard({ e }) {
  return (
    <div className="vr-lift" style={{ background: e.fill, borderRadius: 16, padding: "24px 24px 20px", display: "flex", flexDirection: "column", minHeight: 210 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <EduIcon e={e} />
        <span style={{ fontSize: 13, color: e.text, fontWeight: 500 }}>{e.pillar}</span>
      </div>
      <div style={{ fontFamily: "var(--font-serif)", fontSize: 20, lineHeight: 1.34, color: "var(--text-primary)", letterSpacing: "-0.01em", flex: 1 }}>{e.teaser}</div>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 7, marginTop: 16, fontSize: 12.5, color: e.text, opacity: 0.8 }}>
        <i className="ph ph-lock-simple" style={{ fontSize: 14 }}></i>The stat &amp; citation, inside
      </div>
    </div>
  );
}

// Full card (signed in) — claim + stat + real citation.
function EduFullCard({ e }) {
  return (
    <Card padding={22} style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
        <EduIcon e={e} size={36} />
        <span style={{ fontSize: 13, color: e.text, fontWeight: 500 }}>{e.pillar}</span>
      </div>
      <div style={{ fontFamily: "var(--font-serif)", fontSize: 18.5, lineHeight: 1.42, color: "var(--text-primary)", letterSpacing: "-0.01em", flex: 1 }}>{e.claim}</div>
      <span style={{ alignSelf: "flex-start", marginTop: 16, fontSize: 12.5, fontWeight: 500, color: e.text, background: e.fill, borderRadius: 999, padding: "6px 12px" }}>{e.stat}</span>
      <a href={e.url} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 14, fontSize: 12, color: "var(--text-tertiary)", textDecoration: "none", lineHeight: 1.4 }}>
        <i className="ph ph-quotes" style={{ fontSize: 13, flexShrink: 0 }}></i>{e.source}
        <i className="ph ph-arrow-up-right" style={{ fontSize: 11, flexShrink: 0, opacity: 0.7 }}></i>
      </a>
    </Card>
  );
}

// Compact section: marketing teaser strip, or dashboard inline "Why these work" (one per pillar).
// mode: "teaser" (logged out) | "full" (signed-in dashboard inline)
function EducationSection({ mode = "teaser", onNavigate, onOpen }) {
  const items = eduPrimary();
  if (mode === "full") {
    return (
      <div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "8px 2px 16px", flexWrap: "wrap", gap: 8 }}>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 24, color: "var(--text-primary)", margin: 0, letterSpacing: "-0.01em" }}>Why these work</h2>
          <button onClick={() => onOpen && onOpen("education")} style={{ fontSize: 13.5, color: "var(--sage-text)", background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-sans)", display: "inline-flex", alignItems: "center", gap: 6 }}>
            See all in Education <i className="ph ph-arrow-right" style={{ fontSize: 13 }}></i>
          </button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 170px), 1fr))", gap: 20 }}>
          {items.map((e) => <EduFullCard key={e.pillar} e={e} />)}
        </div>
      </div>
    );
  }
  return (
    <window.Section bg="var(--bg-page)" pad={112} style={{ borderBottom: "var(--border-width) solid var(--border)" }}>
      <div style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 48px" }}>
        <window.Eyebrow style={{ marginBottom: 18 }}>A little science, on the house</window.Eyebrow>
        <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 40, lineHeight: 1.12, letterSpacing: "-0.02em", color: "var(--text-primary)", margin: 0, textWrap: "balance" }}>Small things, quietly backed by evidence.</h2>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-secondary)", margin: "16px 0 0" }}>A taste of what VELOUR understands about your day. Start free and every insight comes with its stat and a real citation.</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 170px), 1fr))", gap: 22 }}>
        {items.map((e) => <EduTeaserCard key={e.pillar} e={e} />)}
      </div>
      <div style={{ textAlign: "center", marginTop: 40 }}>
        <button onClick={() => onNavigate && onNavigate("pricing")} style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "var(--ink)", color: "var(--parchment)", border: "none", borderRadius: 999, padding: "13px 24px", fontFamily: "var(--font-sans)", fontSize: 14.5, fontWeight: 500, cursor: "pointer", boxShadow: "0 4px 14px rgba(44,44,42,0.18)" }}>
          Start free to see the evidence <i className="ph ph-arrow-right" style={{ fontSize: 15 }}></i>
        </button>
      </div>
    </window.Section>
  );
}
window.EducationSection = EducationSection;

// Full signed-in Education page — all insights, grouped by pillar. Free and paid alike.
function DashEducation() {
  const pillars = [];
  VELOUR_EDUCATION.forEach((e) => { if (!pillars.find((p) => p.pillar === e.pillar)) pillars.push({ pillar: e.pillar, color: e.color, fill: e.fill, text: e.text, icon: e.icon, items: [] }); });
  VELOUR_EDUCATION.forEach((e) => pillars.find((p) => p.pillar === e.pillar).items.push(e));

  return (
    <main style={{ maxWidth: 1240, margin: "0 auto", padding: "36px 32px 64px", fontFamily: "var(--font-sans)", display: "flex", flexDirection: "column", gap: 32 }}>
      <div style={{ maxWidth: 620 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontSize: 11.5, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 500, color: "var(--sage-text)", background: "var(--sage-fill)", borderRadius: 999, padding: "6px 14px" }}><i className="ph ph-graduation-cap" style={{ fontSize: 14 }}></i>Education</span>
        <h1 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 40, lineHeight: 1.08, letterSpacing: "-0.02em", color: "var(--text-primary)", margin: "18px 0 0", textWrap: "balance" }}>Why these things work.</h1>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-secondary)", margin: "14px 0 0" }}>Real-world knowledge nuggets behind each pillar — every claim measured, every stat cited. Fresh ones land here regularly, drawn from the research that fits your life, not hype.</p>
      </div>
      {pillars.map((p) => (
        <div key={p.pillar}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "0 2px 16px" }}>
            <EduIcon e={p} size={32} />
            <span style={{ fontFamily: "var(--font-serif)", fontSize: 21, color: "var(--text-primary)", letterSpacing: "-0.01em" }}>{p.pillar}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))", gap: 20 }}>
            {p.items.map((e, i) => <EduFullCard key={i} e={e} />)}
          </div>
        </div>
      ))}
    </main>
  );
}
window.DashEducation = DashEducation;
// One list, two readers. The dashboard cites entries from here by id rather than
// keeping a second copy of the sources — two lists of citations is how one of
// them ends up wrong.
window.VELOUR_EDUCATION = VELOUR_EDUCATION;
