/* global React, Tick */

/* ============================ COMPARISON ============================ */
const ROWS = [
  { f: "Focus", pausa: "Leadership teams", eap: "General workforce", coach: "Individual leaders", type: "text" },
  { f: "Full-body biomarker check", pausa: true, eap: false, coach: false, type: "bool" },
  { f: "Nature-immersive resets", pausa: true, eap: false, coach: false, type: "bool" },
  { f: "12-month routine integration", pausa: true, eap: false, coach: "Rarely", type: "mixed" },
  { f: "CSRD S1-14 impact reporting", pausa: true, eap: "Basic metrics only", coach: false, type: "mixed" },
];

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 = [
  "Full biomarker check-up, twice a year",
  "Immersive retreat at our exclusive nature sanctuary near Lisbon (30 mins)",
  "12-month community integration",
  "CSRD impact reporting",
];

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 beta pricing</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, retreat, integration and reporting.
            </p>
          </div>

          <div className="price-card reveal" style={{ transitionDelay: "120ms" }}>
            <span className="tier">Founding cohort · beta</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>

            <p className="incl-title">Everything included</p>
            <ul className="incl">
              {INCLUDES.map((i) => (
                <li key={i}><Tick /> {i}</li>
              ))}
            </ul>

            <button className="btn btn-primary" onClick={onBook}>Book a discovery 30-min call<span className="dot"></span></button>
            <p className="micro">Lock in our beta rate. This trial period is strictly limited to our first 3 Portugal-based pilot clients.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
function Footer({ onBook }) {
  return (
    <footer className="footer" id="contact">
      <div className="wrap">
        <h2 className="h2 footer-cta reveal">Ready to <em>elevate</em> your leadership team?</h2>
        <p className="footer-sub reveal" style={{ transitionDelay: "80ms" }}>
          After we talk, you'll have a clear framework of how our protocol fits your team's specific baseline. No high-pressure sales.
        </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 });