/* 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>Exclusive beta</b> — 3 pilot spots remaining at our market-entry rate for Portugal-based companies.</span>
        </div>
        <div className="hero-grid">
          <div className="hero-copy">
            <h1 className="display hero-headline reveal"><em>Performance wellbeing</em> for leadership teams.</h1>
            <div className="reveal" style={{ transitionDelay: "120ms" }}>
              <p className="lede hero-sub">
                We help leaders and their teams achieve sustainable success without compromising their health and happiness — with methods rooted in science-based wellbeing.
              </p>
              <div className="hero-actions">
                <button className="btn btn-primary" onClick={onBook}>Book a discovery 30-min call<span className="dot"></span></button>
                <span className="meta">CSRD S1-14 compatible. No obligation.</span>
              </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="biomarker" /></span>
                <span><span className="fc-label">Twice a year</span><br/><span className="fc-value">Biomarkers · 11 systems</span></span>
              </div>
              <div className="float-card fc-2">
                <span className="fc-ico"><FcIcon kind="shield" /></span>
                <span><span className="fc-label">Reporting</span><br/><span className="fc-value">EU's CSRD &amp; ESRS S1 ready</span></span>
              </div>
              <div className="float-card fc-3">
                <span className="fc-ico"><FcIcon kind="calendar" /></span>
                <span><span className="fc-label">12-month programme</span><br/><span className="fc-value">Science-based, community-driven</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>
            </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="hero-estate" shape="rounded" radius="14" src="pausa/img/hero-estate.webp"
                placeholder="DOMA Portugal — historic estate"></image-slot>
            </Tilt3D>
            <Tilt3D>
              <image-slot id="hero-forest" shape="rounded" radius="14" src="pausa/img/hero-forest.webp"
                placeholder="Pine forest glamping"></image-slot>
            </Tilt3D>
            <Tilt3D>
              <image-slot id="hero-atmos" shape="rounded" radius="14" src="pausa/img/hero-atmos.webp"
                placeholder="ATMOS steam center"></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">The business case</span>
          <h2 className="h2 reveal">Not a wellness programme.<br/><em>A performance investment.</em></h2>
        </div>

        <div className="stats">
          <div className="stat reveal">
            <div className="num">€21<span className="small">K</span></div>
            <p className="desc">the cost of inaction — burnout costs organisations up to €21,000 per executive annually</p>
            <p className="src">AJPM, 2025</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 full Vitality Check across four dimensions — physical, mental, emotional, and purpose & values.",
    sub: "100+ biomarkers across 11 body systems. Your full picture, before the programme begins." },
  { g: "hospitality", label: "The reset", t: "Hospitality DNA",
    lead: "An immersive 3-day retreat in nature, with expert-led workshops and a full digital detox.",
    sub: "Leaders leave with a shared wellbeing map and a personal roadmap." },
  { g: "leadership", label: "Your circle", t: "Team of world-class specialists",
    lead: "Coaches, facilitators and nutritionists built into every cohort.",
    sub: "Clinical specialists and therapists on hand — handpicked for your goals, not a generic provider list." },
  { g: "community", label: "The community", t: "12 months of shared practice",
    lead: "10 monthly expert-facilitated sessions, built around five pillars of a healthy lifestyle.",
    sub: "Peer accountability that outlasts the programme." },
  { g: "method", label: "The science", t: "Science-based methodology",
    lead: "Grounded in neuroscience, behavioural science and evidence-based wellbeing protocols.",
    sub: "Every element has a reason — applied science, delivered with hospitality." },
  { g: "csrd", label: "The evidence", t: "Measurable, documented progress",
    lead: "Progress tracked at baseline, mid-programme and close — a before/after picture across all four dimensions.",
    sub: "Final report compatible with ESRS S1-14 for CSRD reporting." },
];

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 = [
  "Clearer thinking",
  "Sharper decisions",
  "Sustainable performance",
  "Less burnout",
  "Stronger cohesion",
  "Emotional regulation",
  "Reduced isolation",
  "Renewed energy",
  "Deeper recovery",
  "Resilience under pressure",
  "Measurable wellbeing",
  "Aligned leadership",
  "Better focus",
  "A shared language",
  "Audit-ready reporting",
];

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">Our approach</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>
  );
}

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