/* global React */
/* sections-e.jsx — five conversion sections
   1. ProgrammeTimeline — the 12-month journey
   2. Testimonials      — [TESTIMONIAL PLACEHOLDER] cards
   3. BurnoutCheck      — 90-second self-assessment
   4. WhyPausa          — explicit differentiators
   5. FAQ               — objection handling accordion
*/
const { useState: useSAState } = React;

/* ================================================================
   1 · PROGRAMME TIMELINE
   ================================================================ */
const TL_PHASES = [
  {
    phase: "Phase 1",
    label: "Baseline",
    color: "oklch(51% 0.07 105)",
    dotBg: "oklch(91% 0.06 88)",
    steps: [
      { period: "~3 weeks before", tag: "Baseline", title: "Remote kit", icon: "lab",
        img: "pausa/img/baseline-kit.png", imgSlot: true,
        imgAlt: "The Pausa Baseline kit — ring, blood panel and more",
        desc: "A wearable ring, an at-home clinical blood panel and optional add-ons — all delivered to your door. Sleep, HRV and recovery collected passively over two to three weeks; a focused panel (cardiovascular, metabolic, hormonal and inflammatory markers) posted back in prepaid packaging." },
      { period: "~3 weeks before", tag: "Baseline", title: "Measuring mental clarity and emotional resilience", icon: "doc",
        img: "pausa/img/baseline-person.png", imgSlot: false,
        imgAlt: "Leader reviewing personalised Pausa baseline results — biomarkers, HRV, sleep and mental clarity",
        desc: "Validated questionnaires for stress, burnout and resilience, plus a 15-minute cognitive baseline. One welcome call to set you up. Your facilitator studies everything before you arrive." },
    ],
  },
  {
    phase: "Phase 2",
    label: "Pausa Reset",
    color: "var(--moss)",
    dotBg: "oklch(90% 0.06 128)",
    steps: [
      { period: "Month 1", tag: "Pausa Reset", title: "3 days near Lisbon", icon: "leaf",
        desc: "Fully offline. Your facilitator walks you through your Baseline results in person. Expert-facilitated workshops identify your drains and teach the Behaviour Model. Shared challenge and time in nature. You leave with a personalised roadmap of healthy routines — designed for your worst weeks, not your best." },
    ],
  },
  {
    phase: "Phase 3",
    label: "Pausa Circle",
    color: "oklch(44% 0.09 175)",
    dotBg: "oklch(89% 0.07 160)",
    steps: [
      { period: "Months 2–3",  tag: "Pausa Circle", title: "Monthly gatherings begin",    icon: "habit",
        desc: "Monthly 90-min expert-facilitated Circle sessions with your cohort. One focused weekly action built around your Baseline results. Topics: Sleep & recovery, Burnout & stress regulation, Mindfulness, Movement, Nutrition. Peer accountability from leaders under the same pressure." },
      { period: "Day 90",      tag: "Recheck",      title: "Day-90 recheck",              icon: "chart",
        desc: "A focused re-test at the end of the Integration phase: HRV, the cognitive battery and a small biomarker subset. A clear before/after — objective evidence that the work is real. Your roadmap is recalibrated for the months ahead." },
      { period: "Months 4–11", tag: "Pausa Circle", title: "Routines deepening",          icon: "habit",
        desc: "Habits from Integration compound. Monthly Circle sessions shift from building routines to refining them under real pressure. Offline shared experiences continue — time in nature, shared challenge, structured reflection." },
      { period: "Month 12",    tag: "Report",       title: "Full annual re-assessment",   icon: "doc",
        desc: "The complete baseline repeated. A full before/after across four dimensions of wellbeing — closing the loop and showing exactly how far you've come in twelve months." },
    ],
  },
];

function TlIcon({ k }) {
  const paths = {
    lab:   <><path d="M9 3h6M12 3v7l3.5 6a5 5 0 1 1-7 0L12 10"/><path d="M9 15h6"/></>,
    leaf:  <><path d="M5 19c0-8 5-13 14-13 0 9-5 14-14 13z"/><path d="M5 19c3.5-5 7-7.5 11-9"/></>,
    habit: <><path d="M12 21c5-2.6 7.5-6.2 7.5-10.4A4.1 4.1 0 0 0 12 7.7a4.1 4.1 0 0 0-7.5 2.9C4.5 14.8 7 18.4 12 21z"/><path d="M9.4 11.2l1.9 1.9 3.6-3.8"/></>,
    chart: <><path d="M4 19V5M4 19h16"/><path d="M7.5 15l3.3-4 2.7 2.4L19 7"/></>,
    doc:   <><rect x="5" y="3.5" width="14" height="17" rx="2"/><path d="M9 8h6M9 12h6M9 16h3.5"/></>,
  };
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
      strokeLinecap="round" strokeLinejoin="round" width="17" height="17" aria-hidden="true">
      {paths[k]}
    </svg>
  );
}

function ProgrammeTimeline() {
  return (
    <section className="tl-section" id="programme">
      <div className="wrap">
        <div className="tl-head">
          <span className="kicker reveal">The 12-month journey</span>
          <h2 className="h2 reveal">What actually happens, <em>month by month.</em></h2>
          <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
            No ambiguity. Here is exactly what you and your team do — and when. Total active time: approx. 8–10 days across the year.
          </p>
        </div>
        <div className="tl-phases">
          {TL_PHASES.map((ph, pi) => (
            <React.Fragment key={ph.phase}>
              <div className="tl-phase-block reveal" style={{ transitionDelay: `${pi * 80}ms` }}>
                <div className="tl-phase-label">
                  <span className="tl-phase-pill" style={{ background: ph.color }}>{ph.phase}</span>
                  <span className="tl-phase-name">{ph.label}</span>
                </div>
                <div className="tl-steps">
                  {ph.steps.map((s, i) => (
                    <div className={pi === 0 && i === 0 ? "tl-step tl-step--split" : "tl-step"}
                      style={pi === 0 && i === 0 ? {display:"grid",gridTemplateColumns:"44px 1fr 1fr",gap:"0 24px",alignItems:"center"} : {}}
                      key={s.title}>
                      <div className="tl-rail">
                        <div className="tl-dot" style={{ background: ph.dotBg, color: "var(--moss)" }}><TlIcon k={s.icon} /></div>
                        {i < ph.steps.length - 1 && <div className="tl-line" aria-hidden="true"></div>}
                      </div>
                      <div className="tl-body">
                        <div className="tl-meta">
                          <span className="tl-period">{s.period}</span>
                          <span className="tl-tag">{s.tag}</span>
                        </div>
                        <h3 className="tl-title">{s.title}</h3>
                        <p className="tl-desc">{s.desc}</p>
                        {pi === 0 && i === 1 && s.img && (
                          <figure className="tl-step-img-full">
                            <img src={s.img} alt={s.imgAlt} loading="lazy" className="tl-step-person-full" />
                          </figure>
                        )}
                      </div>
                      {pi === 0 && i === 0 && s.img && (
                        <figure className="tl-step-img" style={{margin:0,borderRadius:"14px",overflow:"hidden",aspectRatio:"3/2",background:"oklch(91% 0.02 140)",gridColumn:3,gridRow:1}}>
                          {s.imgSlot
                            ? <image-slot id="baseline-kit" shape="rounded" radius="12" src={s.img} placeholder={s.imgAlt} style={{display:"block",width:"100%",height:"100%"}}></image-slot>
                            : <img src={s.img} alt={s.imgAlt} loading="lazy" className="tl-step-person" style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}} />}
                        </figure>
                      )}
                    </div>
                  ))}
                </div>
              </div>
              {pi === 1 && (
                <div className="tl-video reveal">
                  <p className="tl-video-label">See what to expect from Pausa Reset</p>
                  <div className="tl-video-wrap">
                    <video
                      src="pausa/video/pausa-reset.mp4"
                      playsInline
                      preload="metadata"
                      autoPlay
                      muted
                      loop
                      style={{ width: "100%", height: "100%", display: "block", objectFit: "cover" }}
                    >
                      Your browser does not support video playback.
                    </video>
                  </div>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   2 · TESTIMONIALS  [TESTIMONIAL PLACEHOLDER — replace with real quotes]
   ================================================================ */
const TESTIMONIALS = [
  {
    id: "t-igor-pavlov",
    img: "pausa/img/testimonial-igor-pavlov.jpg",
    quote: "Three days without a phone, in nature, with people under the same kind of pressure. By day two something had shifted — I wasn't performing any more. The breathwork sessions were the part I least expected to use. I still use them. Every week.",
    name: "Igor Pavlov",
    role: "VP of Operations · Evy | ex-BlaBlaCar",
    result: "Pausa Reset — founding cohort",
    linkedin: "https://www.linkedin.com/in/mrigorpavlov/",
  },
  {
    id: "t-felix-baumann",
    img: "pausa/img/testimonial-felix-baumann.jpg",
    quote: "I came in running on empty and not quite aware of it. The behaviour model was genuinely mind-blowing — not because it was complicated, but because it was so obvious once you saw it.",
    name: "Felix Baumann",
    role: "CEO & CTO · Wohnen im Alter",
    result: "Pausa Reset — founding cohort",
    linkedin: "https://www.linkedin.com/in/felix-baumann-91649773/",
  },
  {
    id: "t-igor-myrgorodskyi",
    img: "pausa/img/testimonial-igor-myrgorodskyi.jpg",
    quote: "I came in sceptical. I left with clarity on what to do next — not vaguely, but specifically. Being in nature, offline, made space for signals I'd been ignoring for months.",
    name: "Igor Myrgorodskyi",
    role: "VP Business Operations · adjoe",
    result: "Pausa Reset — founding cohort",
    linkedin: "https://www.linkedin.com/in/igor-myrgorodskyi-80201077/",
  },
];

function LinkedInIcon() {
  return (
    <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
  );
}

function TestimonialCard({ t, i }) {
  return (
    <div className="test-card reveal" key={t.id} style={{ transitionDelay: `${i * 90}ms` }}>
      <div className="test-avatar-wrap">
        <img src={t.img} alt={t.name} className="test-avatar-img" />
      </div>
      <div className="test-content">
        <div className="test-identity">
          <span className="test-name">{t.name}</span>
          <span className="test-role">{t.role}</span>
        </div>
        <p className="test-body">"{t.quote}"</p>
        <div className="test-footer">
          <span className="test-result-badge">
            <svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5L6.4 12L13 4.5"/></svg>
            {t.result}
          </span>
          <a href={t.linkedin} target="_blank" rel="noopener noreferrer" className="test-linkedin" aria-label={`${t.name} on LinkedIn`}>
            <LinkedInIcon />
          </a>
        </div>
      </div>
    </div>
  );
}

function Testimonials() {
  return (
    <section className="testimonials" id="testimonials">
      <div className="wrap">
        <div className="test-head">
          <span className="kicker reveal">From Pausa Reset</span>
          <h2 className="h2 reveal">What leaders say <em>after three days in nature.</em></h2>
        </div>
        <div className="test-grid">
          {TESTIMONIALS.map((t, i) => (
            <TestimonialCard key={t.id} t={t} i={i} />
          ))}
        </div>
        <p className="test-disclaimer reveal">Pausa Reset founding cohort. All participants are now in Pausa Circle.</p>
      </div>
    </section>
  );
}

/* ================================================================
   3 · BURNOUT SELF-CHECK
   ================================================================ */
const SA_QS = [
  { id: "q1", q: "How rested do you feel when you wake up?",                                  lo: "Exhausted",       hi: "Fully rested" },
  { id: "q2", q: "How often can you focus deeply for 2+ hours without interruption?",          lo: "Rarely",          hi: "Every day" },
  { id: "q3", q: "How is your physical energy by end of day?",                                 lo: "Completely drained", hi: "Still energised" },
  { id: "q4", q: "How connected do you feel to what energises you in your work?",              lo: "Disconnected",    hi: "Fully connected" },
  { id: "q5", q: "How much of your time goes to strategic thinking vs. firefighting?",         lo: "Almost none",     hi: "Most of it" },
];

const SA_LEVELS = [
  { min: 21, label: "Low risk",      tone: "good",  desc: "Your baseline looks healthy. A Pausa check-up would confirm that with hard data — and build margin in before it shifts.",                              cta: "Book a call — see what your biomarkers say" },
  { min: 15, label: "Moderate risk", tone: "watch", desc: "Some depletion signals. This is the ideal window to act — before it compounds into something harder to reverse.",                                    cta: "Book a call — this is exactly when Pausa works best" },
  { min: 9,  label: "High risk",     tone: "act",   desc: "Clear signs of sustained depletion. Without an intervention this typically deepens over the next 6 months — it rarely self-corrects.",             cta: "Book a call — we've helped leaders at this stage" },
  { min: 0,  label: "Critical",      tone: "crit",  desc: "Burnout-level signals. A 30-minute conversation costs nothing and could change your next 12 months. Please don't wait.",                           cta: "Book a call now — this needs attention" },
];

function BurnoutCheck() {
  const [ans, setAns] = useSAState({});
  const [done, setDone] = useSAState(false);
  const answered = Object.keys(ans).length;
  const allDone = answered === SA_QS.length;
  const score = allDone ? Object.values(ans).reduce((a, b) => a + b, 0) : 0;
  const level = SA_LEVELS.find((l) => score >= l.min) || SA_LEVELS[SA_LEVELS.length - 1];

  return (
    <section className="sa-section" id="self-check">
      <div className="wrap">
        <div className="sa-head">
          <span className="kicker reveal">90-second load check</span>
          <h2 className="h2 reveal">Where are you <em>right now?</em></h2>
          <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
            Five questions. No email required. An honest read on your burnout risk today.
          </p>
        </div>
        <div className="sa-card reveal">
          {!done ? (
            <>
              <div className="sa-questions">
                {SA_QS.map((q) => (
                  <div className="sa-q" key={q.id}>
                    <p className="sa-q-text">{q.q}</p>
                    <div className="sa-scale">
                      <span className="sa-lbl sa-lbl-lo">{q.lo}</span>
                      <div className="sa-dots">
                        {[1,2,3,4,5].map((v) => (
                          <button key={v} type="button"
                            className={"sa-dot" + (ans[q.id] === v ? " on" : "")}
                            onClick={() => setAns((a) => ({ ...a, [q.id]: v }))}
                            aria-label={`Score ${v} for: ${q.q}`}>{v}</button>
                        ))}
                      </div>
                      <span className="sa-lbl sa-lbl-hi">{q.hi}</span>
                    </div>
                  </div>
                ))}
              </div>
              <div className="sa-progress-wrap">
                <div className="sa-progress-bar"><span style={{ width: (answered / SA_QS.length * 100) + "%" }}></span></div>
                <span className="sa-progress-label">{answered} of {SA_QS.length} answered</span>
              </div>
              <button className={"sa-submit" + (allDone ? " ready" : "")} disabled={!allDone}
                onClick={() => allDone && setDone(true)}>
                {allDone ? "See my result →" : `Answer all ${SA_QS.length} questions to continue`}
              </button>
            </>
          ) : (
            <div className={"sa-result sa-" + level.tone}>
              <div className="sa-result-top">
                <div className="sa-result-header">
                  <span className="sa-result-label">{level.label}</span>
                  <span className="sa-result-score">{score} / 25</span>
                </div>
                <div className="sa-result-bar"><span style={{ width: (score / 25 * 100) + "%" }}></span></div>
              </div>
              <p className="sa-result-desc">{level.desc}</p>
              <button className="btn btn-primary" onClick={() => window.__pausaBook && window.__pausaBook()}>
                {level.cta}<span className="dot"></span>
              </button>
              <button className="sa-retake" onClick={() => { setAns({}); setDone(false); }}>↺ Retake</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   4 · WHY PAUSA — explicit differentiators
   ================================================================ */
const WHY_ITEMS = [
  {
    id: "risk",
    num: "01",
    title: "A performance risk — not a wellness perk",
    body: "Pausa frames leadership strain as what it is: a risk to judgment, decision quality, team stability, and retention. Not a soft benefit. Not an HR checkbox. A performance protection system for the people your organisation depends on most.",
  },
  {
    id: "teams",
    num: "02",
    title: "Built for teams, not just individuals",
    body: "Most executive health programmes treat leaders in isolation. Pausa works with the team as a system — mapping how load, habits, and recovery operate across the group, and where collective risk is highest.",
  },
  {
    id: "stack",
    num: "03",
    title: "The full stack: assess, reset, integrate",
    body: "Competitors offer one piece — a offsite, a coach, or an app. Pausa combines all four: a full assessment, structured behaviour change, an immersive offsite near Lisbon, and 12 months of integration. Each element makes the others stick.",
  },
  {
    id: "offsite",
    num: "04",
    title: "An offsite designed to interrupt load",
    body: "Three days in nature, 30 minutes from Lisbon. Not a conference. Not a spa weekend. A carefully structured environment with shared challenge, time outdoors, and serious work together — where the nervous system can downshift and the year ahead gets designed, not just discussed.",
  },
  {
    id: "community",
    num: "05",
    title: "Community that goes beyond a call",
    body: "Pausa's peer community includes structured online touchpoints and offline shared experiences — outdoor challenges, trail runs, time in nature. Not a mastermind. Not a 'tribe.' A serious peer group with shared context, shared data, and shared pressure.",
  },
];

function WhyPausa() {
  return (
    <section className="why-pausa" id="why">
      <div className="wrap">
        <div className="why-head">
          <span className="kicker reveal">Why Pausa</span>
          <h2 className="h2 reveal">What makes this different <em>from everything else.</em></h2>
        </div>
        <div className="why-grid">
          {WHY_ITEMS.map((item, i) => (
            <div className="why-card reveal" key={item.id} style={{ transitionDelay: `${i * 70}ms` }}>
              <span className="why-num">{item.num}</span>
              <h3 className="why-title">{item.title}</h3>
              <p className="why-body">{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   5 · FAQ — objection handling accordion
   ================================================================ */
const FAQ_ITEMS = [
  {
    q: "What does the Baseline phase involve?",
    a: "Before the retreat, each leader receives a home kit: a wearable ring worn for ~2 weeks for sleep, HRV and recovery data; an at-home finger-prick blood panel covering cardiovascular, metabolic, stress-hormone and inflammatory markers, processed by our accredited clinical partners; and optional add-ons. Two short online steps follow — validated questionnaires for stress, burnout and resilience, and a 15-minute cognitive baseline covering reaction time, working memory and focus. A single welcome call is the only live commitment. Your facilitator studies the full picture before you arrive at the Reset, so the days together start from insight rather than from scratch.",
  },
  {
    q: "Is this a medical service?",
    a: "No. Pausa is a performance wellbeing programme, not a medical service. Our biomarker testing is run by an accredited clinical laboratory partner — results are reviewed by a clinician who flags anything requiring medical attention and refers you if needed. Pausa is not a substitute for medical care.",
  },
  {
    q: "Is this therapy?",
    a: "No. Pausa is not therapy and it's not coaching. It's a structured performance system: objective data, behaviour design, and a peer community. We work with how your body and mind are actually functioning under pressure — not with your personal history or psychology. For leaders who want therapeutic support, our partner Pillow can help.",
  },
  {
    q: "How much time does it take?",
    a: "Approximately 8–10 days of active time across the year. This breaks down as: 3 days for the offsite in month 1; roughly 90 minutes per month for Circle sessions; and one focused action per week (most take under 15 minutes). The programme is designed around your real schedule, not an idealised one.",
  },
  {
    q: "What happens with our data?",
    a: "Your health data is yours. Biomarker results are encrypted end-to-end, hosted on health-data-compliant servers in Europe, and access-controlled at all times. Your organisation never sees individual results — only anonymised team-level aggregates, if you choose to share them. We are fully GDPR compliant and ISO 27001 aligned.",
  },
  {
    q: "Why not just coaching or gym benefits?",
    a: "Coaching works on behaviour and mindset but has no physiological data — a coach can't see your cortisol levels or sleep debt. Gym benefits address physical fitness but not leadership load, decision quality, or burnout risk. Pausa combines both layers: objective data on how your body is coping, and practical tools for changing how you operate. Neither alone does what both together do.",
  },
  {
    q: "Is this just another offsite?",
    a: "No. The offsite is one part of a 12-month programme — not the whole thing. One-off offsites create temporary inspiration that fades within weeks when real pressure returns. Pausa's model is: diagnose first, reset in person, then integrate changes over 12 months with data, community, and weekly actions. The offsite interrupts chronic load and builds trust — it doesn't try to do everything.",
  },
];

function FAQ() {
  const [open, setOpen] = React.useState(null);
  return (
    <section className="faq-section" id="faq">
      <div className="wrap">
        <div className="faq-head">
          <span className="kicker reveal">Fair questions</span>
          <h2 className="h2 reveal">Straight answers to <em>fair questions.</em></h2>
        </div>
        <div className="faq-list reveal">
          {FAQ_ITEMS.map((item, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}
                aria-expanded={open === i}>
                <span>{item.q}</span>
                <span className="faq-icon" aria-hidden="true">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && <p className="faq-a">{item.a}</p>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProgrammeTimeline, Testimonials, BurnoutCheck, WhyPausa, FAQ });