/* About Hojeong + Credentials + Resources */

const About = () => (
  <section id="about" style={{ background: "var(--bone-warm)" }}>
    <div className="wrap">
      <div className="eyebrow" style={{ marginBottom: 32 }}>
        <span className="num">F</span>The coach
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1.2fr 1fr",
        gap: 80,
        marginBottom: 80,
        alignItems: "start",
      }} className="two-col">
        <div>
          <h2 className="h2" style={{ margin: 0, marginBottom: 32 }}>
            Hojeong Kim is a <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>coach,&nbsp;consultant, and trusted&nbsp;advisor</em>.
          </h2>
          <p className="lede" style={{ margin: 0, marginBottom: 24 }}>
            Hojeong helps successful professionals create their next big chapter — moving into a higher leadership position, transitioning into a new field, or having a trusted thought partner to refine their ideas.
          </p>
          <p className="body" style={{ marginBottom: 20 }}>
            She knows reinvention firsthand. At 20-something, she came to the U.S. alone for her PhD program — a country where she didn't know anyone and didn't yet speak English well. She rebuilt from physics into tech during the 2009 financial crisis, then again from a thriving leadership role into her own coaching practice.
          </p>
          <p className="body" style={{ marginBottom: 0 }}>
            <strong>I've been there.</strong> And now I help the people who are there now — with the wisdom, frameworks, and support I wish I'd had at each turn. That's what makes this work meaningful to me.
          </p>
        </div>
        <div>
          <div className="placeholder" style={{ aspectRatio: "4 / 5" }}>
            portrait — full / editorial
          </div>
          <div className="mono" style={{
            marginTop: 14,
            fontSize: 11,
            color: "var(--ink-dim)",
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            display: "flex",
            justifyContent: "space-between",
          }}>
            <span>Fig. 02 / Founder</span>
            <span>Kim Coaching Group</span>
          </div>
        </div>
      </div>

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

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 2fr",
        gap: 80,
      }} className="two-col">
        <div>
          <h3 className="h3" style={{ margin: 0, marginBottom: 16 }}>
            Credentials &amp; <em style={{ fontStyle: "italic" }}>training</em>.
          </h3>
          <p className="body" style={{ fontSize: 14, margin: 0, marginBottom: 16 }}>
            Founder of Kim Coaching Group. ICF-accredited and certified across multiple research-backed coaching frameworks.
          </p>
          <a href="#certifications" className="ulink mono" style={{
            fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
          }}>
            View certifications →
          </a>
        </div>
        <div>
          <CredentialList items={[
            ["Certified Professional Coach (CPC)", "ICF-accredited Thriving Coach Academy"],
            ["Associate Certified Coach (ACC)", "International Coaching Federation"],
            ["The Leadership Circle Profile™", "360 assessment used by Fortune 500"],
            ["Imposter Syndrome Coach Practitioner", "ICF-accredited program"],
            ["Women-Centered Coaching", "For high-potential women leaders"],
            ["Positive Intelligence Training", "Science-based mental fitness program"],
          ]} />
        </div>
      </div>

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

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 2fr",
        gap: 80,
      }} className="two-col">
        <div>
          <h3 className="h3" style={{ margin: 0, marginBottom: 16 }}>
            Background &amp; <em style={{ fontStyle: "italic" }}>life</em>.
          </h3>
          <p className="body" style={{ fontSize: 14, margin: 0 }}>
            Born and raised in South Korea. Trained as a physicist. Built her career in tech. Now coaches the people who remind her of herself.
          </p>
        </div>
        <div>
          <CredentialList items={[
            ["Ph.D. in Physics", "University of Texas at Austin"],
            ["Postdoctoral researcher", "McGill · Stanford SLAC"],
            ["Published in peer-reviewed journals", "Including Physical Review Letters"],
            ["Senior leader in tech", "LinkedIn · Twilio · among others"],
            ["Mentor and coach", "To hundreds of graduate students & professionals"],
            ["Off the clock", "Wife, mother, licensed pilot, slow runner"],
          ]} />
        </div>
      </div>
    </div>
  </section>
);

/* Spacious credential row — 2 lines per item, no cramping */
const CredentialList = ({ items }) => (
  <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
    {items.map(([title, desc], i) => (
      <li key={i} style={{
        display: "grid",
        gridTemplateColumns: "44px 1fr",
        gap: 24,
        padding: "22px 0",
        borderTop: "1px solid var(--rule)",
        borderBottom: i === items.length - 1 ? "1px solid var(--rule)" : "none",
        alignItems: "baseline",
      }}>
        <span className="mono" style={{
          fontSize: 11,
          color: "var(--accent-deep)",
          letterSpacing: "0.14em",
          paddingTop: 4,
        }}>{String(i + 1).padStart(2, "0")}</span>
        <div>
          <div style={{
            fontFamily: "var(--serif)",
            fontSize: 19,
            lineHeight: 1.3,
            letterSpacing: "-0.005em",
            marginBottom: 4,
          }}>{title}</div>
          <div className="mono" style={{
            fontSize: 11,
            color: "var(--ink-soft)",
            textTransform: "uppercase",
            letterSpacing: "0.12em",
            lineHeight: 1.5,
          }}>{desc}</div>
        </div>
      </li>
    ))}
  </ul>
);

/* Resources — labelled clearly as blog posts */
const Resources = () => (
  <section id="resources">
    <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">G</span>From the blog
          </div>
          <h2 className="h2" style={{ margin: 0, maxWidth: "20ch" }}>
            Notes from <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>the practice</em>.
          </h2>
        </div>
        <a href="https://kimcoachinggroup.blogspot.com/" target="_blank" rel="noopener" className="ulink" style={{
          fontWeight: 500, fontSize: 14, display: "inline-flex", gap: 8,
        }}>
          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 32px",
            borderLeft: i === 0 ? "none" : "1px solid var(--rule)",
            color: "var(--ink)",
            textDecoration: "none",
            transition: "background 220ms ease",
            position: "relative",
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = "var(--paper)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
          >
            <div className="mono" style={{
              fontSize: 11,
              color: "var(--accent-deep)",
              letterSpacing: "0.16em",
              textTransform: "uppercase",
              marginBottom: 24,
            }}>{r.tag}</div>
            <div style={{
              fontFamily: "var(--serif)",
              fontSize: 24,
              lineHeight: 1.2,
              letterSpacing: "-0.015em",
              marginBottom: 16,
            }}>{r.title}</div>
            <div style={{
              fontSize: 14,
              lineHeight: 1.55,
              color: "var(--ink-soft)",
              marginBottom: 32,
            }}>{r.desc}</div>
            <div className="mono" style={{
              fontSize: 11,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: "var(--ink)",
            }}>Read post →</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

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