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

/* ---------- 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>
            <h1 className="display hero-headline reveal">A <em>performance wellbeing</em> company for founders and leaders.</h1>
            <div className="reveal" style={{ transitionDelay: "120ms" }}>
              <p className="lede hero-sub">
                We combine comprehensive biomarker evidence, a 12-month community-based integration of healthy routines, and immersive nature retreats to help you sustain peak performance without compromising health and happiness.
              </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"
                  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">CSRD S1-14 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">Routine integration</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" }}>
            <image-slot id="hero-estate" shape="rounded" radius="14"
              placeholder="DOMA Portugal — historic estate"></image-slot>
            <image-slot id="hero-forest" shape="rounded" radius="14"
              placeholder="Pine forest glamping"></image-slot>
            <image-slot id="hero-atmos" shape="rounded" radius="14"
              placeholder="ATMOS steam center"></image-slot>
          </div>
        </div>
      </section>
    </header>
  );
}

/* ============================ ROI ============================ */
function ROI() {
  return (
    <section className="roi" id="roi">
      <div className="wrap">
        <div className="roi-head">
          <div>
            <span className="kicker reveal">The cost of inaction</span>
            <h2 className="h2 reveal">Unmanaged stress is already on your <em>balance sheet</em>.</h2>
          </div>
          <p className="lede reveal" style={{ transitionDelay: "120ms" }}>
            What you invest in Pausa is a fraction of what you lose to unmanaged stress and cognitive decline.
          </p>
        </div>

        <div className="stats">
          <div className="stat reveal">
            <div className="num">€10–20<span className="small">k</span></div>
            <p className="desc">Annual cost per executive in lost productivity due to cognitive fatigue.</p>
          </div>
          <div className="stat reveal" style={{ transitionDelay: "100ms" }}>
            <div className="num">59 <span className="small">vs</span> 36</div>
            <p className="desc">Days of productivity lost per year — poor versus excellent employer support.</p>
          </div>
          <div className="stat reveal" style={{ transitionDelay: "200ms" }}>
            <div className="num">82<span className="small">%</span></div>
            <p className="desc">Of CEOs report positive ROI on structured wellbeing programs.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ PILLARS ============================ */
const PILLARS = [
  { g: "leadership", t: "Leadership focus", d: "Built specifically for the psychology and pressures of founders — not generic HR workforces." },
  { g: "hospitality", t: "Hospitality DNA", d: "Nature-immersive experiences and multi-day offline resets at our exclusive sanctuary near Lisbon (30 mins) are core to the program." },
  { g: "biomarker", t: "Biomarker-driven", d: "A full check-up of your body, twice a year. Not just blood — blood, urine and saliva across 11 body systems. The full picture of how you're doing right now." },
  { g: "method", t: "Science-based methodology", d: "At the foundation of Pausa lies an integrated three-pillar scientific framework: neuroscience, behavioural science, and evidence-based wellbeing protocols." },
  { g: "csrd", t: "CSRD-compatible", d: "Impact reporting at a fair price, mapping directly to ESRS S1-14 for your ESG requirements." },
  { g: "community", t: "Community", d: "Elite peer-to-peer accountability with other high-performing leaders walking the same path." },
];

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;
    if (raf.current) return;
    raf.current = requestAnimationFrame(() => {
      raf.current = 0;
      el.style.setProperty("--mx", x + "px");
      el.style.setProperty("--my", y + "px");
    });
  };
  return (
    <div
      className="pillar reveal"
      ref={ref}
      onMouseMove={onMove}
      style={{ transitionDelay: `${(i % 3) * 90}ms` }}
    >
      <span className="pillar-glow" aria-hidden="true"></span>
      <span className="idx">{String(i + 1).padStart(2, "0")}</span>
      <h3 className="h3">{p.t}</h3>
      <p>{p.d}</p>
      <span className="glyph">{PILLAR_GLYPHS[p.g]}</span>
    </div>
  );
}

function Pillars() {
  return (
    <section className="pillars" id="approach">
      <div className="wrap">
        <div className="pillars-head">
          <span className="kicker reveal">Our differentiators</span>
          <h2 className="h2 reveal">Six pillars that connect the <em>mind, body and community</em>.</h2>
        </div>
        <div className="pillar-grid">
          {PILLARS.map((p, i) => (
            <Pillar key={p.g} p={p} i={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

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