/* Footer + final CTA */

const FinalCTA = () => (
  <section style={{ paddingBlock: 120 }}>
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 32, textAlign: "center" }}>
        <span className="num">H</span>The next move
      </div>
      <h2 style={{
        fontFamily: "var(--serif)",
        fontWeight: 400,
        fontSize: "clamp(40px, 7vw, 104px)",
        lineHeight: 0.98,
        letterSpacing: "-0.025em",
        margin: 0,
        textAlign: "center",
        maxWidth: 18 + "ch",
        marginInline: "auto",
        marginBottom: 56,
      }}>
        You are <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>ready</em> 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 First Two <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: 80,
      }} className="footer-grid">
        <div>
          <div className="logo" style={{ color: "var(--bone)", marginBottom: 24 }}>
            <span className="dot" style={{ background: "var(--accent)" }} />
            Kim Coaching Group
          </div>
          <p style={{
            fontFamily: "var(--serif)",
            fontSize: 22,
            lineHeight: 1.4,
            color: "var(--bone)",
            margin: 0,
            marginBottom: 32,
            maxWidth: "32ch",
            fontWeight: 300,
          }}>
            Leadership coaching for the chapter you've been postponing.
          </p>
          <div className="mono" style={{
            fontSize: 11,
            color: "oklch(0.70 0.010 250)",
            textTransform: "uppercase",
            letterSpacing: "0.14em",
          }}>
            San Francisco · Remote worldwide
          </div>
        </div>

        <FootCol title="Work" links={[
          ["1:1 Coaching", "#offerings"],
          ["Women Leaders Club", "https://www.kimcoachinggroup.com/women-leaders-community"],
          ["Career Changer Intensive", "#waitlist"],
          ["The First Two", "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:hello@kimcoachinggroup.com"],
        ]} />
      </div>

      <div style={{
        height: 1,
        background: "oklch(0.30 0.012 250)",
        marginBottom: 32,
      }} />

      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        gap: 24,
        flexWrap: "wrap",
      }}>
        <div className="mono" style={{
          fontSize: 11,
          color: "oklch(0.70 0.010 250)",
          textTransform: "uppercase",
          letterSpacing: "0.14em",
        }}>
          © 2026 Kim Coaching Group · All rights reserved
        </div>
        <div className="mono" style={{
          fontSize: 11,
          color: "oklch(0.70 0.010 250)",
          textTransform: "uppercase",
          letterSpacing: "0.14em",
        }}>
          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="mono" style={{
      fontSize: 11,
      color: "var(--accent)",
      textTransform: "uppercase",
      letterSpacing: "0.16em",
      marginBottom: 24,
    }}>{title}</div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
      {links.map(([label, href], i) => (
        <li key={i} style={{ marginBottom: 12 }}>
          <a href={href} target={href.startsWith("#") || href.startsWith("mailto") ? "_self" : "_blank"} rel="noopener" className="ulink" style={{
            fontSize: 14,
            color: "var(--bone)",
          }}>{label}</a>
        </li>
      ))}
    </ul>
  </div>
);

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