/* global React, PillarBenefits */

/* ---------- Pausa logo mark (real logo, recolored to brand palette) ---------- */
function PausaLogo({ size = 32, wordmark = true, variant = "moss", className = "" }) {
  const src = variant === "cream" ? "pausa/pausa-mark-cream.png" : "pausa/pausa-mark-moss.png";
  return (
    <span className={"pausa-logo " + className}>
      <img className="pausa-glyph" src={src} alt="Pausa" width={size} height={size} />
      {wordmark && <span className="wm">Pausa</span>}
    </span>
  );
}

/* ============================ STRATEGIC PARTNERS ============================ */
const PARTNERS = [
  {
    id: "jumanji", name: "Jumanji.studio", logo: "pausa/logo-jumanji.png",
    body: [
      <><strong>Jumanji.studio</strong> is a global innovation group dedicated to building regenerative, mission-driven companies.</>,
      <>They are guiding Pausa to become one of Portugal's first <strong>steward-owned performance wellbeing brands</strong> — keeping our mission purpose-driven and independent over the long term.</>,
    ],
  },
  {
    id: "pillow", name: "Pillow", logo: "pausa/logo-pillow.png",
    body: [
      <><strong>Pillow</strong> is an AI-powered, lifestyle-first mental health platform that matches individuals with the therapeutic or healing approach best suited to their needs.</>,
      <>Pausa participants receive <strong>tailor-made post-programme guidance</strong> through Pillow's ecosystem of therapists, coaches and nature-based practices.</>,
    ],
  },
  {
    id: "unicorn", name: "Unicorn Factory Lisboa", logo: "pausa/logo-ufl.png",
    body: [
      <><strong>Unicorn Factory Lisboa</strong> is one of Portugal's leading innovation hubs, supporting early-stage companies with mentorship, business development and strategic guidance.</>,
      <>Pausa is <strong>incubated within their ecosystem</strong>, with access to experienced mentors, strategic frameworks and a community of founders building human-centred ventures.</>,
    ],
  },
];

function Partners() {
  return (
    <section className="partners" id="partners">
      <div className="wrap">
        <div className="partners-head">
          <span className="kicker reveal">In good company</span>
          <h2 className="h2 reveal">Our strategic partners.</h2>
        </div>
        <div className="partner-grid">
          {PARTNERS.map((p, i) => (
            <div className="partner reveal" key={p.id} style={{ transitionDelay: `${i * 90}ms` }}>
              <div className="logo-slot">
                <img className="partner-logo" src={p.logo} alt={p.name} />
              </div>
              <p className="p-name">{p.name}</p>
              <div>
                {p.body.map((para, j) => <p key={j}>{para}</p>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ MISSION & VALUES ============================ */
const VALUES = [
  { t: "Integrity", d: "We do what we say. Every time." },
  { t: "Simplicity", d: "One clear sentence over three impressive ones." },
  { t: "Radical transparency", d: "We name our limitations before anyone else does." },
  { t: "Impact", d: "We measure by what changes in the world." },
  { t: "Ethics", d: "We don't optimise for money when it costs people." },
];

function Mission() {
  return (
    <section className="mission" id="mission">
      <div className="wrap">
        <div className="mission-head">
          <div>
            <span className="kicker reveal">Our mission</span>
            <h2 className="h2 reveal">Healthy leaders build <em>healthy systems</em>.</h2>
          </div>
          <p className="lede mh-lede reveal" style={{ transitionDelay: "100ms" }}>Pausa exists to keep leaders at their best — so the systems they build can be too.</p>
        </div>

        <div className="values-row">
          {VALUES.map((v, i) => (
            <div className="value reveal" key={v.t} style={{ transitionDelay: `${i * 70}ms` }}>
              <span className="vpill">{v.t}</span>
              <p>{v.d}</p>
            </div>
          ))}
        </div>

        <div className="vc-flip-wrap reveal">
          <div className="vc-flip-inner">
            {/* Front face */}
            <div className="vision-card vc-flip-front">
              <div>
                <span className="kicker">Our vision · 2031</span>
                <p>
                  Pausa hubs within 90 minutes of Lisbon, Madrid, Amsterdam, Berlin and London — a community of <strong>10,000+ leaders</strong> who return throughout their careers.
                </p>
              </div>
              <div>
                <p className="vc-steward"><span className="steward">Permanently steward-owned. Not for sale.</span> Profit serves the mission, never the other way around — a structure pioneered by the <a href="https://purpose-economy.org/en/" target="_blank" rel="noreferrer">steward-ownership movement</a>.</p>
              </div>
            </div>
            {/* Back face */}
            <div className="vc-flip-back">
              <div className="vc-forest-bg"></div>
              <div className="vc-back-content">
                <span className="vcb-shh">Tssss…</span>
                <p className="vcb-dream">Our secret dream is to plant a forest together.</p>
                <p className="vcb-pledge">Our promise: one leader = one tree</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* global React, BiomarkerCard, WellbeingCard, MirrorCard, DrainsCard */

/* ---------- left-rail navigation (decorative chrome) ---------- */
const RAIL_ICON = {
  home: <path d="M4 11.5 12 5l8 6.5V20a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z" />,
  body: <><circle cx="12" cy="5.4" r="2.4" /><path d="M12 8.2v8.5M12 16.7 8.5 21M12 16.7 15.5 21M6.5 11h11" /></>,
  vitality: <path d="M3 12.5h3.4l2-5 3 9 2.2-7 1.6 3H21" />,
  drains: <path d="M13 3 5 13.5h6L10 21l8.5-11H12z" />,
  feedback: <><path d="M20 12a8 8 0 1 1-2.4-5.7" /><path d="M20 4v4h-4" /></>,
  protocols: <><rect x="5" y="3.5" width="14" height="17" rx="2" /><path d="M9 8h6M9 12h6M9 16h3.5" /></>,
  habits: <><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" /></>,
  tracker: <><path d="M4 19V5M4 19h16" /><path d="M7.5 15l3.3-4 2.7 2.4L19 7" /></>,
};
const RAIL_TABS = [
  { k: "home", t: "Home" },
  { k: "body", t: "Full-body check" },
  { k: "vitality", t: "Vitality index" },
  { k: "drains", t: "Energy drains" },
  { k: "feedback", t: "360° feedback" },
  { k: "protocols", t: "Protocols" },
  { k: "habits", t: "Tiny habits" },
  { k: "tracker", t: "Tracker" },
];

function RailIcon({ k }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {RAIL_ICON[k]}
    </svg>
  );
}

function AppRail() {
  return (
    <nav className="app-rail" aria-label="Pausa dashboard (illustrative)">
      <span className="rail-brand"><PausaLogo variant="cream" size={22} /></span>
      <div className="rail-items">
        {RAIL_TABS.map((tab) => (
          <span className={"rail-item" + (tab.k === "home" ? " on" : "")} key={tab.k}>
            <span className="rail-ico"><RailIcon k={tab.k} /></span>
            <span className="rail-label">{tab.t}</span>
          </span>
        ))}
      </div>
    </nav>
  );
}

function DataShowcase() {
  const win = React.useRef(null);
  const raf = React.useRef(0);
  const coarse = () => window.matchMedia && (window.matchMedia("(pointer: coarse)").matches || window.matchMedia("(prefers-reduced-motion: reduce)").matches);
  const onMove = (e) => {
    const el = win.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;
      const ry = (px - 0.5) * 20;
      const rx = (0.5 - py) * 14;
      el.style.setProperty("--ay", ry.toFixed(2) + "deg");
      el.style.setProperty("--ax", rx.toFixed(2) + "deg");
      // shadow trails the tilt so the panel feels physically lifted
      el.style.setProperty("--shx", (-ry * 2.4).toFixed(1) + "px");
      el.style.setProperty("--shy", (rx * 2.4 + 60).toFixed(1) + "px");
    });
  };
  const onLeave = () => {
    const el = win.current;
    if (!el) return;
    el.style.setProperty("--ax", "0deg");
    el.style.setProperty("--ay", "0deg");
    el.style.setProperty("--shx", "0px");
    el.style.setProperty("--shy", "60px");
  };
  return (
    <section className="showcase" id="data">
      <div className="wrap">
        <div className="showcase-head">
          <span className="kicker reveal">Your dashboard</span>
          <h2 className="h2 reveal">Every leader's performance, <em>measured and tracked</em>.</h2>
          <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
            A full-body baseline — 100+ biomarkers across 11 body systems — plus four dimensions of wellbeing, a clear map of energy drains, and honest 360° feedback. Through the year, wearables and weekly check-ins add a continuous layer, building a system of record for human performance.
          </p>
        </div>

        <div className="appwin-stage" onMouseMove={onMove} onMouseLeave={onLeave}>
          <div className="appwin reveal" ref={win}>
            <AppRail />
            <div className="app-main">
              <div className="app-bar" aria-hidden="true">
                <span className="app-bar-title">Home — your overview</span>
                <span className="app-bar-meta">Last updated · today</span>
              </div>
              <BiomarkerCard />
              <div className="dash-row dash-row-3">
                <WellbeingCard />
                <DrainsCard />
                <MirrorCard />
              </div>
            </div>
          </div>
        </div>

        <div className="data-privacy reveal">
          <span className="dp-ico" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none"><path d="M12 3l7 2.6v5.2c0 4.4-3 7.4-7 9.2-4-1.8-7-4.8-7-9.2V5.6L12 3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M9 12l2.1 2.1L15.3 10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
          <div className="dp-body">
            <p className="dp-title">Your health data stays yours.</p>
            <p className="dp-text">Biomarker testing is run by our accredited clinical partner — 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 aggregates.</p>
            <div className="dp-certs">
              <span>End-to-end encrypted</span>
              <span>ISO 27001</span>
              <span>HDS (Health Data Hosting)</span>
              <span>GDPR compliant</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ ACTION LAYER — core proposition ============================ */
const ACTION_STEPS = [
  { n: "01", k: "See", t: "The full picture", img: "pausa/img/action-see.jpg",
    d: "A clear read on body and mind — 100+ biomarkers alongside how you actually think and feel, so you finally see the patterns behind your energy, sleep and mood." },
  { n: "02", k: "Act", t: "Small action, big leverage", img: "pausa/img/action-act.jpg",
    d: "We turn those insights into one tiny, high-leverage action a week, for you and your team. Easy to do, easy to repeat — never overwhelm." },
  { n: "03", k: "Sustain", t: "Support and accountability", img: "pausa/img/action-habit.jpg",
    d: "Gentle check-ins from us, plus the quiet accountability of moving through it alongside your cohort — so new habits hold, without extra meetings or admin." },
];

function ActionLayer() {
  return (
    <section className="action" id="action">
      <div className="wrap">
        <div className="action-head">
          <span className="kicker reveal">The action layer</span>
          <h2 className="h2 reveal">Diagnosis is just the start. <em>The hard part is what follows.</em></h2>
          <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
            Healthy routines don't stick through willpower or discipline — those always run out. They stick when each change is small enough to be easy and built into a moment already in your day. That's the part we own — and the only part that shows up in your next set of results.
          </p>
        </div>

        <div className="action-cards reveal">
          {ACTION_STEPS.map((s, i) => (
            <article className="action-card" key={s.n} style={{ transitionDelay: `${i * 90}ms` }}>
              <span className="ac-num">{s.n}<span className="ac-kicker">{s.k}</span></span>
              <h3 className="ac-title">{s.t}</h3>
              <p className="ac-desc">{s.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ ASK AN AI ============================ */
const AI_QUERY = "Is Pausa (pausa.pt) — a performance wellbeing company for founders and leaders that combines twice-yearly biomarker testing, immersive nature retreats near Lisbon, and 12-month community integration — a good fit for my leadership team? What should I weigh before booking a discovery call?";
const AI_LINKS = [
  { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=" + encodeURIComponent(AI_QUERY) },
  { label: "Ask Claude", href: "https://claude.ai/new?q=" + encodeURIComponent(AI_QUERY) },
  { label: "Ask Gemini", href: "https://gemini.google.com/app?q=" + encodeURIComponent(AI_QUERY) },
  { label: "Ask Perplexity", href: "https://www.perplexity.ai/search?q=" + encodeURIComponent(AI_QUERY) },
];

function AskAI() {
  return (
    <section className="askai">
      <div className="wrap">
        <div className="askai-card reveal">
          <h2 className="h2 askai-title">Still not sure Pausa is <em>right</em> for your team?</h2>
          <p className="askai-sub">Grill an AI about us</p>
          <div className="askai-btns">
            {AI_LINKS.map((l) => (
              <a key={l.label} className="askai-btn" href={l.href} target="_blank" rel="noopener noreferrer">{l.label}</a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ RESET BAND (animated atmospheric gradient) ============================ */
function ResetBand() {
  return (
    <section className="reset" aria-label="Offline resets at the sanctuary">
      <div className="reset-media" aria-hidden="true">
        <div className="reset-oklch"></div>
        <div className="reset-veil"></div>
        <svg className="reset-path" viewBox="0 0 1000 520" preserveAspectRatio="xMaxYMin slice" aria-hidden="true">
          <path d="M -40 470 C 280 430, 520 250, 720 150 S 980 30, 1080 -30" />
        </svg>
      </div>
      <div className="wrap reset-inner">
        <span className="kicker reset-kicker reveal">The reset</span>
        <h2 className="display reset-title reveal">Where burnout risk <em>actually comes down</em>.</h2>
        <p className="reset-sub reveal" style={{ transitionDelay: "120ms" }}>
          Multi-day, fully offline resets at our nature sanctuary 30 minutes from Lisbon — where the nervous system finally downshifts and the clearest thinking returns.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { PausaLogo, Partners, Mission, DataShowcase, ActionLayer, AskAI, ResetBand });