// 포트폴리오 컴포넌트들

const { useState, useEffect, useRef, useMemo } = React;
const { PROFILE, CORE_COMPETENCIES, SKILLS, CAREER, PROJECTS, CERTIFICATIONS } = window.PORTFOLIO_DATA;

// ========================================
// Reusable bits
// ========================================
function SectionLabel({ no, label }) {
  return (
    <div className="section-label">
      <span className="section-label__no">{no}</span>
      <span className="section-label__line"></span>
      <span className="section-label__text">{label}</span>
    </div>);

}

function Tag({ children }) {
  return <span className="tag">{children}</span>;
}

// ========================================
// Hero
// ========================================
function Hero() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const seoulTime = time.toLocaleTimeString("ko-KR", { hour12: false, timeZone: "Asia/Seoul" });

  return (
    <section className="hero" id="hero" data-screen-label="01 Hero" data-band="canvas">
      <div className="hero__utility" aria-hidden="true">
        <div className="hero__utility-inner">
          <span className="hero__utility-item">KR / Seoul</span>
          <span className="hero__utility-sep">·</span>
          <span className="hero__utility-item">For Hire · Senior Backend</span>
          <span className="hero__utility-flex"></span>
          <span className="hero__utility-item hero__utility-item--end">Updated 2026.05</span>
          <span className="hero__utility-sep">|</span>
          <span className="hero__utility-item hero__utility-item--end">KR</span>
        </div>
      </div>
      <div className="hero__topbar">
        <div className="hero__brand">
          <span className="hero__monogram">
</span>
          <span className="hero__brand-name">Portfolio</span>
        </div>
        <nav className="hero__nav">
          <a href="#about">About</a>
          <a href="#skills">Skills</a>
          <a href="#projects">Projects</a>
          <a href="#career">Career</a>
          <a href="#contact">Contact</a>
        </nav>
        <div className="hero__meta">
          <span className="hero__meta-label">Seoul</span>
          <span className="hero__meta-value">{seoulTime}</span>
        </div>
      </div>

      <div className="hero__body">
        <div className="hero__title-row">
          <h1 className="hero__title">
            맡은 시스템을
            <br />
            <em style={{ color: "rgb(241, 126, 34)" }}>끝까지 책임지는</em>
            <br />
            개발자.
          </h1>
          <div className="hero__stamp" aria-hidden="true">
            <div className="hero__stamp-mark hero__stamp-mark--photo">
              <img src={typeof window !== 'undefined' && window.__resources && window.__resources.profile || "assets/profile.png"} alt="" />
            </div>
          </div>
        </div>

        <div className="hero__sub">
          <div className="hero__name">
            <span className="hero__name-ko">{PROFILE.nameKo}</span>
            <span className="hero__name-en">{PROFILE.nameEn}</span>
          </div>
          <p className="hero__summary">{PROFILE.summary}</p>
        </div>

        <div className="hero__cta-row">
          <a href="#projects" className="btn btn--primary" style={{ backgroundColor: "rgb(241, 126, 34)" }}>View Projects <span className="btn__arrow">→</span></a>
          <a href="#contact" className="btn btn--outline-ink">Contact</a>
        </div>

        <div className="hero__stats">
          <div className="stat">
            <div className="stat__value">17<span className="stat__unit">년 4개월</span></div>
            <div className="stat__label">총 경력</div>
          </div>
          <div className="stat">
            <div className="stat__value">12<span className="stat__unit">년</span></div>
            <div className="stat__label">LG전자 도메인</div>
          </div>
          <div className="stat">
            <div className="stat__value">14<span className="stat__unit">개</span></div>
            <div className="stat__label">프로젝트</div>
          </div>
          <div className="stat">
            <div className="stat__value">6<span className="stat__unit">개국</span></div>
            <div className="stat__label">해외 출장·연계</div>
          </div>
        </div>
      </div>

      <div className="hero__footnote">
        <span>↓ Scroll</span>
      </div>
    </section>);
}

// ========================================
// About / Core competencies
// ========================================
function About() {
  return (
    <section className="about" id="about" data-screen-label="02 About" data-band="cloud">
      <SectionLabel no="01" label="About" />
      <div className="about__grid">
        <div className="about__left">
          <h2 className="about__title">
            "분석 · 설계 · 개발 · 운영을 끊김 없이 잇는다"
          </h2>
          <p className="about__lead">
            업무 시스템의 한가운데에서 사용자 요구사항과 기술 의사결정을 함께 풀어왔습니다.
            특히 글로벌 생산법인 데이터 연계와 리뉴얼 프로젝트에서 PL로 일정·품질을 책임지며
            DevonFrame · Spring 기반의 안정적인 백엔드를 다년간 운영했습니다.
          </p>
          <ul className="about__bullets">
            <li>개발 PL 5년 이상</li>
            <li>공통 개발 · DB 모델링을 모두 직접 수행하는 풀스택</li>
            <li>레거시 → 웹표준/클라우드 전환 수행</li>
            <li>해외 생산법인 출장을 통한 현지 요구사항 수렴</li>
          </ul>
        </div>
        <div className="about__right">
          {CORE_COMPETENCIES.map((c, i) =>
          <div className="competency" key={c.id}>
              <div className="competency__no" style={{ color: "rgb(241, 126, 34)" }}>0{i + 1}</div>
              <div className="competency__body">
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="about__domains" aria-label="Core Domains">
        <div className="about__domains-label">Core Domains</div>
        <div className="about__domains-row">
          {[
          { abbr: "Backend", name: "Backend", note: "Java · C# · Spring Framework · MyBatis" },
          { abbr: "Frontend", name: "Frontend", note: "Nexacro · RealGrid · Javascript" },
          { abbr: "Database", name: "Database", note: "Oracle · MariaDB · Procedure" },
          { abbr: "API/ETL", name: "API/ETL", note: "REST API · Apache NiFi · EAI" },
          { abbr: "DevOps", name: "DevOps", note: "Jenkins CI/CD · Tomcat" },
          { abbr: "Cloud/AI", name: "Cloud/AI", note: "EC2 · Bedrock · OpenSearch" }].
          map((d) =>
          <div className="domain" key={d.abbr} style={{ borderColor: "rgb(241, 126, 34)" }}>
              <div className="domain__abbr">{d.abbr}</div>
              <div className="domain__note">{d.note}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ========================================
// Skills
// ========================================
function Skills() {
  return (
    <section className="skills" id="skills" data-screen-label="03 Skills" data-band="canvas">
      <SectionLabel no="02" label="Tech Stack" />
      <div className="skills__head">
        <h2 className="section-title">
          17년간 다뤄온 기술 스택
        </h2>
      </div>
      <div className="skills__grid">
        {SKILLS.map((group) =>
        <div className="skill-group" key={group.group}>
            <h3 className="skill-group__title">{group.group}</h3>
            <div className="skill-group__items">
              {group.items.map((s) =>
            <div className="skill" key={s.name}>
                  <span className="skill__name">{s.name}</span>
                  <span className="skill__bar">
                    {[1, 2, 3, 4, 5].map((n) =>
                <span key={n} className={`skill__pip ${n <= s.level ? 'is-on' : ''}`}></span>
                )}
                  </span>
                </div>
            )}
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ========================================
// Career timeline
// ========================================
function Career() {
  return (
    <section className="career" id="career" data-screen-label="04 Career" data-band="canvas">
      <SectionLabel no="04" label="Career Timeline" />
      <div className="career__head">
        <h2 className="section-title">근무 이력</h2>
      </div>
      <ol className="timeline">
        {CAREER.map((row, i) =>
        <li className="timeline__row" key={i}>
            <div className="timeline__period">
              <div className="timeline__years">{row.period}</div>
              <div className="timeline__span">{row.span}</div>
            </div>
            <div className="timeline__dot" aria-hidden></div>
            <div className="timeline__body">
              <div className="timeline__head-row">
                <div>
                  <h3 className="timeline__company">{row.company}</h3>
                  <div className="timeline__client">고객사 : {row.client}</div>
                </div>
                <div className="timeline__role">{row.role}</div>
              </div>
              <ul className="timeline__duties">
                {row.duties.map((d, j) => <li key={j}>{d}</li>)}
              </ul>
            </div>
          </li>
        )}
      </ol>
    </section>);

}

// ========================================
// Projects
// ========================================
function ProjectCard({ p, expanded, onToggle }) {
  return (
    <article className={`project ${expanded ? 'is-open' : ''} ${p.flagship ? 'is-flagship' : ''}`}>
      <button className="project__head" onClick={onToggle} aria-expanded={expanded}>
        <div className="project__no">{p.no}</div>
        <div className="project__title-block">
          <div className="project__meta-row">
            <span className="project__period">{p.period}</span>
            <span className="project__dot">·</span>
            <span className="project__duration">{p.duration}</span>
            <span className="project__dot">·</span>
            <span className="project__role">{p.role}</span>
          </div>
          <h3 className="project__title">{p.title}</h3>
          <div className="project__subtitle">{p.subtitle}</div>
          <div className="project__impact-preview">
            <div className="project__impact-label">주요 성과</div>
            <ul className="project__list project__list--impact">
              {p.impact.map((w, i) => <li key={i}>{w}</li>)}
            </ul>
          </div>
        </div>
        <div className="project__chev" aria-hidden>{expanded ? "−" : "+"}</div>
      </button>

      <div className="project__detail" style={{ maxHeight: expanded ? "2000px" : "0px" }}>
        <div className="project__detail-inner">
          <div className="project__col">
            <div className="project__col-label">담당 업무</div>
            <ul className="project__list">
              {p.work.map((w, i) => <li key={i}>{w}</li>)}
            </ul>
            <div className="project__col-label">수행 업무</div>
            <ul className="project__list">
              {p.task.map((w, i) => <li key={i}>{w}</li>)}
            </ul>
          </div>
          <div className="project__tags">
            {p.tags.map((t) => <Tag key={t}>{t}</Tag>)}
          </div>
        </div>
      </div>
    </article>);

}

function Projects({ density }) {
  const [openIds, setOpenIds] = useState([]);
  const allOpen = openIds.length === PROJECTS.length;

  const toggleProject = (id) => {
    setOpenIds((current) =>
      current.includes(id)
        ? current.filter((openId) => openId !== id)
        : [...current, id]
    );
  };

  const toggleAllProjects = () => {
    setOpenIds(allOpen ? [] : PROJECTS.map((p) => p.id));
  };

  return (
    <section className="projects" id="projects" data-screen-label="03 Projects" data-band="cloud">
      <SectionLabel no="03" label="Project Case Studies" />
      <div className="projects__head">
        <div className="projects__title-row">
          <h2 className="section-title">프로젝트</h2>
        </div>
      </div>
      <div className="projects__bulk-actions" aria-label="프로젝트 목록 일괄 제어">
        <button
          type="button"
          className={`projects__bulk-btn ${allOpen ? "is-open" : ""}`}
          onClick={toggleAllProjects}
          aria-pressed={allOpen}>
          {allOpen ? "전체 닫기" : "전체 열기"}
        </button>
      </div>
      <div className={`projects__list ${density === "compact" ? "is-compact" : ""}`}>
        {PROJECTS.map((p) =>
        <ProjectCard
          key={p.id}
          p={p}
          expanded={openIds.includes(p.id)}
          onToggle={() => toggleProject(p.id)} />

        )}
      </div>
    </section>);

}

// ========================================
// Contact / Footer
// ========================================
function Contact() {
  return (
    <section className="contact" id="contact" data-screen-label="06 Contact" data-band="ink">
      <SectionLabel no="05" label="Contact" />
      <div className="contact__grid">
        <div className="contact__main">
          <h2 className="contact__title">
            
            <br />
          </h2>
        </div>
        <div className="contact__side">
          <div className="contact__row">
            <span className="contact__label">Name</span>
            <span className="contact__value">{PROFILE.nameKo} <em>{PROFILE.nameEn}</em></span>
          </div>
          <div className="contact__row">
            <span className="contact__label">Title</span>
            <span className="contact__value">개발 PL / Full-Stack Engineer</span>
          </div>
          <div className="contact__row">
            <span className="contact__label">Email</span>
            <span className="contact__value contact__value--mono">opaqe@naver.com</span>
          </div>
          <div className="contact__row">
            <span className="contact__label">Cert</span>
            <span className="contact__value">
              {CERTIFICATIONS.map((c) =>
              <span key={c.name}>{c.name}</span>
              )}
            </span>
          </div>
        </div>
      </div>
      <div className="contact__foot">
        <span>© 2026</span>
      </div>
    </section>);

}

// ========================================
// Featured promo slab (dark)
// ========================================
function FeaturedPromo() {
  const flagship = PROJECTS.find((p) => p.id === "heros") || PROJECTS[0];
  return (
    <section className="promo" data-band="ink" data-screen-label="04.5 Featured">
      <div className="promo__inner">
        <div className="promo__eyebrow">
          <span className="promo__eyebrow-no">Featured Project</span>
          <span className="promo__eyebrow-line"></span>
          <span className="promo__eyebrow-meta">{flagship.period} · {flagship.duration}</span>
        </div>
        <div className="promo__body">
          <div className="promo__copy">
            <h2 className="promo__title">{flagship.title}</h2>
            <div className="promo__sub">{flagship.subtitle}</div>
            <p className="promo__lead">{flagship.summary}</p>
            <div className="promo__tags">
              {flagship.tags.slice(0, 8).map((t) => <span className="promo__tag" key={t}>{t}</span>)}
            </div>
          </div>
          <div className="promo__metrics">
            <div className="promo__metric">
              <div className="promo__metric-value">2<span>년 8개월</span></div>
              <div className="promo__metric-label">기간</div>
            </div>
            <div className="promo__metric">
              <div className="promo__metric-value">PL<span></span></div>
              <div className="promo__metric-label">참여 역할</div>
            </div>
            <div className="promo__metric">
              <div className="promo__metric-value">AWS<span>Bedrock</span></div>
              <div className="promo__metric-label">AI PoC</div>
            </div>
            <div className="promo__metric">
              <div className="promo__metric-value">Oracle<span>+ MariaDB</span></div>
              <div className="promo__metric-label">DB</div>
            </div>
          </div>
        </div>
        <a className="promo__cta" href="#projects">
          <span>Read full case study</span>
          <span className="promo__cta-arrow">→</span>
        </a>
      </div>
    </section>);

}

Object.assign(window, { Hero, About, Skills, Career, Projects, Contact, FeaturedPromo });