/* about.jsx — long-form bio with sticky timeline */

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function ScrambleText({ text, trigger = true }) {
  const [out, setOut] = useStateA(text);
  useEffectA(() => {
    if (!trigger) return;
    const chars = "▓▒░█·×∇∂∮ΦΨΩαβγμνξζ";
    let i = 0;
    const id = setInterval(() => {
      i++;
      const reveal = Math.min(text.length, Math.floor(i / 1.4));
      setOut(text.split("").map((c, k) => {
        if (k < reveal) return c;
        if (c === " ") return " ";
        return chars[Math.floor(Math.random() * chars.length)];
      }).join(""));
      if (reveal >= text.length) clearInterval(id);
    }, 40);
    return () => clearInterval(id);
  }, [trigger, text]);
  return <span>{out}</span>;
}

const TIMELINE = [
  { year: "2020", label: "Gyeongnam Science HS", body: "Early graduation track." },
  { year: "2022", label: "KAIST · Physics + Math Sci", body: "Double major. National S&T scholarship." },
  { year: "2023", label: "Quantum Spin Dynamics Lab", body: "Prof. Se-Kwon Kim. Higher-order phase-locking in a domain wall." },
  { year: "2024", label: "Republic of Korea Army", body: "Apr 2024 – Sep 2025. Sergeant. The thinking break." },
  { year: "2025", label: "HUSTLY ARCHIV launched", body: "Jan. From a phone, mid-service. 3K+ followers, 1M+ views." },
  { year: "2025", label: "Stealth startup · co-founded", body: "Oct. B2B2C personal-optimization engine." },
  { year: "2025", label: "Ultrafast Spin Dynamics Lab", body: "Oct. Prof. Kab-jin Kim. Ferrimagnetic domain-wall dynamics." },
  { year: "2026", label: "GDG on Campus, KAIST", body: "Mar. Member." },
];

function About() {
  useLang(); // re-render on language toggle
  const [activeYear, setActiveYear] = useStateA(0);
  const sectionRefs = useRefA([]);
  const heroRef = useRefA(null);
  const [scrambleTrigger, setScrambleTrigger] = useStateA(false);
  const finalRef = useRefA(null);

  useEffectA(() => {
    const onScroll = () => {
      const scrollY = window.scrollY + window.innerHeight * 0.4;
      let next = 0;
      sectionRefs.current.forEach((el, i) => {
        if (el && el.offsetTop <= scrollY) next = i;
      });
      setActiveYear(next);

      if (finalRef.current) {
        const rect = finalRef.current.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.7 && !scrambleTrigger) setScrambleTrigger(true);
      }
    };
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [scrambleTrigger]);

  return (
    <div className="page" style={{ paddingTop: 140 }}>
      <div className="page-eyebrow">
        <span className="micro">{t("Index")} 01</span>
        <span style={{ width: 24, height: 1, background: "var(--fg)" }} />
        <span className="micro micro-fg">{t("The Thesis · Long-form")}</span>
      </div>

      <div ref={heroRef} className="responsive-stack" style={{
        display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64,
        marginBottom: 160, alignItems: "end",
      }}>
        <figure style={{ margin: 0, position: "relative" }}>
          <div style={{
            position: "relative",
            width: "calc(100% + var(--side-pad) + 4vw)",
            aspectRatio: "1 / 1",
            marginLeft: "calc(-1 * var(--side-pad) - 4vw)",
            marginBottom: 28,
          }}>
            {/* outer ring — slightly offset, thin gray */}
            <div style={{
              position: "absolute",
              inset: "-14px -10px -10px -14px",
              borderRadius: "50%",
              border: "1px solid var(--line)",
              pointerEvents: "none",
            }} />
            {/* portrait — circular clip */}
            <div style={{
              position: "absolute", inset: 0,
              borderRadius: "50%",
              overflow: "hidden",
              background: "rgba(14,14,16,0.95)",
            }}>
              <img
                src="portrait-media/taewoo-portrait.jpg"
                alt="Taewoo Park — portrait, April 2026"
                style={{
                  width: "100%", height: "100%",
                  objectFit: "cover",
                  objectPosition: "58% 24%",
                  display: "block",
                  filter: "contrast(1.02)",
                }}
              />
            </div>
            {/* fig label */}
            <div className="micro" style={{
              position: "absolute",
              right: -4, bottom: -22,
              color: "var(--fg-muted)",
              letterSpacing: "0.08em",
            }}>
              Fig. 00 — Self
            </div>
          </div>
          <figcaption style={{ marginTop: 36 }}>
            <div className="micro" style={{ marginBottom: 6 }}>{t("An interview with self ·")}</div>
            <div className="micro" style={{ color: "var(--fg-muted)" }}>{t("April 2026 · Daejeon")}</div>
          </figcaption>
        </figure>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "stretch", gap: 18, maxWidth: 1100 }}>
          {/* Zigzag node trace — starts at the portrait edge (left), routes up
              through 5 intermediate nodes, lands at a small circular "echo"
              node mirroring the portrait shape just above the quote. */}
          <svg viewBox="0 0 600 96" preserveAspectRatio="none"
               style={{ width: "100%", height: 96, display: "block", overflow: "visible" }}>
            <polyline
              points="-10,86 70,32 145,70 220,28 300,62 380,22 455,58 528,30"
              fill="none"
              stroke="var(--fg)"
              strokeWidth="1"
              vectorEffect="non-scaling-stroke"
              strokeDasharray="2 4"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            {[
              [70, 32], [145, 70], [220, 28], [300, 62], [380, 22], [455, 58],
            ].map(([cx, cy], i) => (
              <circle key={i} cx={cx} cy={cy} r="2.6"
                      fill="var(--bg)" stroke="var(--fg)" strokeWidth="1"
                      vectorEffect="non-scaling-stroke" />
            ))}
            {/* Origin tick at portrait edge */}
            <circle cx="-10" cy="86" r="3.4" fill="var(--fg)" />
            {/* Terminal "echo" node — same circular treatment as the portrait */}
            <g transform="translate(540, 30)">
              <circle r="11" fill="rgba(14,14,16,0.95)" stroke="var(--fg)" strokeWidth="1"
                      vectorEffect="non-scaling-stroke" />
              <circle r="14" fill="none" stroke="var(--line)" strokeWidth="1"
                      vectorEffect="non-scaling-stroke" />
            </g>
          </svg>
          <h1 className="display-md" style={{ fontSize: "clamp(22px, 2.4vw, 34px)", lineHeight: 1.35 }}>
            <em style={{ fontStyle: "italic", color: "var(--fg-muted)" }}>"</em>
            {t("I do not see physics, code, and culture as three jobs. I see them as three ways of asking the same question — what is the substrate of attention, and how do you bend it?")}
            <em style={{ fontStyle: "italic", color: "var(--fg-muted)" }}>"</em>
          </h1>
        </div>
      </div>

      {/* Two-column body with sticky timeline */}
      <div className="responsive-stack" style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 80 }}>
        <aside className="sticky-aside" style={{ position: "sticky", top: 120, height: "fit-content", alignSelf: "start" }}>
          <div className="micro" style={{ marginBottom: 24 }}>{t("Timeline / Sticky")}</div>
          <div style={{ position: "relative", paddingLeft: 24 }}>
            <div style={{ position: "absolute", left: 4, top: 4, bottom: 4, width: 1, background: "var(--line-soft)" }} />
            <div style={{
              position: "absolute", left: 4, top: 4, width: 1,
              background: "var(--fg)",
              height: `${(activeYear / Math.max(1, TIMELINE.length - 1)) * 100}%`,
              transition: "height 600ms var(--easing-default)",
            }} />
            {TIMELINE.map((tt, i) => {
              const active = i <= activeYear;
              const current = i === activeYear;
              return (
                <div key={i} style={{ marginBottom: 18, position: "relative", opacity: active ? 1 : 0.3, transition: "opacity 400ms" }}>
                  <span style={{
                    position: "absolute", left: -24, top: 6, width: 9, height: 9,
                    borderRadius: "50%", background: current ? "var(--fg)" : active ? "var(--fg)" : "var(--bg)",
                    border: "1px solid var(--fg)", transition: "all 300ms",
                    transform: current ? "scale(1.4)" : "scale(1)",
                  }} />
                  <div className="micro" style={{ color: current ? "var(--fg)" : "var(--fg-muted)" }}>{tt.year}</div>
                  <div style={{ fontSize: 13, fontWeight: current ? 600 : 400 }}>{t(tt.label)}</div>
                  <div style={{ fontSize: 11, color: "var(--fg-muted)", lineHeight: 1.4, marginTop: 2 }}>{t(tt.body)}</div>
                </div>
              );
            })}
          </div>
        </aside>

        <main style={{ maxWidth: 720 }}>
          {/* §1 */}
          <section ref={el => sectionRefs.current[0] = el} style={{ marginBottom: 110 }}>
            <div className="micro" style={{ marginBottom: 24 }}>{t("§ 1 — The question that opens the road")}</div>
            <blockquote style={{
              margin: "0 0 36px", padding: "0 0 0 24px",
              borderLeft: "2px solid var(--fg)",
              fontFamily: "var(--font-display)", fontWeight: 400,
              fontSize: "clamp(17px, 1.6vw, 20px)", lineHeight: 1.55,
              color: "var(--fg)",
            }}>
              {t("\"There is only one truly serious philosophical problem, and that is suicide.\"")}
              <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em", marginTop: 10, color: "var(--fg-muted)" }}>
                — {t("Albert Camus · The Myth of Sisyphus")}
              </span>
            </blockquote>

            <h3 className="about-h3">
              {t("We rehearsed civilization. We never rehearsed the leap.")}
            </h3>
            <p className="about-body">
              {t("Camus's sentence is the starting point of the road I'm walking. Humanity has stacked centuries of scientific progress, and yet at the individual level we are still asking the same questions the Greeks asked in Athens.")} <strong>{t("We rehearsed civilizational evolution without ever experiencing a leap in personal cognition.")}</strong>
            </p>
            <p className="about-body">
              {t("KAIST sharpened that observation — it didn't blur it. The friends I met here, by every metric the national peak of personal capability, are just as fragile in front of small life-questions as anyone else. People still spend their few decades re-asking the meaning of their lives, and lose much of what they had to the fear of death.")} <strong>{t("In my view, this is the single most important problem in front of us — more than AI, more than robotics, more than any deep-tech we keep naming in the same sentence.")}</strong>
            </p>
            <p className="about-body muted">
              {t("And it isn't only philosophy's job. Schopenhauer once complained that a book is forced to march from first sentence to last; in the 21st century, vector and graph-based knowledge structures dissolved that limitation entirely. The question that looks purely philosophical turns out to touch very specific technical surfaces.")}
            </p>
          </section>

          {/* Pull quote */}
          <section style={{ margin: "0 -40px 110px", padding: "80px 40px", borderTop: "1px solid var(--fg)", borderBottom: "1px solid var(--fg)" }}>
            <div className="micro" style={{ marginBottom: 18 }}>{t("Pull quote — § 1.4")}</div>
            <p className="display-lg" style={{ fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.05 }}>
              {t("Don't remove emotion. Change the soil it runs on.")}
            </p>
          </section>

          {/* §2 */}
          <section ref={el => sectionRefs.current[2] = el} style={{ marginBottom: 110 }}>
            <div className="micro" style={{ marginBottom: 24 }}>{t("§ 2 — Emotion is the keystone, not the noise")}</div>

            <h3 className="about-h3">
              {t("Emotion is the keystone of the deepest life-problems.")}
            </h3>
            <p className="about-body">
              {t("\"Science is cold\" is the usual line. Ironically, the newest technologies keep trying to pull emotion back into the technical layer. A 1997 paper in Science showed that people whose emotional centers are damaged exhibit severe deficits in decision-making.")} <strong>{t("We claim to prize rational, evidence-based judgment, but the final commit is usually written by emotion.")}</strong> {t("The work, then, is not to remove or route around emotion — it is to change the soil so that emotion runs on a richer context.")}
            </p>

            <h3 className="about-h3">
              {t("Regret has a shape: a model you couldn't see.")}
            </h3>
            <p className="about-body">
              {t("Human decisions live on top of huge data and personal parameters, but most people make calls that overweight the indicator of the moment — because they cannot see their own model.")} <strong>{t("That, in one line, is the root cause of regret.")}</strong>
            </p>
            <p className="about-body muted">
              {t("At the collective level this has already been engineered around — Palantir-style B2B AI shops solve it with data shaping, context modeling, and digital twins that compute mathematically optimal decisions.")} <strong>{t("At the individual level it is almost untouched")}</strong>{t(": too little data per user, too many business obstacles. That gap is the one I'm working in.")}
            </p>
          </section>

          {/* §3 — three approaches */}
          <section ref={el => sectionRefs.current[5] = el} style={{ marginBottom: 110 }}>
            <div className="micro" style={{ marginBottom: 24 }}>{t("§ 3 — Three approaches to one problem")}</div>
            <p className="about-body" style={{ marginBottom: 28 }}>
              {t("Software, content, hardware. From the outside it looks like three careers; from the inside it is one problem split across the three substrates that determine what an individual can become.")}
            </p>

            <h3 className="about-h3">
              {t("Engineering — a stealth startup.")}
            </h3>
            <p className="about-body">
              {t("Co-founded right after discharge, in October 2025.")} <strong>{t("A personal-optimization engine, B2B2C, built first for study and learning environments.")}</strong> {t("The model is the technical answer to the problem of biased individual decision-making — a new paradigm that lets a person see and steer their own decision model.")}
            </p>
            <p className="about-body muted">
              {t("Early-stage. Conversations with investors and university partners under embargo until launch. Beyond the company, I lead two open-source projects in PKM (personal knowledge management) and team-context tooling.")}
            </p>

            <h3 className="about-h3">
              {t("Experimental — HUSTLY ARCHIV.")}
            </h3>
            <p className="about-body">
              {t("Producing one's own emotional leap is a different game from inducing it in someone else.")} <strong>{t("Building methods for sharing emotional layers — directly and indirectly — is, on its own, a first-class problem.")}</strong> {t("I think it begins with the meticulous design of content.")}
            </p>
            <p className="about-body muted">
              {t("Through HUSTLY ARCHIV I run long-text editorial against a scene that runs on shorts — Korean hip-hop. A year in, collaborations under the same vision with Beean (Dejavu producer), GongGongGoo009 (KHA 2023 Newcomer of the Year), Pohranos (indie distributor under Mound Media), and HD BL4CK (producer for The Quiett, nafla, and others).")}
            </p>

            <h3 className="about-h3">
              {t("Academic — spintronics → neuromorphic.")}
            </h3>
            <p className="about-body">
              {t("If the startup is the software approach and the archive is the cultural one, the research is the hardware approach.")} <strong>{t("PCs democratized software; the iPhone internalized content; hardware is what physically rewires what an individual life can be.")}</strong>
            </p>
            <p className="about-body">
              {t("From June 2023 to March 2024, at Prof. Se-Kwon Kim's KAIST Quantum Spin Dynamics Lab, I worked on higher-order phase-locking in a domain wall. Since October 2025, at Prof. Kab-jin Kim's KAIST Ultrafast Spin Dynamics Lab, the topic is domain-wall mass and inertia in ferrimagnets. I am also a reviewer on the Korean edition of Inoue & Itoh's spintronics textbook.")}
            </p>
            <p className="about-body muted">
              {t("Long-horizon, the work points toward neuromorphic computing. Domain-wall motion and pinning physically mimic synaptic weight updates; ferrimagnet dynamics open a low-power switching regime.")} <strong>{t("The ultimate digital twin of a person, I suspect, will live on neuromorphic hardware")}</strong> {t("— and that is the substrate the rest of my work is being prepared to land on.")}
            </p>
          </section>

          {/* §4 — military as turning point */}
          <section ref={el => sectionRefs.current[6] = el} style={{ marginBottom: 110 }}>
            <div className="micro" style={{ marginBottom: 24 }}>{t("§ 4 — The military, and the four-month sprint")}</div>

            <h3 className="about-h3">
              {t("The constraint did the work.")}
            </h3>
            <p className="about-body">
              {t("The military service from April 2024 to September 2025 was the most important inflection point in how I think. Inside the wire, the physical constraints were severe — no PC.")} <strong>{t("But the constraint forced longer, deeper plans to emerge.")}</strong> {t("I spent roughly a year drafting a long plan I have been executing in different shapes ever since I was discharged.")}
            </p>

            <h3 className="about-h3">
              {t("Built from a phone, mid-service.")}
            </h3>
            <p className="about-body">
              {t("HUSTLY ARCHIV was started inside that period. I built it from a single phone — a non-profit blog at first — and it now sits at")} <strong>{t("3K+ followers and 1M+ cumulative views.")}</strong> {t("Not a content side-project. A strategic experiment in the direct and indirect methods of sharing an emotional layer with another person.")}
            </p>
            <p className="about-body muted">
              {t("Almost everything visible on this page was built in the months immediately after discharge. Not a full résumé being padded — one problem attacked from three layers at once: a tool that gives an individual context, a method for sharing emotion with others, and the physical substrate that lets both eventually run.")}
            </p>
          </section>

          {/* Final — deliberately vague: drives curious readers to /contact */}
          <section ref={finalRef} style={{ paddingTop: 40 }}>
            <div className="micro" style={{ marginBottom: 24 }}>{t("§ 5 — Twenty years out")}</div>
            <p className="display-md" style={{ marginBottom: 32, fontWeight: 800, letterSpacing: "-0.024em", lineHeight: 1.1 }}>
              {t("My long-term goal is to make")} <em style={{ fontWeight: 800 }}><ScrambleText text={t("an individual mental leap technically possible")} trigger={scrambleTrigger} /></em>.
            </p>

            <h3 className="about-h3">
              {t("The next twenty years are deliberately under-described here.")}
            </h3>
            <p className="about-body">
              {t("There is a specific roadmap behind each thread — the undergraduate horizon, the doctoral horizon, the venture horizon.")} <strong>{t("Targets, dates, labs, funding plans, the shape of the organization the three streams are eventually meant to converge inside.")}</strong> {t("None of it is on this page on purpose.")}
            </p>
            <p className="about-body">
              {t("Public roadmaps invite optimization for the wrong audience. The work tends to be better when the people who need to see the next step see it through a conversation — not through a homepage.")}
            </p>
            <p className="about-body">
              {t("If you want the actual plan — the labs I'm aiming at, the milestones the startup is moving against, the way the three threads finally fit —")} <strong>{t("write.")}</strong> {t("Replies are sent under embargo, but they are sent.")}
            </p>

            <h3 className="about-h3">
              {t("Reshape the geometry of the hill, not roll the rock.")}
            </h3>
            <p className="about-body muted">
              {t("Twenty years from now, I want to be remembered as someone who answered the question of personal mental leap not philosophically but technically.")} <strong>{t("Not by rolling Sisyphus's rock — by reshaping the hill itself.")}</strong>
            </p>
            <div className="hr-soft" style={{ margin: "60px 0 24px" }} />
            <div className="micro" style={{ display: "flex", justifyContent: "space-between" }}>
              <span>{t("End · § 5")}</span>
              <span>{t("Long read · ≈ 12 min")}</span>
              <span>{t("Continue → Research")}</span>
            </div>
          </section>
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { About });
