/* global React */
const { useRef } = React;

/* ---------- reusable 3D tilt-on-hover wrapper ----------
   Mouse-only; respects reduced-motion. Children sit inside a
   preserve-3d layer that rotates toward the cursor and lifts. */
function Tilt3D({ className = "", max = 12, scale = 1.045, children }) {
  const ref = useRef(null);
  const raf = useRef(0);
  const coarse = () => window.matchMedia && (window.matchMedia("(pointer: coarse)").matches || window.matchMedia("(prefers-reduced-motion: reduce)").matches);
  const onMove = (e) => {
    const el = ref.current;
    if (!el || coarse()) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    if (raf.current) return;
    raf.current = requestAnimationFrame(() => {
      raf.current = 0;
      el.style.setProperty("--ry", ((px - 0.5) * max).toFixed(2) + "deg");
      el.style.setProperty("--rx", ((0.5 - py) * max).toFixed(2) + "deg");
      el.style.setProperty("--s", scale);
    });
  };
  const onLeave = () => {
    const el = ref.current;
    if (!el) return;
    el.style.setProperty("--rx", "0deg");
    el.style.setProperty("--ry", "0deg");
    el.style.setProperty("--s", 1);
  };
  return (
    <div className={"tilt3d " + className} ref={ref} onMouseMove={onMove} onMouseLeave={onLeave}>
      <div className="tilt3d-inner">{children}</div>
    </div>
  );
}

/* ---------- tiny inline marks (simple geometry only) ---------- */
function Tick({ cls = "tick" }) {
  return (
    <svg className={cls} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8.5L6.4 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* minimal abstract glyphs — strokes / basic shapes only */
const PILLAR_GLYPHS = {
  leadership: (
    <svg viewBox="0 0 34 34" fill="none"><circle cx="17" cy="11" r="6" stroke="currentColor" strokeWidth="1.3"/><path d="M6 30c1.6-6.2 6-9.4 11-9.4S26.4 23.8 28 30" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
  ),
  hospitality: (
    <svg viewBox="0 0 34 34" fill="none"><path d="M17 3C9 12 9 22 17 31C25 22 25 12 17 3Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/><path d="M17 9V31" stroke="currentColor" strokeWidth="1.3"/></svg>
  ),
  biomarker: (
    <svg viewBox="0 0 34 34" fill="none"><circle cx="17" cy="17" r="13" stroke="currentColor" strokeWidth="1.3"/><path d="M4 18c5-6 9 6 13 0s9 6 13 0" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
  ),
  method: (
    <svg viewBox="0 0 34 34" fill="none"><circle cx="17" cy="17" r="13" stroke="currentColor" strokeWidth="1.3"/><path d="M17 7v10l7 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
  ),
  csrd: (
    <svg viewBox="0 0 34 34" fill="none"><rect x="7" y="5" width="20" height="24" stroke="currentColor" strokeWidth="1.3"/><path d="M12 13h10M12 18h10M12 23h6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
  ),
  community: (
    <svg viewBox="0 0 34 34" fill="none"><circle cx="11" cy="13" r="5" stroke="currentColor" strokeWidth="1.3"/><circle cx="23" cy="13" r="5" stroke="currentColor" strokeWidth="1.3"/><path d="M4 29c1-4.4 3.6-6.8 7-6.8M30 29c-1-4.4-3.6-6.8-7-6.8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
  ),
};

/* small icon marks for the floating cards */
function FcIcon({ kind }) {
  if (kind === "biomarker") return <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M2 11c3-4 5 4 8 0s5 4 8 0" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><circle cx="10" cy="10" r="8.2" stroke="currentColor" strokeWidth="1.3"/></svg>;
  if (kind === "calendar") return <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><rect x="3" y="4" width="14" height="13" rx="2.5" stroke="currentColor" strokeWidth="1.4"/><path d="M3 8h14M7 2.5v3M13 2.5v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>;
  return <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M10 2.2l6.5 2.4v4.7c0 4-2.7 6.7-6.5 8.5C6.2 16 3.5 13.3 3.5 9.3V4.6L10 2.2Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M7 9.7l2.1 2.1L13 7.8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}

/* ============================ HERO ============================ */
function Hero({ onBook }) {
  return (
    <header className="hero" id="top">
      <div className="wrap">
        <div className="urgency reveal">
          <span className="pulse"></span>
          <span><b>Founding cohort</b> — 3 places left at our launch rate for founders, CEOs and investors based in Portugal.</span>
        </div>
        <div className="hero-grid">
          <div className="hero-copy">
            <h1 className="display hero-headline reveal">Reduce leadership burnout risk before it hits <em>performance.</em></h1>
            <div className="reveal" style={{ transitionDelay: "120ms" }}>
              <p className="lede hero-sub">
                We work with founders, CEOs and investors — to see where they are overloaded, surface the hidden drains on performance, and give them a science-backed system and a community to sustain it.
              </p>
              <div className="hero-actions">
                <a className="btn btn-primary" href="https://score.pausa.pt/" target="_blank" rel="noopener noreferrer">Energy Load Check<span className="dot"></span></a>
              </div>
            </div>
          </div>

          <div className="hero-portrait reveal" style={{ transitionDelay: "180ms" }}>
            <div className="portrait-stage">
              <div className="portrait-wrap">
                <image-slot id="hero-leader" shape="rect" src="pausa/img/hero-leader.webp"
                  placeholder="Portrait of a founder / leader"></image-slot>
              </div>
              <div className="float-card fc-1">
                <span className="fc-ico"><FcIcon kind="shield" /></span>
                <span><span className="fc-label">Performance risk</span><br/><span className="fc-value">Not a wellness perk</span></span>
              </div>
              <div className="float-card fc-2">
                <span className="fc-ico"><FcIcon kind="calendar" /></span>
                <span><span className="fc-label">3 phases</span><br/><span className="fc-value">Baseline · Reset · Circle</span></span>
              </div>
              <div className="float-card fc-3">
                <span className="fc-ico"><FcIcon kind="biomarker" /></span>
                <span><span className="fc-label">Founders · CEOs · Investors</span><br/><span className="fc-value">Science-based methodology</span></span>
              </div>
            </div>

            <div className="founder">
              <div className="founder-head">
                <div className="founder-top">
                  <h3 className="founder-name">Yaro</h3>
                  <a className="li-link" href="https://www.linkedin.com/in/yaro-pausa" target="_blank" rel="noreferrer" aria-label="Yaro on LinkedIn">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>
                  </a>
                </div>
                <span className="founder-role">Co-founder &amp; CEO</span>
              </div>
              <p className="founder-bio">“Pausa was born from a personal mission: that the most effective way to create positive impact at scale is to protect the people building it. Support one founder, and the effect flows through their entire team, company, and community.”</p>
              <p className="founder-cred">Serial entrepreneur · 3 exits · Startup ecosystem builder · Lisbon</p>
            </div>
          </div>
        </div>
      </div>

      <section className="sanctuary" aria-label="The sanctuary near Lisbon">
        <div className="wrap">
          <span className="kicker reveal">Our sanctuary, 30 minutes from Lisbon</span>
          <div className="sanctuary-strip reveal" style={{ transitionDelay: "100ms" }}>
            <Tilt3D>
              <image-slot id="doma-aerial" shape="rounded" radius="14" src="pausa/img/doma-aerial.jpg"
                placeholder="DOMA Portugal — aerial view of the estate"></image-slot>
            </Tilt3D>
            <Tilt3D>
              <image-slot id="doma-forest" shape="rounded" radius="14" src="pausa/img/doma-forest.jpg"
                placeholder="DOMA Portugal — aerial view of the forest gathering area"></image-slot>
            </Tilt3D>
            <Tilt3D>
              <image-slot id="doma-atmos" shape="rounded" radius="14" src="pausa/img/doma-atmos.webp"
                placeholder="DOMA Portugal — ATMOS outdoor sauna and cold plunge"></image-slot>
            </Tilt3D>
          </div>
        </div>
      </section>
    </header>
  );
}

/* ============================ ROI ============================ */
function ROI() {
  return (
    <section className="roi" id="roi">
      <div className="wrap">
        <div className="roi-head">
          <span className="kicker reveal">Cost of inaction</span>
          <h2 className="h2 reveal">What leadership burnout <em>actually costs.</em></h2>
        </div>

        <div className="stats">
          <div className="stat reveal">
            <div className="num stat-range">~€90<span className="small">K</span></div>
            <p className="desc">median cost per executive burnout — recruitment, onboarding gap, institutional knowledge, team disruption</p>
            <p className="src">Industry estimates</p>
          </div>
          <div className="stat reveal" style={{ transitionDelay: "100ms" }}>
            <div className="num">€7</div>
            <p className="desc">returned for every €1 invested in leadership development</p>
            <p className="src">New Level Work, 2023</p>
          </div>
          <div className="stat reveal" style={{ transitionDelay: "200ms" }}>
            <div className="num">73<span className="small">%</span></div>
            <p className="desc">of founders are operating in hidden burnout — performing while depleting</p>
            <p className="src">CEREVITY, 2025</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ PILLARS ============================ */
const PILLARS = [
  { g: "biomarker", label: "Assessment", t: "Body & mind check-up",
    lead: "A complete objective picture — delivered to your door, gathered quietly over two to three weeks.",
    sub: "Wearable ring for sleep and HRV, at-home clinical blood panel, validated questionnaires for stress and burnout, and a 15-minute cognitive baseline. Almost all of it passive." },
  { g: "hospitality", label: "The reset", t: "Hospitality DNA",
    lead: "An immersive 3-day offsite in nature, with expert-led workshops and a full digital detox.",
    sub: "Facilitated by world-class practitioners. You leave with a co-created personal roadmap and a take-home toolkit." },
  { g: "leadership", label: "Personalised approach", t: "Built around your baseline",
    lead: "No two leaders get the same programme. Your roadmap is designed around your specific data — not a generic curriculum.",
    sub: "The 1:1 with your facilitator opens with your results and builds from there: your drains, your season, your goals." },
  { g: "community", label: "Community", t: "A circle of peers",
    lead: "Monthly expert-facilitated sessions with a cohort of founders, CEOs and investors under the same kind of pressure.",
    sub: "Shared language, peer accountability, and collective practice that outlasts the programme." },
  { g: "method", label: "The science", t: "Science-based methodology",
    lead: "A rigorous blend of neuroscience, behavioural science, evidence-based wellbeing protocols and validated psychometric tools.",
    sub: "Every element is grounded in research — applied science delivered with the hospitality of a premium retreat." },
  { g: "csrd", label: "Compliance", t: "Built for European standards",
    lead: "Our methodology is designed to align with EU sustainability reporting requirements — including CSRD and ESRS S1.",
    sub: "Documented psychosocial risk data, before/after evidence, and reporting-ready outputs your board and auditors can use." },
];

function Pillar({ p, i }) {
  const ref = useRef(null);
  const raf = useRef(0);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = e.clientX - r.left;
    const y = e.clientY - r.top;
    const px = x / r.width;   // 0..1
    const py = y / r.height;  // 0..1
    if (raf.current) return;
    raf.current = requestAnimationFrame(() => {
      raf.current = 0;
      el.style.setProperty("--mx", x.toFixed(1) + "px");
      el.style.setProperty("--my", y.toFixed(1) + "px");
      el.style.setProperty("--ry", ((px - 0.5) * 12).toFixed(2) + "deg");
      el.style.setProperty("--rx", ((0.5 - py) * 12).toFixed(2) + "deg");
      el.style.setProperty("--gx", (px * 100).toFixed(1) + "%");
      el.style.setProperty("--gy", (py * 100).toFixed(1) + "%");
    });
  };
  const onLeave = () => {
    const el = ref.current;
    if (!el) return;
    el.style.setProperty("--rx", "0deg");
    el.style.setProperty("--ry", "0deg");
  };
  return (
    <div
      className="pillar reveal"
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{ transitionDelay: `${(i % 3) * 90}ms` }}
    >
      <div className="pillar-card">
        <span className="pillar-glow" aria-hidden="true"></span>
        <span className="pillar-sheen" aria-hidden="true"></span>
        <span className="idx">{String(i + 1).padStart(2, "0")}<span className="idx-label">{p.label}</span></span>
        <h3 className="h3">{p.t}</h3>
        <p className="pillar-lead">{p.lead}</p>
        <span className="glyph">{PILLAR_GLYPHS[p.g]}</span>
      </div>
    </div>
  );
}

/* — outcomes leaders walk away with; floating tags beneath the six pillars — */
const PILLAR_BENEFITS = [
  "Poor judgment under stress",
  "Hidden burnout accumulating",
  "Burnout contagion to the team",
  "Executive derailment",
  "Retention risk",
  "Performance volatility",
  "Absenteeism",
  "Decision fatigue",
  "Sleep debt",
  "Team trust erosion",
  "Strategic drift",
  "Recovery deficit",
  "Leadership isolation",
  "Presenteeism",
  "Invisible performance loss",
];

function QRow({ items, reverse, dur }) {
  const loop = items.concat(items);
  return (
    <div className="qmarquee">
      <div className={"qtrack" + (reverse ? " is-rev" : "")} style={{ animationDuration: dur }}>
        {loop.map((q, i) => (
          <span className="qchip" key={i} aria-hidden={i >= items.length ? "true" : undefined}>{q}</span>
        ))}
      </div>
    </div>
  );
}

function PillarBenefits() {
  const n = PILLAR_BENEFITS.length;
  const k = Math.ceil(n / 3);
  const rowA = PILLAR_BENEFITS.slice(0, k);
  const rowB = PILLAR_BENEFITS.slice(k, k * 2);
  const rowC = PILLAR_BENEFITS.slice(k * 2);
  return (
    <div className="qband">
      <div className="qrows reveal">
        <QRow items={rowA} dur="40s" />
        <QRow items={rowB} dur="48s" reverse />
        <QRow items={rowC} dur="35s" />
      </div>
    </div>
  );
}

function Pillars({ chatPlacement = "Inline", bookingNudge = true }) {
  return (
    <section className="pillars" id="approach">
      <div className="wrap">
        <div className="pillars-head">
          <span className="kicker reveal">Why Pausa</span>
          <h2 className="h2 reveal">The six foundations of the <em>Pausa method</em>.</h2>
        </div>
        <div className="pillar-grid">
          {PILLARS.map((p, i) => (
            <Pillar key={p.g} p={p} i={i} />
          ))}
        </div>
      </div>
      {chatPlacement !== "Floating" ? (
        <div className="wrap" style={{ marginTop: "clamp(40px, 6vw, 80px)" }}>
          <PausaChatInline nudge={bookingNudge} />
        </div>
      ) : null}
    </section>
  );
}

/* ============================ RISK STRIP ============================ */
const RISKS = [
  { label: "Poor judgment under stress" },
  { label: "Hidden burnout accumulating" },
  { label: "Burnout contagion to the team" },
  { label: "Executive derailment" },
  { label: "Retention risk" },
  { label: "Performance volatility" },
  { label: "Absenteeism" },
];

function RiskStrip() {
  return (
    <div className="risk-strip">
      <div className="wrap">
        <p className="risk-eyebrow">What unmanaged leadership load costs — before it shows in the numbers</p>
        <div className="risk-items">
          {RISKS.map((r) => (
            <span className="risk-item" key={r.label}>
              <span className="risk-dot" aria-hidden="true"></span>
              {r.label}
            </span>
          ))}
        </div>
        <p className="risk-stat"><strong>73%</strong> of founders are operating in hidden burnout right now — performing while depleting, until they can't. <span className="risk-src">CEREVITY, 2025</span></p>
      </div>
    </div>
  );
}

/* ============================ SCIENCE ============================ */
const SCIENCE_REFS = [
  {
    id: "allostatic", num: "01",
    title: "Allostatic Load Theory",
    src: "Bruce McEwen · Rockefeller University",
    brief: "Chronic stress accumulates as measurable biological wear — cardiovascular, neuroendocrine, immune, metabolic.",
    detail: "McEwen's framework explains why high performers feel functional right until they aren't. Pausa tracks allostatic load directly: cortisol, inflammatory markers, cardiometabolic function. Mood is a lagging indicator; biomarkers are not.",
  },
  {
    id: "sleep", num: "02",
    title: "Sleep & Recovery",
    src: "Walker, Drummond, Killgore",
    brief: "Sleep loss degrades decision quality, risk calibration, and cognitive flexibility — the specific functions leaders depend on most.",
    detail: "A single night of poor sleep measurably impairs innovative thinking. Chronic restriction compounds invisibly. The offsite's design — darkness, no alarms, no screens — is precision recovery, not comfort.",
  },
  {
    id: "recovery", num: "03",
    title: "Burnout & Stress Regulation",
    src: "Sonnentag & Fritz · Maslach & Leiter",
    brief: "Burnout has measurable dimensions — all detectable before they show in behaviour.",
    detail: "Founders recover worse than other professionals — work identity and personal identity collapse into each other. Daily recovery quality directly predicts next-day decision-making. Burnout is measurable before it shows in behaviour.",
  },
  {
    id: "ans", num: "04",
    title: "Stress Physiology & the ANS",
    src: "McEwen, Lehrer, Thayer",
    brief: "Heart rate variability is the most responsive and measurable indicator of resilience, emotional regulation, and recovery status.",
    detail: "Multiple RCTs have demonstrated that HRV-based protocols produce clinically significant reductions in stress in high-demand professional populations. Pausa moves from subjective self-report toward objective physiological signal.",
  },
  {
    id: "fogg", num: "05",
    title: "Behavior Model",
    src: "Fogg · Stanford Behavior Design Lab",
    brief: "Behaviour change needs motivation, ability, and a prompt — simultaneously. Most programmes rely on motivation alone.",
    detail: "Tiny Habits: small actions anchored to existing routines, calibrated for worst weeks. The test we apply to every protocol: does it still happen when everything is on fire?",
  },
  {
    id: "movement", num: "06",
    title: "Movement & Nutrition",
    src: "Multiple institutions",
    brief: "Physical load management — movement and nutrition — directly determines cognitive capacity and stress resilience.",
    detail: "Evidence-based movement and nutrition protocols are built into Pausa's assessment and weekly actions — as performance inputs with measurable outputs, not wellness perks.",
  },
];

function SciFlipCard({ s }) {
  const [flipped, setFlipped] = React.useState(false);
  return (
    <div
      className={"sci-flip-wrap" + (flipped ? " flipped" : "")}
      onClick={() => setFlipped(f => !f)}>
      <div className="sci-flip-inner">
        <div className="sci-flip-front science-card">
          <span className="sci-num">{s.num}</span>
          <h3 className="sci-title">{s.title}</h3>
          <span className="sci-src">{s.src}</span>
          <span className="sci-hint">Tap for detail →</span>
        </div>
        <div className="sci-flip-back science-card sci-back">
          <span className="sci-num">{s.num}</span>
          <h3 className="sci-title">{s.title}</h3>
          <p className="sci-body sci-body-detail">{s.detail}</p>
        </div>
      </div>
    </div>
  );
}

function Science() {
  return (
    <section className="science" id="science">
      <div className="wrap">
        <div className="science-head">
          <span className="kicker reveal">The science behind it</span>
          <h2 className="h2 reveal">We don’t just say <em>“science-based.”</em></h2>
          <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
            Six independent bodies of research converge on the same conclusion.
          </p>
        </div>
        <div className="science-grid">
          {SCIENCE_REFS.map((s) => (
            <SciFlipCard key={s.id} s={s} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, ROI, RiskStrip, Science, Pillars, Tick, Tilt3D, FcIcon, PillarBenefits });