/* Final CTA + Footer */

const FinalCTA = () => (
  <section data-screen-label="08 Final CTA" style={{ paddingBlock: 112, textAlign: "center" }}>
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 32, justifyContent: "center" }}>
        <span className="num">07</span> The next move
      </div>
      <h2 style={{
        fontFamily: "var(--sans)",
        fontWeight: 600,
        fontSize: "clamp(40px, 6.5vw, 88px)",
        lineHeight: 1.02,
        letterSpacing: "-0.04em",
        margin: 0,
        marginInline: "auto",
        marginBottom: 48,
        maxWidth: "16ch",
        color: "var(--ink)",
      }}>
        You're ready too.<br/>Let's take that step now.
      </h2>
      <div style={{
        display: "flex",
        gap: 14,
        justifyContent: "center",
        flexWrap: "wrap",
        alignItems: "center",
      }}>
        <a href="https://tidycal.com/kcg/starter-package" target="_blank" rel="noopener" className="btn">
          Book the Starter Pack <span className="arrow">→</span>
        </a>
        <a href="https://tinyurl.com/3p6j2c2p" target="_blank" rel="noopener" className="btn btn-ghost">
          Subscribe to the newsletter
        </a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="wrap">
      <div style={{
        display: "grid",
        gridTemplateColumns: "2fr 1fr 1fr 1fr",
        gap: 48,
        marginBottom: 64,
      }} className="footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
            <img src="img/kcg-logo-white.png" alt="" style={{
              width: 36, height: 36, objectFit: "contain",
            }} />
            <span style={{
              fontFamily: "var(--sans)",
              fontWeight: 600,
              fontSize: 16,
              letterSpacing: "-0.015em",
              color: "var(--on-ink)",
            }}>Kim Coaching Group</span>
          </div>
          <p style={{
            fontFamily: "var(--sans)",
            fontWeight: 400,
            fontSize: 18,
            lineHeight: 1.5,
            color: "var(--on-ink)",
            margin: 0,
            maxWidth: "32ch",
            letterSpacing: "-0.005em",
          }}>
            Executive leadership coaching for the chapter you've been postponing.
          </p>
        </div>

        <FootCol title="Work" links={[
          ["1:1 Coaching", "#offerings"],
          ["Women Leaders Club", "Women Leaders Club.html"],
          ["Career Transition Accelerator", "#waitlist"],
          ["The Starter Pack", "https://tidycal.com/kcg/starter-package"],
        ]} />

        <FootCol title="Read" links={[
          ["Blog", "https://kimcoachinggroup.blogspot.com/"],
          ["Newsletter", "https://tinyurl.com/3p6j2c2p"],
          ["Resources", "#resources"],
        ]} />

        <FootCol title="Connect" links={[
          ["LinkedIn", "https://www.linkedin.com/in/hojeong/"],
          ["YouTube", "https://www.youtube.com/@KimCoachingGroup"],
          ["Email", "mailto:info@KimCoachingGroup.com"],
        ]} />
      </div>

      <div style={{
        height: 1,
        background: "var(--on-ink-rule)",
        marginBottom: 24,
      }} />

      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        gap: 24,
        flexWrap: "wrap",
      }}>
        <div className="meta" style={{ color: "var(--on-ink-dim)" }}>
          © 2026 Kim Coaching Group · All rights reserved
        </div>
        <div className="meta" style={{ color: "var(--on-ink-dim)" }}>
          Hojeong Kim, PhD · CPC · ACC
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 760px) {
        .footer-grid { grid-template-columns: 1fr 1fr !important; }
      }
    `}</style>
  </footer>
);

const FootCol = ({ title, links }) => (
  <div>
    <div className="meta" style={{ color: "var(--accent)", marginBottom: 18 }}>
      {title}
    </div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
      {links.map(([label, href], i) => (
        <li key={i} style={{ marginBottom: 10 }}>
          <a
            href={href}
            target={href.startsWith("#") || href.startsWith("mailto") ? "_self" : "_blank"}
            rel="noopener"
            className="ulink"
            style={{ fontSize: 14, color: "var(--on-ink)" }}
          >{label}</a>
        </li>
      ))}
    </ul>
  </div>
);

window.FinalCTA = FinalCTA;
window.Footer = Footer;