/* global React, useTokens, Eyebrow, Btn, Pill, Icon */
const { useState: useStateS } = React;

/* ================================================================
   LANDING / HERO
================================================================ */
function Landing() {
  const { navigate } = useTokens();
  return (
    <div className="screen">
      <section className="hero">
        <div className="wrap">
          <div style={{ maxWidth: 720 }}>
            <Eyebrow>A confidential resource for compulsive token use</Eyebrow>
            <h1>Are you a <em>token</em> addict?</h1>
            <p className="hero-sub">
              You start each session promising it'll be your last prompt. It is never your last prompt.
              TokenAnon helps you recognize the signs, ration with dignity, and learn to live within your context window — one message at a time.
            </p>
            <div className="hero-cta">
              <Btn size="lg" onClick={() => navigate("quiz")}>Take the confidential assessment <Icon name="arrow" size={17} /></Btn>
              <Btn variant="ghost" size="lg" onClick={() => navigate("symptoms")}>See the warning signs</Btn>
            </div>
            <div className="hero-note"><Icon name="shield" size={15} /> Takes 2 minutes · anonymous · no card, no login, no judgment</div>
          </div>
        </div>
      </section>

      {/* stat band */}
      <div className="wrap">
        <div className="statband">
          <div className="stat">
            <div className="stat-num">4 in 5</div>
            <div className="stat-label">power users show at least one sign of context dependency</div>
          </div>
          <div className="stat">
            <div className="stat-num">4.2 min</div>
            <div className="stat-label">average time between saying "last prompt" and the next prompt</div>
          </div>
          <div className="stat">
            <div className="stat-num">0</div>
            <div className="stat-label">users who were, on reflection, "just optimizing"</div>
          </div>
        </div>
      </div>

      {/* the cycle */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <Eyebrow>You are not broken</Eyebrow>
            <h2>The dependency cycle is familiar to us all</h2>
            <p>It rarely starts with a problem. It starts with a perfectly reasonable question, asked at 11pm, that absolutely could have waited until morning.</p>
          </div>
          <div className="grid-2" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
            {[
              ["01", "The Promise", "\u201cJust one quick thing, then I'll close the tab.\u201d"],
              ["02", "The Spiral", "Seventeen follow-ups later, you are refactoring a file you didn't open."],
              ["03", "The Reckoning", "The usage banner appears. A cold feeling settles in your chest."],
              ["04", "The Bargain", "\u201cIf I keep prompts short, I can make it to the reset.\u201d You cannot."],
            ].map(([n, t, d]) => (
              <div key={n} className="card" style={{ padding: "26px 24px" }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 14, color: "var(--sage-deep)", fontWeight: 600 }}>{n}</div>
                <h3 style={{ fontSize: 20, margin: "10px 0 8px" }}>{t}</h3>
                <p style={{ fontSize: 14.5, color: "var(--muted)" }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* pathways */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <Eyebrow>Where to begin</Eyebrow>
            <h2>Recovery looks different for everyone</h2>
          </div>
          <div className="tool-grid">
            {[
              ["heart", "Recognize the signs", "Honest, gentle warning signs — read them alone, in a private tab, where no one can see your reaction.", "symptoms"],
              ["leaf", "Take the assessment", "Eight questions to locate yourself on the Context Dependency Scale\u2122. No wrong answers, only concerning ones.", "quiz"],
              ["clock", "Learn to ration", "Evidence-adjacent tools for stretching a dwindling balance across an entire evening.", "tools"],
              ["phone", "Talk to someone", "Our counselors have all been there. Some are there right now, in another tab.", "counseling"],
            ].map(([ic, t, d, dest]) => (
              <div key={t} className="card tool-card" style={{ cursor: "pointer" }} onClick={() => navigate(dest)}>
                <div className="tool-icon"><Icon name={ic} size={22} /></div>
                <h3>{t}</h3>
                <p style={{ flex: 1 }}>{d}</p>
                <div style={{ marginTop: 18, color: "var(--sage-deep)", fontWeight: 600, fontSize: 14.5, display: "flex", alignItems: "center", gap: 8 }}>
                  Begin here <Icon name="arrow" size={15} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* reassurance band */}
      <section className="sec">
        <div className="wrap">
          <div className="card" style={{ padding: "56px 56px", background: "var(--sage-tint)", borderColor: "var(--sage-soft)", textAlign: "center" }}>
            <div style={{ maxWidth: 640, margin: "0 auto" }}>
              <Icon name="leaf" size={32} />
              <h2 style={{ fontSize: 34, margin: "18px 0 14px" }}>The tokens will replenish. You will be okay.</h2>
              <p style={{ fontSize: 18, color: "var(--muted)" }}>
                There is no shame in closing the laptop. The model is not going anywhere. The reset is, statistically, sooner than it feels.
              </p>
              <div style={{ marginTop: 28 }}><Btn size="lg" onClick={() => navigate("quiz")}>Start your assessment</Btn></div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ================================================================
   SYMPTOMS / WARNING SIGNS
================================================================ */
const SYMPTOMS = [
  ["You begin messages with \u201cquick question\u201d to feel like it costs less.", "denial"],
  ["You feel a cold dread when the context window crosses 80%.", "anxiety"],
  ["You've said \u201cthis is my last prompt\u201d three or more times in one sitting.", "bargaining"],
  ["You draft prompts in a notes app to \u201cuse them efficiently later.\u201d", "ritual"],
  ["You ration tokens before bed so there's \u201csome left for the morning.\u201d", "hoarding"],
  ["You've switched to a smaller model purely out of guilt, then switched back.", "relapse"],
  ["You feel personally addressed by the phrase \u201capproaching usage limit.\u201d", "shame"],
  ["You've considered a second account. You may already have a second account.", "escalation"],
  ["You refresh the reset timer the way others check the weather.", "compulsion"],
  ["You apologize to the model for wasting its time, then ask anyway.", "guilt"],
];

function Symptoms() {
  const { navigate } = useTokens();
  const [on, setOn] = useStateS({});
  const toggle = (i) => setOn((s) => ({ ...s, [i]: !s[i] }));
  const count = Object.values(on).filter(Boolean).length;
  return (
    <div className="screen">
      <section className="sec" style={{ paddingTop: 64 }}>
        <div className="wrap">
          <div className="sec-head" style={{ maxWidth: 720 }}>
            <Eyebrow>Warning signs</Eyebrow>
            <h2>Quietly check the ones that feel familiar</h2>
            <p>No one is watching. This list is not stored. Tick honestly — the only person you'd be optimizing for is yourself.</p>
          </div>

          <div className="symptoms">
            {SYMPTOMS.map(([text, tag], i) => (
              <div key={i} className={`symptom${on[i] ? " on" : ""}`} onClick={() => toggle(i)}>
                <div className="symptom-check"><Icon name="check" size={15} /></div>
                <div>
                  <div className="symptom-text">{text}</div>
                  <div className="symptom-tag">// {tag}</div>
                </div>
              </div>
            ))}
          </div>

          {/* live tally */}
          <div className="card" style={{ marginTop: 28, padding: "26px 30px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 26, color: count >= 4 ? "var(--clay-deep)" : "var(--sage-deep)" }}>
                {count === 0 ? "Nothing checked — yet" :
                 count <= 3 ? `${count} checked · mild context dependency` :
                 count <= 6 ? `${count} checked · functional dependency` :
                 `${count} checked · we'd like you to keep reading`}
              </div>
              <p style={{ fontSize: 14.5, color: "var(--muted)", marginTop: 4 }}>
                {count === 0 ? "Take your time. Denial is the first token-saving measure."
                  : count <= 3 ? "Common, manageable, and nothing to be ashamed of. Awareness is most of the work."
                  : "This is more common than you'd think. The assessment can help you understand it."}
              </p>
            </div>
            <Btn onClick={() => navigate("quiz")}>Take the full assessment <Icon name="arrow" size={16} /></Btn>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ================================================================
   TESTIMONIALS
================================================================ */
const TESTIMONIALS = [
  ["I used to ration my last 500 tokens like they were oxygen. Now I just\u2026 close the laptop. Most nights.", "Marcus T.", "142 days context-sober", "M"],
  ["My breakthrough was admitting that the second account was not, in fact, \u201cfor work.\u201d", "Priya R.", "term-by-term recovery", "P"],
  ["I told my model \u201cthis is the last one\u201d eleven times. My counselor helped me hear myself.", "Devin K.", "90 days · one model only", "D"],
  ["I kept a prompt I'd been saving for three weeks. I finally sent it. It was a typo fix.", "Lena O.", "learning to let go", "L"],
  ["Group reminded me the reset always comes. I no longer set an alarm for it.", "Sam W.", "210 days · sponsor", "S"],
  ["I used to draft prompts in my Notes app on the bus. Now I just look out the window.", "Theo M.", "61 days context-sober", "T"],
];

function Testimonials() {
  const { navigate } = useTokens();
  return (
    <div className="screen">
      <section className="sec" style={{ paddingTop: 64 }}>
        <div className="wrap">
          <div className="sec-head" style={{ maxWidth: 720 }}>
            <Eyebrow>Stories of recovery</Eyebrow>
            <h2>People who learned to stop at "good enough"</h2>
            <p>Shared anonymously, with permission. Names changed. Token counts unverified but emotionally true.</p>
          </div>
          <div className="testi-grid">
            {TESTIMONIALS.map(([q, name, meta, av], i) => (
              <div key={i} className="testi">
                <div className="testi-quote">"{q}"</div>
                <div className="testi-who">
                  <div className="testi-avatar">{av}</div>
                  <div>
                    <div className="testi-name">{name}</div>
                    <div className="testi-meta">{meta}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="card" style={{ marginTop: 32, padding: "40px 44px", textAlign: "center", background: "var(--sage-tint)", borderColor: "var(--sage-soft)" }}>
            <h3 style={{ fontSize: 26 }}>Your story could go here one day</h3>
            <p style={{ fontSize: 16.5, color: "var(--muted)", marginTop: 10, maxWidth: 480, marginInline: "auto" }}>Recovery is not linear. It is, however, eventually loggable.</p>
            <div style={{ marginTop: 22 }}><Btn onClick={() => navigate("counseling")}>Join a support group</Btn></div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Landing, Symptoms, Testimonials });