/* GNBS prototype v2026.04.30 — company */
(function () {
  const D = window.GNBS_DATA;
  const GNBSPageHero = window.GNBSPageHero;

  /* ── Hero ────────────────────────────────── */
  function CompanyHero() {
    return <GNBSPageHero />;
  }

  /* ── CEO ─────────────────────────────────── */
  function CompanyCeo() {
    const { ceo } = D.company;
    return (
      <section className="sec sec--alt">
        <span className="sec-label">ceo message</span>
        <div className="ceo-layout">
          <div>
            {ceo.message.map((p, i) => (
              <p key={i} className={i === 0 ? 'ceo-p' : 'ceo-p ceo-p--sub'}>
                {p}
              </p>
            ))}
            <p className="ceo-name">
              {ceo.name} <span className="ceo-title">{ceo.title}</span>
            </p>
          </div>
          <div className="ceo-photo">
            <img src="./assets/people-sample.png" alt="CEO" />
          </div>
        </div>
      </section>
    );
  }

  /* ── History ─────────────────────────────── */
  function CompanyHistory() {
    const [lightbox, setLightbox] = React.useState(null);

    React.useEffect(() => {
      const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
      document.addEventListener('keydown', onKey);
      return () => document.removeEventListener('keydown', onKey);
    }, []);

    return (
      <>
        <section className="sec">
          <span className="sec-label">history</span>
          <div className="history-layout">
            <div>
              <h2 className="history-title">
                2019–<br />2026
              </h2>
              <p className="history-desc">
                헬스케어와 뷰티케어의<br />경계를 넘어 새로운<br />바이오테크 시장을 만들어온<br />지앤바이오솔루션의 여정.
              </p>
            </div>
            <div>
              {D.history.map((h, i) => (
                <div key={i} className={`timeline-item${i === D.history.length - 1 ? ' timeline-last' : ''}`}>
                  <span className="timeline-date">{h.date}</span>
                  <div className="timeline-row">
                    <span>{h.event}</span>
                    {h.certImg && (
                      <img
                        src={h.certImg}
                        alt="인증서"
                        onClick={() => setLightbox(h.certImg)}
                        className="cert-img"
                      />
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {lightbox && (
          <div className="cert-lightbox" onClick={() => setLightbox(null)}>
            <img
              src={lightbox}
              alt="인증서"
              onClick={e => e.stopPropagation()}
              className="cert-lightbox-img"
            />
          </div>
        )}
      </>
    );
  }

  /* ── Organization ───────────────────────── */
  const ORG_LINES = [
    'M500,88 L500,122',
    'M100,122 L900,122',
    'M100,122 L100,150',
    'M367,122 L367,150',
    'M633,122 L633,150',
    'M900,122 L900,150',
    'M367,218 L367,252',
    'M217,252 L517,252',
    'M217,252 L217,272',
    'M367,252 L367,272',
    'M517,252 L517,272',
  ];

  function CompanyOrg() {
    const node = {
      fill: 'rgba(255,255,255,0.04)',
      stroke: 'rgba(255,255,255,0.13)',
      strokeWidth: 1,
    };
    const depts = [
      { rx: 10,  cx: 100, label: '경영지원실',     note: null  },
      { rx: 277, cx: 367, label: '커머스본부',      note: null  },
      { rx: 543, cx: 633, label: '디자인&브랜딩실', note: 'CDO' },
      { rx: 810, cx: 900, label: '오프라인본부',    note: null  },
    ];
    const teams = [
      { rx: 152, cx: 217, label: '커머스1팀' },
      { rx: 302, cx: 367, label: '커머스2팀' },
      { rx: 452, cx: 517, label: '커머스3팀' },
    ];

    return (
      <section className="sec sec--dark">
        <span className="sec-label">organization</span>
        <svg viewBox="0 0 1000 360" style={{ width: '100%', display: 'block', overflow: 'visible' }}>
          <defs>
            <filter id="orgGlow" x="-60%" y="-60%" width="220%" height="220%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="2.8" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>

          {ORG_LINES.map((d, i) => (
            <path key={i} d={d}
              stroke="rgba(195,208,225,0.55)" strokeWidth="1.4"
              fill="none" filter="url(#orgGlow)" />
          ))}

          {/* CEO */}
          <rect x={380} y={16} width={240} height={72} rx={8} {...node} />
          <text x={500} y={42} textAnchor="middle"
            fontFamily="Pretendard,sans-serif" fontSize={11}
            fill="rgba(255,255,255,0.36)" letterSpacing="0.14em">대표이사</text>
          <text x={500} y={70} textAnchor="middle"
            fontFamily="Pretendard,sans-serif" fontSize={22}
            fontWeight={500} fill="white" letterSpacing="-0.01em">서민근</text>

          {/* 부서 */}
          {depts.map((d, i) => (
            <g key={'d' + i}>
              <rect x={d.rx} y={150} width={180} height={68} rx={6} {...node} />
              <text x={d.cx} y={d.note ? 176 : 188} textAnchor="middle"
                fontFamily="Pretendard,sans-serif" fontSize={14}
                fontWeight={500} fill="rgba(255,255,255,0.78)">{d.label}</text>
              {d.note && (
                <text x={d.cx} y={200} textAnchor="middle"
                  fontFamily="Pretendard,sans-serif" fontSize={10}
                  fill="rgba(255,255,255,0.28)" letterSpacing="0.1em">{d.note}</text>
              )}
            </g>
          ))}

          {/* 커머스 서브팀 */}
          {teams.map((t, i) => (
            <g key={'t' + i}>
              <rect x={t.rx} y={272} width={130} height={52} rx={5} {...node} />
              <text x={t.cx} y={302} textAnchor="middle"
                fontFamily="Pretendard,sans-serif" fontSize={13}
                fill="rgba(255,255,255,0.52)">{t.label}</text>
            </g>
          ))}
        </svg>
      </section>
    );
  }

  /* ── Brand Lineup (통합) ─────────────────── */
  function CompanyBrandLineup({ onNavigate }) {
    const brands = [D.brands.bestrong373, D.brands.microMiracle];
    return (
      <section className="sec sec--alt">
        <span className="sec-label">brands</span>
        <div className="brand-lineup-grid">

          {/* Row 1: dark cards */}
          {brands.map((b) => (
            <div key={'card-' + b.id} className="brand-card">
              <span className="brand-card-cat">{b.category}</span>
              {b.logoW
                ? <img src={b.logoW} alt={b.name} style={{ height: '2.8vw' }} />
                : <h3 className="brand-card-title">{b.displayName}</h3>
              }
              <p className="brand-card-desc">{b.descriptor}</p>
              <span className="brand-card-cta" onClick={() => onNavigate(b.slug)}>
                브랜드 보기 →
              </span>
            </div>
          ))}

          {/* Row 2: lineup + roadmap */}
          {brands.map((b) => (
            <div key={'lineup-' + b.id} className="brand-lineup-panel">
              {b.lineups.map((lineup) => (
                <div key={lineup.name} className="brand-lineup-group">
                  <div className="brand-lineup-label">{lineup.name}</div>
                  {lineup.products.map((pr, j) => (
                    <div key={j} className="brand-product-row">
                      <div>
                        <span className="brand-product-name">{pr.name}</span>
                        {pr.note && (
                          <span className="brand-product-note">{pr.note}</span>
                        )}
                      </div>
                      <span className="lineup-launch">{pr.launch}</span>
                    </div>
                  ))}
                </div>
              ))}
              {b.roadmap && (
                <div className="brand-roadmap">
                  <div className="brand-roadmap-label">ROADMAP</div>
                  {b.roadmap}
                </div>
              )}
            </div>
          ))}

        </div>
      </section>
    );
  }

  /* ── Partners ────────────────────────────── */
  function CompanyPartners() {
    return (
      <section className="sec">
        <span className="sec-label">partners</span>
        <p className="partners-lead">
          지앤바이오솔루션은 세계적으로 인정받는 원료·기술·제조 경쟁력을 독점 파트너십으로 구축합니다.
        </p>
        <div className="partner-grid">
          {D.partners.map((p) => (
            <div key={p.name} className="partner-card">
              <div className="partner-logo-box">
                {p.logo
                  ? <img src={p.logo} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                  : <span className="t-sm c-sub fw-500">{p.name}</span>
                }
              </div>
              <div className="partner-name">{p.name}</div>
              <div className="partner-desc">{p.desc}</div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── Advisors ────────────────────────────── */
  function CompanyAdvisors() {
    return (
      <section className="sec sec--alt">
        <span className="sec-label">advisors</span>
        <div className="advisors-grid">
          {D.advisors.map((a) => (
            <div key={a.name} className="advisor-card">
              <div className="advisor-avatar">
                <img src={a.photo || './assets/people-sample.png'} alt={a.name}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center' }} />
              </div>
              <div className="advisor-name">{a.name}</div>
              <div className="advisor-role" style={{ whiteSpace: 'pre-line' }}>{a.role}</div>
              {a.bio && <div className="advisor-bio">{a.bio}</div>}
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── Tech & Investment ───────────────────── */
  function CompanyTech() {
    const inv = D.investment;
    return (
      <section className="sec">
        <span className="sec-label">technology &amp; contracts</span>
        <div className="tech-layout">
          <div>
            <h2 className="tech-headline">
              검증 가능한 근거와<br />독점적 공급망으로<br />제품 경쟁력을 설계합니다.
            </h2>
          </div>
          <div>
            {D.technologies.map((t, i) => (
              <div key={i} className="tech-item">
                <span className="tech-num">0{i + 1}</span>
                <div>
                  <div className="tech-name">{t.name}</div>
                  <div className="tech-desc">{t.desc}</div>
                </div>
              </div>
            ))}
            <div className="invest-card">
              <div className="invest-label">INVESTMENT</div>
              <div className="invest-amount">{inv.amount}</div>
              <div className="invest-detail">{inv.date} — {inv.investor} ({inv.type})</div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ── Page ────────────────────────────────── */
  function GNBSCompany({ onNavigate }) {
    return (
      <main>
        <CompanyHero />
        <CompanyCeo />
        <CompanyHistory />
        <CompanyOrg />
        <CompanyBrandLineup onNavigate={onNavigate} />
        <CompanyPartners />
        <CompanyAdvisors />
        <CompanyTech />
      </main>
    );
  }

  window.GNBSCompany = GNBSCompany;
})();