function Philosophy() {
  const tenets = [
    {
      num: "I",
      title: "Build systems that age well",
      body: "Architecture survives chaos when it's designed for the boring problems, not the exciting ones.",
    },
    // {
    //   num: "II",
    //   title: "Clarity over hype",
    //   body: "Technical depth beats trend-following. Choose the tool that explains itself in three sentences.",
    // },
    // {
    //   num: "III",
    //   title: "DX as force multiplier",
    //   body: "A 5% improvement in developer experience compounds harder than any new framework.",
    // },
    // {
    //   num: "IV",
    //   title: "Iterate without collapse",
    //   body: "Speed and discipline are not opposites. The seam between them is where great engineering lives.",
    // },
    {
      num: "II",
      title: "Technology as leverage",
      body: "Engineering exists to create business outcomes — not to be admired in slide decks.",
    },
    {
      num: "III",
      title: "Depth while leading",
      body: "Leaders who lose touch with implementation eventually lose touch with reality.",
    },
  ];

  return (
    <section id="philosophy" className="philo" data-screen-label="Philosophy">
      <div className="reveal">
        <Eyebrow>06 · Philosophy</Eyebrow>
      </div>
      <h2 className="philo-quote reveal" data-delay="1">
        Good systems survive growth. <em>Great systems</em> survive people,
        scale, and chaos.
      </h2>
      <p className="philo-sub reveal" data-delay="2">
        The future belongs to engineers who connect systems thinking, business
        understanding, and rapid adaptation to technological change.
      </p>
      <div className="philo-tenets">
        {tenets.map((t, i) => (
          <div key={t.num} className="tenet reveal" data-delay={(i % 3) + 1}>
            <div className="num">TENET {t.num}</div>
            <div className="title">{t.title}</div>
            <div className="body">{t.body}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Personal() {
  return (
    <section id="personal" data-screen-label="Personal">
      <div className="reveal">
        <Eyebrow>07 · Personal</Eyebrow>
        <h2 className="section-title">Outside the terminal.</h2>
      </div>
      <div className="personal">
        <div className="personal-copy reveal" data-delay="1">
          <p>
            When not designing systems or exploring AI infrastructure, I spend
            time with my wife and my two cats: Kuroi and Sora.
          </p>
          <p style={{ color: "var(--text-3)", fontSize: 15 }}>
            Because even distributed systems architects eventually get
            emotionally manipulated by cats.
          </p>
        </div>
        <div className="personal-card reveal" data-delay="2">
          <div className="row">
            <span className="key">// household.processes</span>
            <span className="val">4 running</span>
          </div>
          <div className="row">
            <span className="key">spouse</span>
            <span className="val">primary stakeholder</span>
          </div>
          <div className="row">
            <span className="key">
              <span className="cat-line">
                <span className="cat-glyph"></span>kuroi
              </span>
            </span>
            <span className="val">demanding · 24/7 uptime</span>
          </div>
          <div className="row">
            <span className="key">
              <span className="cat-line">
                <span className="cat-glyph alt"></span>sora
              </span>
            </span>
            <span className="val">supervises commits</span>
          </div>
          <div className="row">
            <span className="key">coffee</span>
            <span className="val">non-negotiable dep</span>
          </div>
          <div className="row">
            <span className="key">weekends</span>
            <span className="val">read-only mode</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [typed, setTyped] = React.useState("");
  const full = "whoami --available-for-conversations";

  React.useEffect(() => {
    let i = 0;
    let cancelled = false;
    let timeout;
    const tick = () => {
      if (cancelled) return;
      i++;
      setTyped(full.slice(0, i));
      if (i < full.length) timeout = setTimeout(tick, 55 + Math.random() * 50);
    };
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && i === 0) {
            timeout = setTimeout(tick, 400);
          }
        });
      },
      { threshold: 0.4 }
    );
    const el = document.getElementById("contact");
    if (el) obs.observe(el);
    return () => {
      cancelled = true;
      clearTimeout(timeout);
      obs.disconnect();
    };
  }, []);

  return (
    <section id="contact" className="contact" data-screen-label="Contact">
      <div className="reveal">
        <Eyebrow>08 · Contact</Eyebrow>
      </div>
      <h2 className="contact-title reveal" data-delay="1">
        Let's build something <em>dangerous.</em>
      </h2>
      <p className="contact-sub reveal" data-delay="2">
        Interested in AI systems, platform engineering, scalable infrastructure,
        or technical leadership conversations? Let's talk.
      </p>
      <div className="terminal reveal" data-delay="3">
        <div className="terminal-bar">
          <div className="dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <span className="title">~/contact.sh — zsh</span>
        </div>
        <div className="terminal-body">
          <div>
            <span className="prompt">$ </span>
            <span className="cmd">
              {typed}
              <span className="caret"></span>
            </span>
          </div>
          <div className="out">→ available for: Head of Engineering · Technical Leader</div>
          <div className="out">→ timezone: GMT+7 · async-friendly</div>
          <div className="out">→ response time: &lt; 24h</div>
        </div>
        <div className="terminal-actions">
          <a className="terminal-btn" href="mailto:galih.pratama2207@gmail.com">
            <span>
              <span className="ch">$</span> email
            </span>
            <span>↗</span>
          </a>
          <a
            className="terminal-btn"
            href="https://www.linkedin.com/in/ggalihpp"
            target="_blank"
            rel="noopener noreferrer"
          >
            <span>
              <span className="ch">$</span> linkedin
            </span>
            <span>↗</span>
          </a>
          <a
            className="terminal-btn"
            href="https://github.com/ggalihpp"
            target="_blank"
            rel="noopener noreferrer"
          >
            <span>
              <span className="ch">$</span> github
            </span>
            <span>↗</span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Philosophy, Personal, Contact });