// 포트폴리오 컴포넌트
const { useState, useEffect, useRef } = React;
const { PROFILE, CORE_COMPETENCIES, TECH_SPECTRUM, DOMAIN_EXPERIENCE, KEY_STRENGTHS, SKILLS, CAREER, PROJECTS, CERTIFICATIONS, CLUBS, EDUCATION_MILITARY } = 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>;
}

function HeroSummary() {
  const summaryLines = PROFILE.summary.split(/\n+/).filter(Boolean);

  return (
    <p className="hero__summary">
      {summaryLines.map((line, index) => (
        <span key={index}>{renderMarkedText(line, "hero__summary-mark")}</span>
      ))}
    </p>
  );
}

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

  return (
    <section className="hero" id="hero" data-screen-label="01 Hero" data-band="canvas">
      <div className="hero__topbar">
        <a className="hero__brand" href="#hero" aria-label="Portfolio first screen" onClick={closeMenu}>
          <span className="hero__monogram">
</span>
          <span className="hero__brand-name">Portfolio</span>
        </a>
        <button
          className="hero__menu-toggle"
          type="button"
          aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
          aria-expanded={isMenuOpen}
          aria-controls="portfolio-nav"
          onClick={() => setIsMenuOpen((open) => !open)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
        <nav className={`hero__nav${isMenuOpen ? " is-open" : ""}`} id="portfolio-nav">
          <a href="#about" onClick={closeMenu}>About</a>
          <a href="#skills" onClick={closeMenu}>Expertise</a>
          <a href="#projects" onClick={closeMenu}>Projects</a>
          <a href="#career" onClick={closeMenu}>Career</a>
          <a href="#credentials" onClick={closeMenu}>Credentials</a>
          <a href="#contact" onClick={closeMenu}>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(0, 115, 230)" }}>끝까지 책임지고</em>
            <br />
            팀과 함께 만들어가는
            <br />
            <em style={{ color: "rgb(0, 115, 230)" }}>개발 PL</em>
          </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>
          <HeroSummary />
        </div>

        <div className="hero__cta-row">
          <a href="#projects" className="btn btn--primary" style={{ backgroundColor: "rgb(0, 115, 230)" }}>View Projects <span className="btn__arrow">→</span></a>
          <a href="#contact" className="btn btn--outline-ink">Contact</a>
          <a href="print.html" target="_blank" className="btn btn--outline-ink">경력기술서 PDF</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">7<span className="stat__unit">년</span></div>
            <div className="stat__label">개발 PL 수행</div>
          </div>
          <div className="stat">
            <div className="stat__value">5<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__strengths" aria-label="Key Strengths">
        <div className="about__strengths-label">Key Strengths</div>
        <div className="about__strengths-grid">
          {KEY_STRENGTHS.map((s) =>
          <div className="strength" key={s.id} style={{ borderColor: "rgb(0, 115, 230)" }}>
              <h3 className="strength__title">{s.title}</h3>
              <ul className="strength__items">
                {s.items.map((item, i) => <li key={i}>{renderMarkedText(item)}</li>)}
              </ul>
            </div>
          )}
        </div>
      </div>

      <div className="about__grid about__grid--spectrum" aria-label="Tech Spectrum">
        <div className="about__cards-label">Tech Spectrum</div>
        <div className="spectrum-timeline">
          {TECH_SPECTRUM.map((item) =>
          <article className="spectrum-item" key={item.id}>
              <div className="spectrum-item__date">
                <span>{item.period}</span>
              </div>
              <div className="spectrum-item__node" aria-hidden="true"></div>
              <h3 className="spectrum-item__title">{item.title}</h3>
              <div className="spectrum-item__body">
                <div className="spectrum-item__header">
                  <span>{item.outcome}</span>
                </div>
                <p>{item.role}</p>
                <div className="spectrum__tags">
                  {item.tags.map((tag) => <span className="spectrum__tag" key={tag}>{tag}</span>)}
                </div>
              </div>
            </article>
          )}
        </div>
      </div>

    </section>);

}

// ========================================
// Expertise
// ========================================
function DomainExperience() {
  return (
    <div className="about__domains skills__domains" aria-label="Domain Experience">
      <div className="about__domains-label">Domain Experience</div>
      <div className="about__domains-row">
        {DOMAIN_EXPERIENCE.map((d) =>
          <div className="domain" key={d.abbr}>
            <div className="domain__abbr">{d.abbr}</div>
            <div className="domain__note">{d.note}</div>
          </div>
        )}
      </div>
    </div>
  );
}

function Skills() {
  return (
    <section className="skills" id="skills" data-screen-label="03 Expertise" data-band="canvas">
      <SectionLabel no="02" label="Expertise" />
      <div className="expertise-capabilities" aria-label="Capabilities">
        <div className="skills__grid-label">Capabilities</div>
        <div className="expertise-capabilities__grid">
          {CORE_COMPETENCIES.map((item) =>
            <article className="expertise-capability" key={item.id}>
              <h3 className="expertise-capability__title">{item.title}</h3>
              <p className="expertise-capability__desc">{item.desc}</p>
            </article>
          )}
        </div>
      </div>
      <DomainExperience />
      <div className="skills__grid-label">Tech Skills</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>
                </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>);

}

// ========================================
// Credentials
// ========================================
function Credentials() {
  return (
    <section className="credentials" id="credentials" data-screen-label="05 Credentials" data-band="cloud">
      <SectionLabel no="05" label="Credentials" />
      <div className="credentials__grid">
        {EDUCATION_MILITARY.map((item) =>
          <article className={`credential-card credential-card--${item.id}`} key={item.id}>
            <div className="credential-card__label">{item.label}</div>
            <div className="credential-card__entries">
              {item.items.map((entry) =>
                <div className="credential-card__entry" key={`${entry.period}-${entry.text}`}>
                  <span className="credential-card__period">{entry.period}</span>
                  <span className="credential-card__text">{entry.text}</span>
                </div>
              )}
            </div>
          </article>
        )}
        <article className="credential-card credential-card--cert credential-card--row">
          <div className="credential-card__label">자격증</div>
          <div className="credential-card__entries">
            {CERTIFICATIONS.map((cert) =>
              <div className="credential-card__entry" key={cert.name}>
                <span className="credential-card__period">{cert.date}</span>
                <span className="credential-card__text">
                  {[cert.name, cert.issuer].filter(Boolean).join(" · ")}
                </span>
              </div>
            )}
          </div>
        </article>
        <article className="credential-card credential-card--club credential-card--row">
          <div className="credential-card__label">동호회</div>
          <div className="credential-card__entries">
            {CLUBS.map((club) =>
              <div className="credential-card__entry" key={`${club.period}-${club.text}`}>
                <span className="credential-card__period">{club.period}</span>
                <span className="credential-card__text">{club.text}</span>
              </div>
            )}
          </div>
        </article>
      </div>
    </section>);

}

// ========================================
// Projects
// ========================================
function renderMarkedText(text, markClassName = "project__impact-mark") {
  if (!text.includes("[[")) return text;

  return text.split(/(\[\[[^\]]+\]\])/g).map((part, index) => {
    if (!part.startsWith("[[") || !part.endsWith("]]")) return part;
    return (
      <mark className={markClassName} key={`${part}-${index}`}>
        {part.slice(2, -2)}
      </mark>
    );
  });
}

function ProjectCard({ p, expanded, onToggle }) {
  return (
    <article className={`project ${expanded ? 'is-open' : ''} ${p.flagship ? 'is-flagship' : ''}`}>
      <div className="project__head">
        <button className="project__toggle" 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>
          <div className="project__chev" aria-hidden>{expanded ? "−" : "+"}</div>
        </button>
        <div className="project__impact-preview" aria-label="주요 성과">
          <div className="project__impact-label">주요 성과</div>
          <ul className="project__list project__list--impact">
            {p.impact.map((w, i) => <li key={i}>{renderMarkedText(w)}</li>)}
          </ul>
        </div>
      </div>

      <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, printMode }) {
  const [openIds, setOpenIds] = useState(() =>
    printMode === "expanded" ? PROJECTS.map((p) => p.id) : []
  );
  const beforePrintOpenIds = useRef(null);
  const allOpen = openIds.length === PROJECTS.length;

  useEffect(() => {
    if (printMode) {
      setOpenIds((current) => {
        if (beforePrintOpenIds.current === null) {
          beforePrintOpenIds.current = current;
        }
        return printMode === "expanded" ? PROJECTS.map((p) => p.id) : [];
      });
    } else if (beforePrintOpenIds.current !== null) {
      setOpenIds(beforePrintOpenIds.current);
      beforePrintOpenIds.current = null;
    }
  }, [printMode]);

  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="Projects" />
      <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="06" 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>
      </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, Credentials, Projects, Contact, FeaturedPromo });