/* ===========================================================
   Halvorsen — Journey + Press + Testimonials
   =========================================================== */

const JOURNEY = [
  { n: "01", t: "Initial conversation", d: "A 45-minute consultation. We listen, we examine, and — most importantly — we ask what you want your life to look like in six months.", time: "45 min", price: "£280" },
  { n: "02", t: "Imaging & second look", d: "Where indicated: in-house MRI, weight-bearing CT, dynamic ultrasound. Reviewed alongside you, in plain language.", time: "Same day", price: "Included" },
  { n: "03", t: "A written plan", d: "Every patient leaves with a written plan, three options, and a clearly named recommendation. No surprises in a corridor.", time: "Within 48 hrs", price: "—" },
  { n: "04", t: "Surgery, if surgery", d: "Performed at Cleveland Clinic London or Volvat Oslo. You meet your full team — anaesthetist, theatre lead, physiotherapist — the day before.", time: "Day case to 2 nights", price: "Quoted in plan" },
  { n: "05", t: "Rehabilitation", d: "Your physiotherapist is part of our team from day one. We do not hand you a leaflet and a phone number.", time: "6 wks – 9 mos", price: "Tiered" },
  { n: "06", t: "The handshake", d: "We discharge you on the day you return to your sport, your stage, your child's birthday party — whatever you came in to recover.", time: "Variable", price: "—" },
];

const Journey = () => {
  const [hover, setHover] = React.useState(0);
  return (
    <section id="journey" style={{ padding: "120px 32px", maxWidth: 1400, margin: "0 auto" }}>
      <div className="reveal" style={{ marginBottom: 56 }}>
        <Chapter num={5} label="Patient Journey" />
        <h2 className="serif" style={{ margin: "20px 0 0", fontSize: "clamp(36px, 4.8vw, 64px)", lineHeight: 1, letterSpacing: "-0.015em", fontWeight: 400, maxWidth: 880 }}>
          Six steps. <span style={{ fontStyle: "italic", color: "var(--sage-deep)" }}>None</span> of them are surprises.
        </h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div className="reveal">
          <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
            {JOURNEY.map((s, i) => (
              <li
                key={s.n}
                onMouseEnter={() => setHover(i)}
                onFocus={() => setHover(i)}
                tabIndex={0}
                style={{
                  display: "grid",
                  gridTemplateColumns: "60px 1fr 100px",
                  alignItems: "baseline",
                  padding: "26px 0",
                  borderTop: "1px solid var(--line)",
                  borderBottom: i === JOURNEY.length - 1 ? "1px solid var(--line)" : "none",
                  cursor: "pointer",
                  transition: "padding 320ms var(--ease)",
                  paddingLeft: hover === i ? 18 : 0,
                  background: hover === i ? "var(--bone)" : "transparent",
                }}
              >
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--sand-deep)" }}>{s.n}</span>
                <span className="serif" style={{ fontSize: 28, lineHeight: 1.15 }}>{s.t}</span>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-muted)", textTransform: "uppercase", textAlign: "right" }}>{s.time}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="reveal reveal-delay-1" style={{ position: "sticky", top: 120, alignSelf: "start" }}>
          <div style={{ border: "1px solid var(--line)", padding: 36, background: "var(--bone)" }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
              Step · {JOURNEY[hover].n}
            </div>
            <div className="serif" style={{ fontSize: 36, lineHeight: 1.1, letterSpacing: "-0.01em", marginTop: 12 }}>
              {JOURNEY[hover].t}
            </div>
            <div style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-soft)", marginTop: 20 }}>
              {JOURNEY[hover].d}
            </div>
            <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--line)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-muted)", textTransform: "uppercase" }}>Time</div>
                <div style={{ fontSize: 14, marginTop: 4 }}>{JOURNEY[hover].time}</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-muted)", textTransform: "uppercase" }}>Indicative cost</div>
                <div style={{ fontSize: 14, marginTop: 4 }}>{JOURNEY[hover].price}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- PRESS & PUBLICATIONS ---------- */
const PRESS = [
  { src: "JBJS · 2024", t: "Quadriceps tendon ACL: a 5-year cohort", k: "Lead author" },
  { src: "BBC Radio 4 · 2024", t: "On the over-medicalisation of healthy knees", k: "Interview" },
  { src: "The Times · 2023", t: "Britain's quietest orthopaedic surgeon", k: "Profile" },
  { src: "ESSKA · 2023", t: "Keynote: meniscus preservation in athletes", k: "Keynote" },
  { src: "AJSM · 2022", t: "Return-to-sport criteria, revisited", k: "Co-author" },
  { src: "Monocle · 2022", t: "Designing a clinic that doesn't feel like one", k: "Feature" },
];

const Press = () => (
  <section id="press" style={{ padding: "120px 32px", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--bone)" }}>
    <div style={{ maxWidth: 1400, margin: "0 auto" }}>
      <div className="reveal" style={{ marginBottom: 56 }}>
        <Chapter num={6} label="Press & Publications" />
        <h2 className="serif" style={{ margin: "20px 0 0", fontSize: "clamp(36px, 4.8vw, 64px)", lineHeight: 1, letterSpacing: "-0.015em", fontWeight: 400 }}>
          Selected <span style={{ fontStyle: "italic", color: "var(--sage-deep)" }}>writing</span> & talks.
        </h2>
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {PRESS.map((p, i) => (
          <li key={i} className="reveal" style={{ display: "grid", gridTemplateColumns: "200px 1fr 140px 30px", padding: "28px 0", borderTop: "1px solid var(--line)", borderBottom: i === PRESS.length - 1 ? "1px solid var(--line)" : "none", alignItems: "baseline", gap: 24, cursor: "pointer" }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--sand-deep)", textTransform: "uppercase" }}>{p.src}</span>
            <span className="serif" style={{ fontSize: 26, lineHeight: 1.2 }}>{p.t}</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-muted)", textTransform: "uppercase" }}>{p.k}</span>
            <Arrow />
          </li>
        ))}
      </ul>
    </div>
  </section>
);

/* ---------- TESTIMONIALS — "case ledger" horizontal ---------- */
const TESTIMONIALS = [
  { id: "C-2391", who: "Eliza M., 34", role: "Marathon runner, London", proc: "ACL · QT autograft", quote: "Mira was the third surgeon I saw. She was the first who told me what she wouldn't do. I ran Berlin nine months later.", tone: "sand", src: "https://images.unsplash.com/photo-1571008887538-b36bb32f4571?w=900&q=85" },
  { id: "C-1864", who: "Tobias R., 58", role: "Carpenter, Bergen", proc: "Robotic partial knee", quote: "I was promised the operation would be small and the recovery quiet. Both turned out to be true. I am back on the workshop floor.", tone: "sage", src: "https://images.unsplash.com/photo-1581595220892-b0739db3ba8c?w=900&q=85" },
  { id: "C-2105", who: "Aïcha L., 41", role: "Choreographer, Paris", proc: "Hip arthroscopy, FAI", quote: "She watched a video of me dancing before she touched my hip. That, to me, is the whole thing.", tone: "bone", src: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=900&q=85" },
  { id: "C-2702", who: "Rohan K., 22", role: "Rugby academy", proc: "Shoulder stabilisation", quote: "Honest about my odds, plain about my work. Out of the sling at week four, back in contact at month five.", tone: "ink", src: "https://images.unsplash.com/photo-1551655510-555dc3be8633?w=900&q=85" },
];

const Testimonials = () => {
  const [idx, setIdx] = React.useState(0);
  return (
    <section style={{ padding: "120px 0 120px 32px", maxWidth: 1500, margin: "0 auto" }}>
      <div className="reveal" style={{ paddingRight: 32, marginBottom: 56, display: "grid", gridTemplateColumns: "1fr auto", alignItems: "end", gap: 32 }}>
        <div>
          <Chapter num={7} label="Case Ledger" />
          <h2 className="serif" style={{ margin: "20px 0 0", fontSize: "clamp(36px, 4.8vw, 64px)", lineHeight: 1, letterSpacing: "-0.015em", fontWeight: 400, maxWidth: 880 }}>
            Patients, in their <span style={{ fontStyle: "italic", color: "var(--sage-deep)" }}>own words</span>.
          </h2>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button
            onClick={() => setIdx((i) => Math.max(0, i - 1))}
            aria-label="Previous testimonial"
            disabled={idx === 0}
            style={{ width: 48, height: 48, border: "1px solid var(--line-strong)", background: "transparent", color: "var(--ink)", cursor: "pointer", borderRadius: 999, opacity: idx === 0 ? 0.35 : 1 }}
          >
            ←
          </button>
          <button
            onClick={() => setIdx((i) => Math.min(TESTIMONIALS.length - 1, i + 1))}
            aria-label="Next testimonial"
            disabled={idx === TESTIMONIALS.length - 1}
            style={{ width: 48, height: 48, border: "1px solid var(--line-strong)", background: "var(--ink)", color: "var(--paper)", cursor: "pointer", borderRadius: 999, opacity: idx === TESTIMONIALS.length - 1 ? 0.35 : 1 }}
          >
            →
          </button>
        </div>
      </div>

      <div style={{ overflow: "hidden" }}>
        <div className="reveal" style={{ display: "flex", gap: 32, transform: `translateX(calc(${-idx} * (520px + 32px)))`, transition: "transform 700ms var(--ease)" }}>
          {TESTIMONIALS.map((t) => (
            <article key={t.id} style={{ flex: "0 0 520px", display: "flex", flexDirection: "column" }}>
              <Plate key={t.id + "-plate"} ratio="4/5" tone={t.tone} src={t.src} label={`Case · ${t.id}`} sub={t.who} />
              <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between" }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-soft)", textTransform: "uppercase" }}>{t.role}</span>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--sand-deep)", textTransform: "uppercase" }}>{t.proc}</span>
              </div>
              <blockquote className="serif" style={{ margin: "20px 0 0", fontSize: 26, lineHeight: 1.3, letterSpacing: "-0.005em", textWrap: "pretty" }}>
                "{t.quote}"
              </blockquote>
            </article>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 40, paddingRight: 32 }}>
        <div style={{ display: "flex", gap: 6 }}>
          {TESTIMONIALS.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} aria-label={`Go to testimonial ${i + 1}`} style={{ height: 2, flex: 1, maxWidth: 80, border: "none", background: i === idx ? "var(--ink)" : "var(--line-strong)", cursor: "pointer", padding: 0 }} />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Journey, Press, Testimonials });