/* 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",
    front: "A global innovation group dedicated to building regenerative, mission-driven companies.",
    back: "Jumanji.studio is guiding Pausa to become one of Portugal's first steward-owned performance wellbeing brands — keeping the mission purpose-driven and independent over the long term.",
  },
  {
    id: "pillow", name: "Pillow", logo: "pausa/logo-pillow.png",
    front: "An AI-powered, lifestyle-first mental health platform matching individuals with the right therapeutic or healing approach.",
    back: "Pausa participants receive tailor-made post-programme guidance through Pillow's ecosystem of therapists, coaches and nature-based practices — so the support continues beyond the programme.",
  },
  {
    id: "unicorn", name: "Unicorn Factory Lisboa", logo: "pausa/logo-ufl.png",
    front: "One of Portugal's leading innovation hubs, supporting early-stage companies with mentorship, business development and strategic guidance.",
    back: "Pausa is incubated within the Unicorn Factory Lisboa ecosystem — with access to experienced mentors, strategic frameworks and a community of founders building human-centred ventures.",
  },
];

function PartnerCard({ p, i }) {
  const [flipped, setFlipped] = React.useState(false);
  return (
    <div
      className={"ac-flip-wrap ac-flip-two partner-flip" + (flipped ? " flipped" : "")}
      style={{ transitionDelay: `${i * 120}ms` }}
      onClick={() => setFlipped(f => !f)}>
      <div className="ac-flip-inner">
        {/* FRONT */}
        <article className="action-card ac-flip-front ac-face-front partner-card-face">
          <img src={p.logo} alt={p.name} className="partner-flip-logo" />
          <h3 className="partner-flip-name">{p.name}</h3>
          <p className="partner-flip-desc">{p.front}</p>
          <span className="ac-hint">Tap to see our partnership →</span>
        </article>
        {/* BACK */}
        <article className="action-card ac-face-front partner-card-face partner-card-back">
          <img src={p.logo} alt={p.name} className="partner-flip-logo" />
          <h3 className="partner-flip-name">{p.name}</h3>
          <p className="partner-flip-desc">{p.back}</p>
        </article>
      </div>
    </div>
  );
}

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="action-cards partner-grid-flip">
          {PARTNERS.map((p, i) => (
            <PartnerCard key={p.id} p={p} i={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ MISSION & VALUES ============================ */
const VALUES = [
  { t: "Integrity", d: "We do what we say. Every time." },
  { t: "Win-win-win", d: "Every outcome must work for everyone it touches." },
  { 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 VisionFlipCard() {
  return (
    <div className="vc-flip-outer reveal">
      <div className="vc-flip-scene">
        {/* FRONT */}
        <div className="vc-face vc-face-front">
          <div className="vc-two-col">
            <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 — a structure pioneered by the <a href="https://purpose-economy.org/en/" target="_blank" rel="noreferrer">steward-ownership movement</a>.</p>
            </div>
          </div>
          <span className="vc-hint">Hover to reveal our secret →</span>
        </div>
        {/* BACK */}
        <div className="vc-face vc-face-back">
          <img src="https://images.unsplash.com/photo-1425913397330-cf8af2ff40a1?w=1200&q=80&auto=format&fit=crop" alt="Forest" className="vc-forest-img" aria-hidden="true" />
          <div className="vc-forest-overlay" aria-hidden="true"></div>
          <div className="vc-forest-content">
            <span className="vc-shh">Tssss…</span>
            <span className="vc-dream">Our secret dream is to plant a forest together.</span>
            <span className="vc-pledge">One leader = one tree</span>
          </div>
        </div>
      </div>
    </div>
  );
}

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>

        <VisionFlipCard />
      </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 — a focused clinical panel of cardiovascular, metabolic, hormonal and inflammatory markers plus two weeks of wearable-ring data — alongside four dimensions of wellbeing, a clear map of energy drains, and honest 360° feedback. Through the year, regular check-ins build 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: "Phase 1", k: "Baseline", t: "Full-picture measurement",
    front: "A wearable ring and an at-home clinical blood panel arrive at your door — a complete, objective picture of where each leader stands, gathered over two to three weeks with minimal demands on your time.",
    details: [
      "Wearable ring — sleep, HRV and recovery over ~2 weeks",
      "At-home blood panel — cardiovascular, metabolic, hormonal and inflammatory markers",
      "Optional: continuous glucose sensor and gut-health test",
      "Validated questionnaires — stress, burnout, resilience and recovery",
      "Short cognitive baseline — reaction time, working memory, focus",
      "Results: a personal map across four dimensions of wellbeing",
    ],
  },
  {
    n: "Phase 2", k: "Pausa Reset", t: "Nature-immersive reset",
    front: "A 3-day offsite at a nature sanctuary near Lisbon — your facilitator walks you through your Baseline results in person, expert-led workshops, and a personalised roadmap of healthy routines.",
    details: [
      "Your Baseline results reviewed in depth with your facilitator",
      "3 days at a nature sanctuary 30 min from Lisbon",
      "Expert-facilitated workshops — identify your drains",
      "Learn the Behaviour Model: tiny habits that stick under pressure",
      "Shared challenge and time in nature",
      "Leave with a personalised roadmap of healthy routines",
    ],
  },
  {
    n: "Phase 3", k: "Pausa Circle", t: "Community & integration",
    front: "Monthly gatherings — online and in person. Accountability, shared challenge, and the science of building routines that survive your worst weeks.",
    details: [
      "Monthly expert-facilitated Circle sessions",
      "Peer accountability from leaders under the same pressure",
      "Topics: Sleep & recovery · Burnout & stress · Mindfulness · Movement · Nutrition",
      "Day-90 recheck — objective before/after evidence",
      "Offline shared challenge and time in nature",
      "You don't carry it alone",
    ],
  },
];

const AC_HUES = [90, 116, 162];

function ActionCard({ s, i }) {
  const [acFlipped, setAcFlipped] = React.useState(false);
  return (
    <div
      className={"ac-flip-wrap ac-flip-two" + (acFlipped ? " flipped" : "")}
      style={{ transitionDelay: `${i * 120}ms` }}
      onClick={() => setAcFlipped(f => !f)}>
      <div className="ac-flip-inner">
        <article className="action-card ac-flip-front ac-face-front">
          <span className="ac-phase-label">{s.n}</span>
          <span className="ac-kicker-standalone">{s.k}</span>
          <h3 className="ac-title ac-title-lg">{s.t}</h3>
          <p className="ac-front-desc">{s.front}</p>
          <span className="ac-hint">Tap to see what's inside →</span>
        </article>
        <article className="action-card ac-flip-back ac-flip-back-two" style={{"--ph": AC_HUES[i] + "deg"}}>
          <span className="ac-phase-label">{s.n}</span>
          <span className="ac-kicker-standalone">{s.k}</span>
          <h3 className="ac-title ac-title-lg">{s.t}</h3>
          <ul className="ac-detail-list">
            {s.details.map((d, di) => (
              <li key={di} className="ac-detail-item">
                <span className="ac-detail-dot" aria-hidden="true"></span>
                <span>{d}</span>
              </li>
            ))}
          </ul>
        </article>
      </div>
    </div>
  );
}

function ActionLayer() {
  return (
    <section className="action" id="action">
      <div className="wrap">
        <div className="action-head">
          <span className="kicker reveal">Our solution</span>
          <h2 className="h2 reveal">Three phases. <em>One programme.</em></h2>
          <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
            Phase 1 maps the starting point. Phase 2 resets the foundation. Phase 3 builds on it — month by month, with community and accountability that survive real working life.
          </p>
        </div>

        <div className="action-cards reveal">
          {ACTION_STEPS.map((s, i) => (
            <ActionCard key={s.n} s={s} i={i} />
          ))}
        </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 offsites 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">
          <p className="askai-eyebrow">Still sceptical? Good.</p>
          <h2 className="h2 askai-title">Grill an AI <em>about us.</em></h2>
          <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">Pausa 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 });