/* global React */
const { useState, useEffect, useRef } = React;
const { Icon, Sparkle, Button } = window;

// ── Three Mistakes ──────────────────────────────────────────────────
const ThreeMistakes = () => (
  <section className="section" id="how">
    <div className="container">
      <div className="kicker" data-reveal><span className="kicker-dot"></span>Why LIFE works</div>
      <h2 className="h-section" data-reveal style={{ marginTop: 16, maxWidth: "18ch" }}>
        Three things most apps get wrong.
      </h2>
      <p className="lead" data-reveal style={{ marginTop: 24, color: "#2D3436" }}>
        Most apps promise more output. They deliver more dashboards, more notifications,
        the same quiet anxiety in a nicer font. LIFE is built on a different idea:
        the system should disappear so your life can show up.
      </p>
      <div className="mistakes-stack">
        <div className="mistake-card c1" data-reveal>
          <div className="mistake-inner">
            <div className="mistake-num">01 / Time</div>
            <div className="mistake-icon"><Icon name="clock" size={22} /></div>
            <h3>Get 4–6 hours back, every week.</h3>
            <p>That's how long the average professional loses weekly — switching apps, tracking by hand, hunting for information they already have. LIFE eliminates that. Everything connects. Everything updates automatically. The hours come back.</p>
          </div>
        </div>
        <div className="mistake-card c2" data-reveal>
          <div className="mistake-inner">
            <div className="mistake-num">02 / Progress</div>
            <div className="mistake-icon"><Icon name="target" size={22} /></div>
            <h3>Real progress on the goals that matter.</h3>
            <p>Information without action is just noise. LIFE doesn't only show you data — it turns insights into scheduled actions. Your goals get real time on your calendar, not just space in a notebook.</p>
          </div>
        </div>
        <div className="mistake-card c3" data-reveal>
          <div className="mistake-inner">
            <div className="mistake-num">03 / Intelligence</div>
            <div className="mistake-icon" style={{ color: "#33FFE9", filter: "drop-shadow(0 0 8px rgba(51,255,233,0.5))", background: "rgba(51,255,233,0.08)" }}><Icon name="wand" size={22} color="#33FFE9" /></div>
            <h3>Intelligence that just shows up.</h3>
            <p>LIFE quietly notices your patterns, catches problems before they reach you, and surfaces the right insight at the right moment. The less you manage it, the better it's working.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── 17 Areas (Bento) ────────────────────────────────────────────────
const PILLARS = [
  {
    name: "Time & Communication",
    icon: "clock",
    color: "#1B4332",
    soft: "#D8EDE4",
    modules: [
      { name: "Calendar", color: "#1B4332", soft: "#D8EDE4", wide: true,
        quote: "You're double-booked Wednesday — and Thursday leaves no room for focused work.",
        desc: "3.5 hours a week. That's what the average professional loses to scheduling chaos. LIFE builds your ideal week: protected deep-work blocks, energy-matched scheduling, and a clear view of what you can realistically commit to.",
        pills: ["Syncs Google & Outlook", "Catches conflicts early", "Protects deep-work time", "Saves ~3.5 hrs/week"] },
      { name: "Tasks", color: "#5B8A72", soft: "#E8F0EC",
        quote: "14 open tasks. Here's the one that moves everything else forward.",
        desc: "Most to-do apps make you maintain the list. LIFE maintains it for you. Every task scored by urgency, energy cost, and strategic value.",
        pills: ["AI prioritisation", "Links tasks to goals", "Auto-blocks time"] },
      { name: "Email", color: "#5B8A72", soft: "#E8F0EC",
        quote: "12 unread. Three actually matter. LIFE already knows which.",
        desc: "Your inbox is not a to-do list. LIFE triages by what deserves attention, drafts replies in your voice, and buries the noise. Saves about an hour a day.",
        pills: ["Gmail + Outlook", "Smart triage", "~1 hr/day saved"] },
      { name: "Decisions", color: "#1B4332", soft: "#D8EDE4",
        quote: "You made this same trade-off six months ago. Here's what you chose.",
        desc: "A structured log of the options, trade-offs, and outcomes. Over time, a personal record of how you actually decide — so the next call is faster, and better.",
        pills: ["Decision journal", "Surfaces patterns", "Trade-off templates"] },
    ],
  },
  {
    name: "Money",
    icon: "target",
    color: "#F2C94C",
    soft: "#FFF3CD",
    modules: [
      { name: "Finance", color: "#F2C94C", soft: "#FFF3CD", wide: true,
        quote: "Your savings rate dropped 8% this month. Here's exactly where it went.",
        desc: "Every transaction categorised the moment it lands. No manual entry, no end-of-month panic. The full financial picture in real time — income, spending, savings rate, and where you're trending.",
        pills: ["Auto-categorisation", "Real-time savings rate", "Trend alerts", "Daily picture"] },
      { name: "Subscriptions", color: "#F2C94C", soft: "#FFF3CD",
        quote: "You're paying for 6 things you haven't used this month. Total: $143.",
        desc: "Forgotten subscriptions quietly drain thousands a year. LIFE finds every recurring charge, tracks usage, flags price hikes. Average user uncovers $100+/month.",
        pills: ["Finds forgotten charges", "Flags price hikes", "Avg. $100+/mo recovered"] },
    ],
  },
  {
    name: "Wellbeing",
    icon: "pulse",
    color: "#A7D7C5",
    soft: "#E8F5F0",
    modules: [
      { name: "Health & Fitness", color: "#A7D7C5", soft: "#E8F5F0", wide: true,
        quote: "Your recovery score is low. LIFE moved your evening workout to Thursday.",
        desc: "Workouts, vitals, nutrition and mindfulness — all connected into one health picture that adapts to you. Syncs with Fitbit, Garmin, Oura, Strava, Withings.",
        pills: ["5 wearables synced", "Recovery-aware scheduling", "Adjusts in real time"] },
      { name: "Goals", color: "#F2A07B", soft: "#FCDDD2",
        quote: "Your Q2 goal is 3 weeks behind. Here's the 20-minute action that catches you up.",
        desc: "LIFE breaks your goals into weekly milestones, links every relevant habit and task, and pings you the moment you drift.",
        pills: ["Weekly milestones", "Habit linking", "AI check-ins"] },
      { name: "Learning", color: "#D4A0A0", soft: "#F5E6E6",
        quote: "You've been meaning to finish that book for 6 weeks. 18 minutes today gets you there.",
        desc: "Books, articles, courses, podcasts — all in one library. AI surfaces what to read next based on your goals, and connects insights across modules.",
        pills: ["Unified library", "Goal-linked reading", "Insight linking"] },
      { name: "Periodic Reviews", color: "#F2A07B", soft: "#FCDDD2",
        quote: "Here's your week in review — generated before you even open the app.",
        desc: "Daily, weekly, monthly and quarterly retrospectives — written automatically by AI from your actual activity. The insight of journalling, without the discipline of journalling.",
        pills: ["Auto-generated", "Drift detection", "Quarterly view"] },
      { name: "Progress & XP", color: "#F2A07B", soft: "#FCDDD2",
        quote: "Level 7 in Focus. 4 XP from your next achievement.",
        desc: "Every meaningful action earns XP across six life domains. Quest board, achievements, streak tracking — gamified gently, never gimmicky.",
        pills: ["6 domains", "Achievements", "Quest board"] },
      { name: "Behaviour Insights", color: "#F2A07B", soft: "#FCDDD2",
        quote: "You make your worst spending decisions Thursday evenings. Here's the pattern.",
        desc: "Honest signals, not motivational noise. When you're sharpest, which habits stack, which conditions precede your best weeks. The self-knowledge that used to take a therapist a year.",
        pills: ["Peak mapping", "Habit correlation", "Weekly digest"] },
    ],
  },
  {
    name: "Life",
    icon: "chat",
    color: "#C3B1E1",
    soft: "#EDE7F6",
    modules: [
      { name: "Outings", color: "#89C2D9", soft: "#E1F0F7", wide: true,
        quote: "Free Saturday. Based on your preferences and budget, here are three plans worth doing.",
        desc: "Stop losing weekends to indecision. LIFE learns what you enjoy, who you like spending time with, what your schedule and budget can handle — then surfaces concrete plans.",
        pills: ["Personalised plans", "Budget-aware", "Group coordination", "Preference learning"] },
      { name: "Social", color: "#C3B1E1", soft: "#EDE7F6",
        quote: "You haven't connected with Marcus in 3 months. He's got a big presentation next week.",
        desc: "Relationships erode in the gaps between intentions. LIFE flags who you've been meaning to reconnect with, before the silence gets awkward.",
        pills: ["Activity tracking", "Follow-up nudges", "Important dates"] },
      { name: "Travel", color: "#89C2D9", soft: "#E1F0F7",
        quote: "Your flight lands at 11pm. LIFE's already blocked recovery time Thursday.",
        desc: "Itineraries, documents, timezone health adjustments, flight tracking — all in one place. Synced to your calendar and shared with whoever you're travelling with.",
        pills: ["Itineraries + docs", "Timezone alerts", "Calendar sync"] },
      { name: "Content", color: "#89C2D9", soft: "#E1F0F7",
        quote: "Your next batch day is Tuesday. LIFE has 4 ideas ready, based on what's been performing.",
        desc: "For creators who need to ship consistently. Idea capture, batch scheduling, AI repurposing across formats. Less planning, more making.",
        pills: ["Pipeline management", "AI repurposing", "Publishing calendar"] },
      { name: "News", color: "#89C2D9", soft: "#E1F0F7",
        quote: "3 stories relevant to your work this week. Everything else: filtered.",
        desc: "The firehose isn't information — it's anxiety. LIFE curates by topics that matter to your goals, tracks sentiment shifts, delivers a single daily briefing.",
        pills: ["Topic curation", "Sentiment trends", "Daily briefing"] },
    ],
  },
];

const ModuleCard = ({ m }) => (
  <div className={`module ${m.wide ? "wide" : ""}`}
       style={{ "--m-strong": m.color, "--m-soft": m.soft }}
       data-reveal>
    <div className="module-inner">
      <div className="module-dot"></div>
      <div className="module-name">{m.name}</div>
      <div className="module-quote" style={{ borderLeftColor: m.color, background: m.soft }}>
        {m.quote}
      </div>
      <div className="module-desc">{m.desc}</div>
      <div className="module-pills">
        {m.pills.map((p, i) => <span key={i} className="pill-chip">{p}</span>)}
      </div>
    </div>
  </div>
);

const Pillar = ({ p, idx }) => (
  <div className="pillar">
    <div className="pillar-head">
      <div className="pillar-tag">
        <span className="dot" style={{ background: p.color }}></span>
        <Icon name={p.icon} size={16} />
        <span>{p.name}</span>
      </div>
      <div className="pillar-count">Pillar {String(idx + 1).padStart(2, "0")} · {p.modules.length} areas</div>
    </div>
    <div className="bento">
      {p.modules.map((m, i) => <ModuleCard key={i} m={m} />)}
    </div>
  </div>
);

const SeventeenAreas = () => (
  <section className="section" id="system" style={{ background: "#F3EEE2", paddingTop: 0 }}>
    <Marquee />
    <div className="container" style={{ paddingTop: "clamp(80px, 10vw, 120px)" }}>
      <div className="kicker" data-reveal><span className="kicker-dot"></span>Everything that matters, in one place</div>
      <h2 className="h-section" data-reveal style={{ marginTop: 16 }}>17 areas. One calm home.</h2>
      <p className="lead" data-reveal style={{ marginTop: 22, color: "#2D3436" }}>
        Each area works on its own. They work even better together. Here's exactly what you get.
      </p>
      {PILLARS.map((p, i) => <Pillar key={p.name} p={p} idx={i} />)}
    </div>
  </section>
);

// ── Marquee ─────────────────────────────────────────────────────────
const MARQUEE_ITEMS = ["Calendar", "Tasks", "Email", "Decisions", "Finance", "Subscriptions", "Health", "Goals", "Learning", "Reviews", "XP", "Insights", "Outings", "Social", "Travel", "Content", "News"];

const Marquee = () => {
  const items = [...MARQUEE_ITEMS, ...MARQUEE_ITEMS];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.map((m, i) => (
          <span className="marquee-item" key={i}>
            <span>{m}</span>
            <span className="marquee-dot"></span>
          </span>
        ))}
      </div>
    </div>
  );
};

window.ThreeMistakes = ThreeMistakes;
window.SeventeenAreas = SeventeenAreas;