/* global React */

/* ---------- 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="vision-card reveal">
          <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>
      </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() {
  return (
    <section className="showcase" id="data">
      <div className="wrap">
        <div className="showcase-head">
          <span className="kicker reveal">What you'll actually see</span>
          <h2 className="h2 reveal">Your whole picture, <em>made legible</em>.</h2>
          <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
            Blood, urine and saliva across 11 body systems, four dimensions of wellbeing, a clear map of your energy drains, and honest 360° feedback — tracked over time and turned into the few actions that matter.
          </p>
        </div>

        <div className="appwin reveal">
          <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>
    </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 Perplexity", href: "https://www.perplexity.ai/search?q=" + encodeURIComponent(AI_QUERY) },
];

function openExternal(e, href) {
  e.preventDefault();
  const w = window.open(href, "_blank", "noopener,noreferrer");
  if (!w) {
    // popup blocked (e.g. inside a sandboxed preview) — escape the frame
    try { window.top.location.href = href; } catch (_) { window.location.href = href; }
  }
}

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"
                onClick={(e) => openExternal(e, l.href)}>{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">Some of the most important work <em>happens offline</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, AskAI, ResetBand });