/* bottom.jsx — Differentiator, Pricing teaser, Final CTA, Footer */

const COMPARE = [
  ["Generates a structured plan", true, "partial", false, true],
  ["Scores plan quality", false, false, false, true],
  ["Long-term memory of you", false, false, false, true],
  ["Schedules & tracks execution", false, true, true, true],
  ["Checks in with you daily", false, false, "partial", true],
];

function Differentiator() {
  return (
    <section className="sec" style={{ paddingTop: 90 }}>
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow" data-reveal>Why Gen Coach</p>
          <h2 data-reveal data-delay="1">Others do one part. We close the loop.</h2>
          <p className="lede" data-reveal data-delay="2">Cheaper than a human coach, more private than therapy, more structured than ChatGPT, more automated than Notion.</p>
        </div>
        <div className="compare" data-reveal>
          <table>
            <thead>
              <tr>
                <th></th>
                <th>ChatGPT</th>
                <th>Notion</th>
                <th>Habit&nbsp;apps</th>
                <th className="us">Gen Coach</th>
              </tr>
            </thead>
            <tbody>
              {COMPARE.map((row, i) => (
                <tr key={i}>
                  <td>{row[0]}</td>
                  {row.slice(1).map((c, j) => (
                    <td key={j} className={j === 3 ? "us" : ""}>{cell(c)}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function cell(v) {
  if (v === true) return <span className="yes"><Icon.check style={{ width: 18, height: 18 }} /></span>;
  if (v === "partial") return <span className="no" style={{ fontSize: 13 }}>partial</span>;
  return <span className="no">—</span>;
}

function Pricing() {
  return (
    <section className="sec" id="pricing" style={{ paddingTop: 70 }}>
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow" data-reveal>Simple pricing</p>
          <h2 data-reveal data-delay="1">Start free. Upgrade when it's earning its keep.</h2>
          <p className="lede" data-reveal data-delay="2">Experience the value before you pay a cent. Less than a single coaching session, usable every day.</p>
        </div>
        <div className="pricing-grid">
          <div className="price-card" data-reveal>
            <div className="pname">Starter</div>
            <div className="amount"><span className="n">Free</span></div>
            <p className="pdesc">Everything you need to create your first plan and feel the “aha.”</p>
            <ul className="plist">
              <li><span className="ic"><Icon.check /></span> 30 starter credits</li>
              <li><span className="ic"><Icon.check /></span> Two-part plans with scoring</li>
              <li><span className="ic"><Icon.check /></span> Calendar & task scheduling</li>
              <li><span className="ic"><Icon.check /></span> Access to system AI coaches</li>
            </ul>
            <a className="btn btn-ghost" href="https://gencoach.app">Start your first plan</a>
          </div>
          <div className="price-card pro" data-reveal data-delay="1">
            <span className="badge">Most popular</span>
            <div className="pname">Premium</div>
            <div className="amount"><span className="n">$9.90</span><span className="per">/ month</span></div>
            <p className="pdesc">For people in it for the long haul. Save 15% on 6 months, 20% yearly.</p>
            <ul className="plist">
              <li><span className="ic"><Icon.check /></span> 500 credits every month</li>
              <li><span className="ic"><Icon.check /></span> Premium specialized coaches</li>
              <li><span className="ic"><Icon.check /></span> Daily check-ins & email reminders</li>
              <li><span className="ic"><Icon.check /></span> Long-term memory across plans</li>
            </ul>
            <a className="btn btn-light" href="https://gencoach.app/pricing">Try Premium free</a>
          </div>
        </div>
        <p className="price-foot" data-reveal>Need more? À-la-carte credit packs from $4.90 · Pay with PayPal, Apple Pay or Google Pay</p>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final">
      <div className="wrap">
        <div className="final-inner" data-reveal>
          <div className="final-glow" />
          <div className="mark" style={{width: 52, height: 52, borderRadius: 14, backgroundColor: "#0f172a", display: "inline-flex", alignItems: "center", justifyContent: "center"}}><GenCoachLogoMark size={24} color="#34d399" /></div>
          <h2>Small steps, every day — with someone in your corner.</h2>
          <p>Set your first goal in the next two minutes. Your coach will remember it — and show up tomorrow.</p>
          <div className="hero-cta">
            <a className="btn btn-light btn-lg" href="https://gencoach.app">Start your first plan <Icon.arrow /></a>
          </div>
          <div className="hero-trust">
            <span>Try free — no credit card required</span>
            <span className="dot" />
            <span>Ready when you are</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div>
          <Logo />
          <p className="ftag" style={{ marginTop: 14 }}>The brilliant friend who tells you the truth — an AI coach that turns goals into plans, and stays with you to follow through.</p>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <h4>Product</h4>
            <a href="#how">How it works</a>
            <a href="#try">Try it</a>
            <a href="#features">Features</a>
            <a href="#pricing">Pricing</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a href="#">About</a>
            <a href="#">Brand</a>
            <a href="#">Careers</a>
            <a href="#">Contact</a>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Credits & billing</a>
          </div>
        </div>
      </div>
      <div className="wrap footer-base">
        <span>© 2026 Gen Coach. Made for people who want to actually follow through.</span>
        <span>Plan → Score → Execute → Accompany</span>
      </div>
    </footer>
  );
}

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