/* About Hojeong + Credentials + Background + Resources */

const About = () => (
  <section id="about" data-screen-label="06 About">
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 32 }}>
        <span className="num">06</span> The coach
      </div>

      {/* ── Bio + portrait ──────────────────────────────────────────── */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.2fr 1fr",
        gap: 80,
        marginBottom: 72,
        alignItems: "start",
      }} className="two-col">
        <div>
          <h2 className="h2" style={{ marginBottom: 32 }}>
            Hojeong Kim is a leadership coach.
          </h2>
          <p className="lede" style={{ marginBottom: 24, maxWidth: "46ch" }}>
            Hojeong Kim, PhD, CPC, ACC, helps successful professionals create their next big chapter, whether that means moving into a higher leadership position, transitioning into a new field, or having a trusted thought partner to explore and refine their ideas.
          </p>
          <p className="body" style={{ marginBottom: 20 }}>
            She understands the challenges of navigating change and reinvention firsthand. Her own path has taken her from academia to tech during the 2009 financial crisis, and later from a thriving leadership role to launching her own business. These experiences fuel her commitment to helping clients break through limits, clarify what they truly want, and pursue it with clarity, courage, and ease.
          </p>
          <p className="body" style={{ marginBottom: 20 }}>
            Hojeong is the founder of Kim Coaching Group and a Certified Professional Coach with the Associate Certified Coach (ACC) credential from the International Coaching Federation (ICF). She is also a Certified Imposter Syndrome Coach Practitioner, certified in Women-Centered Coaching, and trained in Positive Intelligence.
          </p>
          <p className="body" style={{ marginBottom: 0 }}>
            Before becoming a coach, Hojeong earned her Ph.D. in Physics from the University of Texas at Austin and conducted postdoctoral research at McGill University and the Stanford Linear Accelerator Center. She then served in senior leadership roles in the tech industry, including at LinkedIn and Twilio.
          </p>
        </div>
        <div>
          <img
            src="img/hojeong-kim.jpeg"
            alt="Hojeong Kim, founder of Kim Coaching Group"
            style={{
              width: "100%",
              aspectRatio: "4 / 5",
              objectFit: "cover",
              objectPosition: "center top",
              borderRadius: 8,
              display: "block",
            }}
          />
          <div className="meta" style={{
            marginTop: 12,
            display: "flex",
            justifyContent: "space-between",
          }}>
            <span>Founder, Kim Coaching Group</span>
            <span>PhD · CPC · ACC</span>
          </div>
        </div>
      </div>

      <div className="hairline" style={{ marginBottom: 56 }} />

      {/* ── Credentials & training ──────────────────────────────────── */}
      <CredentialBlock title="Credentials &amp; training.">
        <CredRow first links={[
          ["CPC", "https://drive.google.com/file/d/1R6rdHLByYS75pNO9NYVBidF81akDkjVh/view"],
          ["ACC", "https://drive.google.com/file/d/1TH5j4Mx-1BI_KeMZ_pAsK9B3YKHcWpHc/view"],
        ]}>
          <CredLead>Certified Professional Coach (CPC)</CredLead> from the ICF-accredited Thriving Coach Academy, holding Associate Certified Coach (ACC) accreditation from the International Coaching Federation (ICF), the global standards and ethics body for the coaching industry.
        </CredRow>
        <CredRow links={[["Certificate", "https://drive.google.com/file/d/17XKs04MAx26rfh4dM6mmVV51lC8SXB3n/view?usp=drive_link"]]}>
          Certified in <CredLead>The Leadership Circle Profile™</CredLead>, a powerful 360 assessment used by Fortune 500 companies that helps leaders accelerate their leadership development.
        </CredRow>
        <CredRow links={[["Certificate", "https://drive.google.com/file/d/11SPi3DNnkbjzROOd2m47lc019qeCAXpb/view?usp=sharing"]]}>          <CredLead>Certified Imposter Syndrome Coach Practitioner</CredLead>, an ICF-accredited program focused on helping individuals recognize their self-worth, break free from self-doubt, and step confidently into their greatness.
        </CredRow>
        <CredRow links={[["Certificate", "https://drive.google.com/file/d/1r6Ypd-LkBdbry81xL63WHCC1g6uhzK-W/view?usp=sharing"]]}>          Certified in <CredLead>Women-Centered Coaching</CredLead>, specializing in empowering high-potential women through transformational frameworks, tools, and methods.
        </CredRow>
        <CredRow last links={[["Positive Intelligence", "https://www.positiveintelligence.com/"]]}>
          Completed <CredLead>Positive Intelligence Training</CredLead>, a science-based program to recognize self-limiting thoughts, build new neural pathways, and foster lasting positive change.
        </CredRow>
      </CredentialBlock>

      <div className="hairline-soft" style={{ marginTop: 56, marginBottom: 56 }} />

      {/* ── Background (combined with off-the-clock) ───────────────── */}
      <CredentialBlock title="Background.">
        <CredRow first>Born and raised in South Korea.</CredRow>
        <CredRow>Ph.D. in Physics from the University of Texas at Austin.</CredRow>
        <CredRow>Postdoctoral researcher at McGill University and the Stanford Linear Accelerator Center.</CredRow>
        <CredRow>Published author in multiple peer-reviewed journals in high-energy physics.</CredRow>
        <CredRow>Leader in data science and analytics at top Silicon Valley tech companies, including LinkedIn and Twilio.</CredRow>
        <CredRow>Mentor and coach to hundreds of graduate students and professionals.</CredRow>
        <CredRow>Wife and mother to a teenage son and a dog.</CredRow>
        <CredRow>Licensed private pilot.</CredRow>
        <CredRow last>Passionate (but slow) runner.</CredRow>
      </CredentialBlock>
    </div>
  </section>
);

/* ── Helpers ──────────────────────────────────────────────────────── */
const CredentialBlock = ({ title, children }) => (
  <div>
    <h3 className="h3" style={{
      margin: 0,
      marginBottom: 28,
      paddingBottom: 20,
      borderBottom: "1px solid var(--rule-soft)",
    }} dangerouslySetInnerHTML={{ __html: title }} />
    <ul style={{ listStyle: "none", padding: 0, margin: 0, maxWidth: "92ch" }}>
      {children}
    </ul>
  </div>
);

const CredRow = ({ first, last, links = [], children }) => (
  <li style={{
    display: "grid",
    gridTemplateColumns: "22px 1fr",
    gap: 18,
    padding: "18px 0",
    borderTop: first ? "none" : "1px solid var(--rule)",
    borderBottom: last ? "1px solid var(--rule)" : "none",
    alignItems: "baseline",
  }}>
    <span style={{
      width: 6, height: 6, borderRadius: "50%",
      background: "var(--accent)",
      display: "inline-block",
      transform: "translateY(-2px)",
    }} />
    <div>
      <div style={{
        fontFamily: "var(--sans)",
        fontWeight: 400,
        fontSize: 15.5,
        color: "var(--ink-soft)",
        lineHeight: 1.6,
        letterSpacing: "-0.005em",
      }}>
        {children}
      </div>
      {links.length > 0 && (
        <div style={{ marginTop: 8, display: "flex", gap: 16, flexWrap: "wrap" }}>
          {links.map(([label, href]) => (
            <a
              key={label}
              href={href}
              target="_blank"
              rel="noopener"
              className="ulink"
              style={{
                fontSize: 13,
                fontWeight: 500,
                color: "var(--accent-deep)",
              }}
            >{label} →</a>
          ))}
        </div>
      )}
    </div>
  </li>
);

const CredLead = ({ children }) => (
  <strong style={{ color: "var(--ink)", fontWeight: 600 }}>{children}</strong>
);

/* ── Resources — blog posts ──────────────────────────────────────── */
const Resources = () => (
  <section id="resources" data-screen-label="07 Writing" style={{ background: "var(--paper)" }}>
    <div className="wrap">
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-end",
        marginBottom: 48,
        gap: 32,
        flexWrap: "wrap",
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            <span className="num">07</span> From the blog
          </div>
          <h2 className="h2" style={{ maxWidth: "20ch" }}>
            Notes from the practice.
          </h2>
        </div>
        <a href="https://kimcoachinggroup.blogspot.com/" target="_blank" rel="noopener" className="ulink" style={{
          fontWeight: 500, fontSize: 14, display: "inline-flex", gap: 6,
        }}>
          All blog posts →
        </a>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 0,
        borderTop: "1px solid var(--rule)",
        borderBottom: "1px solid var(--rule)",
      }} className="three-col">
        {[
          {
            tag: "Blog post",
            title: "What does a coach actually do?",
            desc: "Let's make it concrete: what coaching is, what it isn't, and how to know it's working.",
            href: "https://kimcoachinggroup.blogspot.com/2025/02/what-does-coach-actually-do-lets-make.html",
          },
          {
            tag: "Blog post",
            title: "Coaching, mentoring, consulting, therapy.",
            desc: "Four very different practices, often confused. A short guide to telling them apart.",
            href: "https://kimcoachinggroup.blogspot.com/2023/10/coaching-journey-of-nurturing-inner.html",
          },
          {
            tag: "Interview",
            title: "On the journey from physics to coaching.",
            desc: "An interview with the Asian Women Coaching Collective on reinvention and inner work.",
            href: "https://kimcoachinggroup.blogspot.com/2024/06/interview-with-asian-women-coaching.html",
          },
        ].map((r, i) => (
          <a key={i} href={r.href} target="_blank" rel="noopener" style={{
            display: "block",
            padding: "40px 28px",
            borderLeft: i === 0 ? "none" : "1px solid var(--rule)",
            color: "var(--ink)",
            textDecoration: "none",
            transition: "background 220ms ease",
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
          >
            <div className="meta" style={{ color: "var(--accent-deep)", marginBottom: 24 }}>
              {r.tag}
            </div>
            <div style={{
              fontFamily: "var(--sans)",
              fontWeight: 600,
              fontSize: 22,
              lineHeight: 1.2,
              letterSpacing: "-0.02em",
              marginBottom: 16,
              color: "var(--ink)",
            }}>{r.title}</div>
            <div style={{
              fontSize: 14,
              lineHeight: 1.55,
              color: "var(--ink-soft)",
              marginBottom: 28,
            }}>{r.desc}</div>
            <div style={{
              fontFamily: "var(--sans)",
              fontWeight: 500,
              fontSize: 13,
              color: "var(--ink)",
            }}>Read post →</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

window.About = About;
window.Resources = Resources;