const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS } = React;

function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function Hero() {
  const indicators = [
    "Head of Engineering",
    "Systems Thinker",
    "Business-Driven Engineering",
    "Golang & TypeScript",
    "Distributed Architecture",
    "Rapid Technology Adaptation",
  ];

  return (
    <section id="home" className="hero" data-screen-label="Hero">
      <div className="reveal in">
        <Eyebrow>Portfolio · v2026.05</Eyebrow>
      </div>
      <h1 className="reveal in" data-delay="1">
        Solving complex problems through{" "}
        <span className="accent">engineering, systems,</span> and strategy.
      </h1>
      <p className="hero-sub reveal in" data-delay="2">
        Head of Engineering with strong depth in scalable architecture, analytics
        infrastructure, distributed systems, and technology strategy. I connect
        technical decisions with business outcomes and adapt quickly to emerging
        technologies — including AI, automation, and modern developer platforms.
      </p>
      <p className="hero-intro reveal in" data-delay="3">
        I specialize in turning messy operational and technical complexity into
        scalable systems and clear execution. My work spans backend architecture,
        analytics infrastructure, platform engineering, AI adoption, and engineering
        leadership. I learn fast, adapt aggressively, and focus on technology that
        creates measurable business leverage.
      </p>
      <div className="hero-ctas reveal in" data-delay="4">
        <a href="#projects" className="btn">
          View Projects
          <span className="arrow">→</span>
        </a>
        <a href="#contact" className="btn ghost">
          Contact Me
        </a>
      </div>
      <div className="chip-row reveal in" data-delay="5">
        {indicators.map((t) => (
          <span key={t} className="chip">
            {t}
          </span>
        ))}
      </div>
      <div className="hero-meta reveal">
        <div>
          <div className="label">Role</div>
          <div className="value">Head of Engineering</div>
        </div>
        <div>
          <div className="label">Focus</div>
          <div className="value">AI · Platform · Analytics</div>
        </div>
        <div>
          <div className="label">Location</div>
          <div className="value">Remote · GMT+7</div>
        </div>
        <div>
          <div className="label">Status</div>
          <div className="value" style={{ color: "var(--good)" }}>
            ● Open to conversations
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  const interests = [
    "Multi-agent systems",
    "MCP (Model Context Protocol)",
    "AI orchestration architecture",
    "Real-time analytics pipelines",
    "Distributed event-driven systems",
    "Developer platforms",
    "Scalable backend infrastructure",
    "AI-assisted workflows",
  ];

  const layers = [
    { name: "Edge / API Gateway", tag: "fastify · echo" },
    { name: "Application Services", tag: "go · ts" },
    { name: "Event Mesh", tag: "kafka · cdc" },
    { name: "Storage & State", tag: "pg · redis · mongo" },
    { name: "Analytics Layer", tag: "clickhouse" },
    { name: "AI Orchestration", tag: "mcp · agents" },
  ];

  return (
    <section id="about" data-screen-label="About">
      <div className="reveal">
        <Eyebrow>01 · About</Eyebrow>
        <h2 className="section-title">Engineering with business context.</h2>
      </div>
      <div className="about-grid">
        <div className="about-copy reveal" data-delay="1">
          <p>
            Many engineering leaders become disconnected from implementation
            realities over time. I intentionally stay close to the systems,
            architecture, and operational challenges.
          </p>
          <p>
            While leading engineering organizations, I continue exploring new
            technologies hands-on — from AI systems and analytics infrastructure
            to backend scalability and developer tooling.
          </p>
          <p>
            I enjoy solving problems where business pressure, scale, product
            velocity, and system complexity collide. Strong engineering
            leadership comes from understanding both technical depth and
            business impact behind every major decision.
          </p>
          <div className="about-interests">
            <h4>Current interests</h4>
            <ul className="interest-list">
              {interests.map((t) => (
                <li key={t}>{t}</li>
              ))}
            </ul>
          </div>
        </div>
        <div className="arch reveal" data-delay="2">
          <div className="arch-header">
            <span>system / architecture.layers</span>
            <span className="live">
              <span className="dot"></span>live
            </span>
          </div>
          {layers.map((l, i) => (
            <React.Fragment key={l.name}>
              <div className="arch-layer">
                <span className="bar" style={{ opacity: 0.3 + i * 0.12 }}></span>
                <span className="name">{l.name}</span>
                <span className="tag">{l.tag}</span>
              </div>
              {i < layers.length - 1 && <div className="arch-flow">↓</div>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function Specializations() {
  const cards = [
    {
      num: "01",
      icon: "◆",
      title: "Complex Problem Solving & System Design",
      body: "Designing scalable systems that solve operational, architectural, and business challenges efficiently. Comfortable navigating ambiguity, evaluating tradeoffs, and rapidly adopting new technologies when they create real leverage.",
      tags: [
        "Systems architecture",
        "Technical strategy",
        "Cross-functional problem solving",
        "Rapid tech adaptation",
        "Scalability planning",
        "Business-tech alignment",
        "Operational optimization",
        "AI adoption & evaluation",
      ],
    },
    {
      num: "02",
      icon: "▣",
      title: "Distributed Backend Engineering",
      body: "Building backend systems designed for high scalability, resilience, and operational clarity. Strong focus on event-driven architecture, performance optimization, and maintainability under rapid product growth.",
      tags: [
        "Golang services",
        "Node.js & TypeScript",
        "REST APIs",
        "Kafka pipelines",
        "PostgreSQL",
        "MongoDB",
        "Redis",
        "Docker & Kubernetes",
      ],
    },
    {
      num: "03",
      icon: "≋",
      title: "Real-Time Analytics & Data Infrastructure",
      body: "Architecting analytics pipelines capable of handling large-scale operational data with near real-time visibility — built for multi-tenant scale and operator clarity.",
      tags: [
        "ClickHouse optimization",
        "CDC pipelines",
        "Data aggregation",
        "MergeTree tuning",
        "Multi-tenant architecture",
        "ReplacingMergeTree",
        "Event streaming",
        "Operational analytics",
      ],
    },
    {
      num: "04",
      icon: "△",
      title: "Engineering Leadership & Business Alignment",
      body: "Leading engineering teams with strong focus on execution, technical clarity, scalability, and business outcomes. Treating engineering as a force multiplier — not a cost center.",
      tags: [
        "Technical leadership",
        "Mentorship culture",
        "Product-eng alignment",
        "Architecture reviews",
        "R&D leadership",
        "Platform thinking",
        "Technical strategy",
        "Developer productivity",
      ],
    },
  ];

  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", `${e.clientX - r.left}px`);
    e.currentTarget.style.setProperty("--my", `${e.clientY - r.top}px`);
  };

  return (
    <section id="specializations" data-screen-label="Specializations">
      <div className="reveal">
        <Eyebrow>02 · Capabilities</Eyebrow>
        <h2 className="section-title">Core specializations.</h2>
        <p className="section-lead">
          Adaptability, strategic thinking, and execution capability — applied
          across the seams where business and engineering tend to break.
        </p>
      </div>
      <div className="spec-grid">
        {cards.map((c, i) => (
          <article
            key={c.num}
            className="spec-card reveal"
            data-delay={(i % 2) + 1}
            onMouseMove={onMove}
          >
            <div className="spec-head">
              <span className="spec-num">{c.num} / 04</span>
              <span className="spec-icon">{c.icon}</span>
            </div>
            <h3>{c.title}</h3>
            <p>{c.body}</p>
            <div className="spec-tags">
              {c.tags.map((t) => (
                <span key={t} className="spec-tag">
                  {t}
                </span>
              ))}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, About, Specializations, Eyebrow });