// Reusable UI primitives for the profile link-hub

const BrandBar = () => (
  <div className="brandbar">
    <div className="brandbar__logo">ITCONNECT</div>
    <div className="brandbar__divider" />
    <div className="brandbar__sub">Rebuild business with AI</div>
  </div>
);

const SectionHead = ({ icon: Icn, label, sub }) => (
  <>
    <div className="section-head reveal">
      <div className="section-head__icon">
        {Icn ? <Icn size={15} stroke={2} /> : null}
      </div>
      <div className="section-head__label">{label}</div>
      <div className="section-head__rule" />
    </div>
    {sub ? <p className="section-sub reveal">{sub}</p> : null}
  </>
);

const PrimaryCTA = ({ href, label, className = "" }) => (
  <a className={`cta-primary ${className}`} href={href}>
    <IconMail size={17} />
    <span>{label}</span>
    <IconArrowRight size={16} className="arrow" />
  </a>
);

const LinkButton = ({
  href, target, icon: Icn, thumb, title, sub, badge, badgeVariant, primary, external,
}) => (
  <a
    className={`linkbtn ${primary ? "linkbtn--primary" : ""} ${thumb ? "linkbtn--thumb" : ""} reveal`}
    href={href}
    target={target}
    rel={target === "_blank" ? "noopener noreferrer" : undefined}
  >
    {thumb ? (
      <div className="linkbtn__thumb" aria-hidden="true">{thumb}</div>
    ) : (
      <div className="linkbtn__icon">
        {Icn ? <Icn size={18} /> : null}
      </div>
    )}
    <div className="linkbtn__body">
      <div className="linkbtn__head">
        <div className="linkbtn__title">{title}</div>
        {badge ? (
          <div className={`linkbtn__badge ${badgeVariant === "hot" ? "linkbtn__badge--hot" : ""}`}>
            {badge}
          </div>
        ) : null}
      </div>
      {sub ? <div className="linkbtn__sub">{sub}</div> : null}
    </div>
    <div className="linkbtn__arrow">
      {external ? <IconArrowUpRight size={16} /> : <IconArrowRight size={16} />}
    </div>
  </a>
);

const Chips = ({ items }) => (
  <div className="chips reveal">
    {items.map((t, i) => <span className="chip" key={i}>{t}</span>)}
  </div>
);

const ProfileCard = ({ photoSrc }) => (
  <section className="profile reveal" aria-label="프로필">
    <div className="profile__band" aria-hidden="true" />
    <div className="profile__avatar">
      <img src={photoSrc} alt="최원재 대표 프로필" />
    </div>
    <div className="profile__body">
      <h1 className="profile__name">최원재</h1>
      <div className="profile__role">CEO · 아이티커넥트(주)</div>
      <p className="profile__title">
        <strong>AI로 업무를 혁신하고</strong><br/>
        자동화 하는 방법을 <span className="profile__hl">연구합니다</span>.
      </p>
      <div className="tags">
        <span className="tag">비개발자 창업가</span>
        <span className="tag">AI 바이브코딩 교육자</span>
        <span className="tag">실서비스 빌더</span>
      </div>
    </div>
  </section>
);

const BusinessCard = () => (
  <div className="biz-card reveal" aria-label="명함">
    <div className="biz-card__img biz-card__img--white">
      <img src="assets/biz-card-front.png" alt="명함 앞면" />
    </div>
    <div className="biz-card__img">
      <img src="assets/biz-card-back.png" alt="명함 뒷면" />
    </div>
  </div>
);

const SNSGrid = () => (
  <div className="sns-grid reveal">
    <a className="sns-item" href="https://instagram.com/itconnect_dev" target="_blank" rel="noopener noreferrer" aria-label="Instagram @itconnect_dev">
      <IconInstagram size={20} />
      <span className="sns-item__label">Instagram</span>
    </a>
    <a className="sns-item" href="https://youtube.com/@itconnect_dev" target="_blank" rel="noopener noreferrer" aria-label="YouTube @itconnect_dev">
      <IconYoutube size={20} />
      <span className="sns-item__label">YouTube</span>
    </a>
    <a className="sns-item" href="https://threads.net/@itconnect_dev" target="_blank" rel="noopener noreferrer" aria-label="Threads @itconnect_dev">
      <IconThreads size={20} />
      <span className="sns-item__label">Threads</span>
    </a>
    <a className="sns-item" href="https://www.linkedin.com/in/%EC%9B%90%EC%9E%AC-%EC%B5%9C-983478b6/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
      <IconLinkedin size={20} />
      <span className="sns-item__label">LinkedIn</span>
    </a>
  </div>
);

const BookCard = () => (
  <div className="book reveal">
    <div className="book__cover" aria-hidden="true">
      <div className="book__cover-title">비개발자를<br/>위한<br/>바이브코딩</div>
    </div>
    <div className="book__body">
      <div className="book__label">Upcoming Book</div>
      <div className="book__title">『비개발자를 위한 바이브코딩』</div>
      <span className="book__badge">출간 예정</span>
    </div>
  </div>
);

const FinalCTA = () => (
  <section className="final reveal" aria-label="문의">
    <div className="final__kicker">Contact</div>
    <h2 className="final__head">
      기업의 AI 도입 파트너,<br/>ITCONNECT 입니다.
    </h2>
    <p className="final__sub">
      문의 주시면<br/>영업일 기준 1일 내 회신드립니다.
    </p>
    <div className="final__email">contact@itconnect.dev</div>
    <PrimaryCTA
      href="https://itconnect.dev/contact"
      label="문의하기"
    />
  </section>
);

const Footer = () => (
  <footer className="foot">
    © 2026 아이티커넥트㈜ · <a href="mailto:contact@itconnect.dev">contact@itconnect.dev</a><br/>
    서울시 금천구 가산디지털1로 16, 420호 · <a href="https://itconnect.dev" target="_blank" rel="noopener noreferrer">itconnect.dev</a>
  </footer>
);

Object.assign(window, {
  BrandBar, SectionHead, PrimaryCTA, LinkButton, Chips,
  ProfileCard, BusinessCard, SNSGrid, BookCard, FinalCTA, Footer,
});