/* global React, Tick, PillarBenefits */

/* ============================ COMPARISON ============================ */
const ROWS = [
  { f: "Focus", pausa: "Individual leaders & leadership teams", eap: "General workforce", coach: "Individual leaders", type: "text" },
  { f: "Full-body biomarker check", pausa: true, eap: false, coach: false, type: "bool" },
  { f: "Weekly AI-guided focus actions", pausa: true, eap: false, coach: "Rarely", type: "mixed" },
  { f: "Nature-immersive offsites", pausa: true, eap: false, coach: false, type: "bool" },
  { f: "Community-driven integration", pausa: true, eap: false, coach: "Rarely", type: "mixed" },
  { f: "Day-90 recheck", pausa: true, eap: false, coach: false, type: "bool" },
];

function Cell({ value }) {
  if (value === true) return <span className="yes"><Tick /> Yes</span>;
  if (value === false) return <span className="no">No</span>;
  return <span>{value}</span>;
}

function Comparison() {
  return (
    <section className="compare" id="market">
      <div className="wrap">
        <div className="compare-head">
          <span className="kicker reveal">The market reality</span>
          <h2 className="h2 reveal">Where Pausa sits in the <em>landscape</em>.</h2>
        </div>

        <div className="compare-scroll reveal">
          <table className="matrix">
            <thead>
              <tr>
                <th className="col-feature"></th>
                <th className="col-pausa">Pausa<span className="sub">Performance wellbeing</span></th>
                <th className="col-other">Traditional EAP apps</th>
                <th className="col-other">Executive coaching</th>
              </tr>
            </thead>
            <tbody>
              {ROWS.map((r) => (
                <tr key={r.f}>
                  <td className="feature">{r.f}</td>
                  <td className="cell col-pausa"><Cell value={r.pausa} /></td>
                  <td className="cell"><Cell value={r.eap} /></td>
                  <td className="cell"><Cell value={r.coach} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <p className="matrix-caption reveal">
          Mass-market apps are built for HR checklists. Coaching lacks physiological data. <b>Pausa connects the mind, body and community.</b>
        </p>
      </div>
    </section>
  );
}

/* ============================ PRICING ============================ */
const INCLUDES = [
  { phase: "Phase 1 — Baseline", items: [
    "Wearable ring — sleep, HRV and recovery (yours to keep)",
    "At-home clinical blood panel — cardiovascular, metabolic, hormonal and inflammatory markers",
    "Validated questionnaires and cognitive baseline",
  ]},
  { phase: "Phase 2 — Pausa Reset", items: [
    "3-day immersive offsite near Lisbon",
    "All meals, accommodation and catering included",
    "Expert-led workshops across four dimensions of wellbeing",
    "1:1 session with your facilitator",
  ]},
  { phase: "Phase 3 — Pausa Circle", items: [
    "10 monthly expert-facilitated group sessions",
    "Day-90 recheck — HRV, cognitive and biomarker subset",
    "Full annual re-assessment at month 12",
  ]},
];

function Pricing({ onBook }) {
  return (
    <section className="pricing" id="pricing">
      <div className="wrap">
        <div className="pricing-grid">
          <div className="pricing-intro">
            <span className="kicker reveal">Transparent pricing — founding cohort</span>
            <h2 className="h2 reveal">An honest rate for our <em>founding cohort</em>.</h2>
            <p className="lede reveal" style={{ transitionDelay: "100ms" }}>
              For groups of up to 12 leaders. One programme, fully inclusive — biomarkers, offsite, integration and reporting.
            </p>
          </div>

          <div className="price-card reveal" style={{ transitionDelay: "120ms" }}>
            <span className="tier">Founding cohort</span>
            <div className="price-row">
              <span className="anchor">€8,000</span>
              <span className="now">€3,890<span className="vat"> ex. VAT</span></span>
            </div>
            <p className="per">Per person · €8,000 standard market rate</p>
            <div className="price-team-math">
              <span className="ptm-eg">Team of 8 leaders →</span>
              <span className="ptm-total">€31,120 total</span>
              <span className="ptm-note">vs. €50K–€120K to replace one burned-out senior hire</span>
            </div>

            <p className="incl-title">Everything included</p>
            {INCLUDES.map((group) => (
              <div key={group.phase} className="incl-group">
                <p className="incl-phase">{group.phase}</p>
                <ul className="incl">
                  {group.items.map((item) => (
                    <li key={item}><Tick /> {item}</li>
                  ))}
                </ul>
              </div>
            ))}

            <button className="btn btn-primary" onClick={onBook}>Book a discovery call<span className="dot"></span></button>
            <p className="micro">Lock in our founding cohort rate. Strictly limited to our first 3 Portugal-based teams.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
function Footer({ onBook }) {
  return (
    <footer className="footer" id="contact">
      <div className="wrap">
        <h2 className="h2 footer-cta reveal">Don't wait for a performance crisis <em>to act on one.</em></h2>
        <p className="footer-sub reveal" style={{ transitionDelay: "80ms" }}>
          Start with a 30-minute conversation. We'll give you a clear read on where your team is and how Pausa fits — no high-pressure sales, no obligation.
        </p>
        <div className="footer-actions reveal" style={{ transitionDelay: "140ms" }}>
          <button className="btn btn-primary" onClick={onBook}>Book a discovery 30-min call<span className="dot"></span></button>
        </div>
      </div>

      <div className="wordmark" aria-hidden="true">Pausa</div>

      <div className="legal">
        <div className="wrap">
          <div className="legal-top">
            <div className="legal-brand">
              <PausaLogo variant="cream" />
              <div className="legal-partner-logo">
                <div className="ufl-row">
                  <img className="ufl-mark" src="pausa/logo-ufl-cream.png" alt="Unicorn Factory Lisboa" />
                  <span className="ufl-name">Unicorn Factory Lisboa</span>
                </div>
                <span>An incubated venture</span>
              </div>
            </div>

            <div className="legal-col">
              <h4>healthhub by Unicorn Factory Lisboa</h4>
              <p className="addr">Praça Dom Pedro IV 74,<br/>1100-203 Lisbon<br/>Portugal</p>
            </div>

            <div className="legal-col">
              <h4>Get in touch</h4>
              <a onClick={onBook}>Book a call</a>
              <a href="mailto:hello@pausa.pt">hello@pausa.pt</a>
              <a href="https://manual.pausa.pt" target="_blank" rel="noreferrer">Digital manual</a>
            </div>
          </div>

          <div className="legal-bottom">
            <span className="copy">© Pausa 2026</span>
            <a href="pausa/Pausa-Terms-and-Conditions.pdf" target="_blank" rel="noreferrer">Terms &amp; conditions</a>
            <a href="pausa/Pausa-Privacy-Policy.pdf" target="_blank" rel="noreferrer">Privacy policy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Comparison, Pricing, Footer });