/* GNBS prototype v2026.04.30 — home */
(function () {
  const D = window.GNBS_DATA;
  const GNBSHero = window.GNBSHero;
  const GNBSCtaBanner = window.GNBSCtaBanner;

  /* ── Hero ────────────────────────────────── */
  function HomeHero() {
    return <GNBSHero />;
  }

  /* ── Solution ────────────────────────────── */
  function HomeSolution({ onNavigate }) {
    const bs = D.brands.bestrong373;
    const mm = D.brands.microMiracle;

    return (
      <section className="sec">
        <span className="sec-label">solutions</span>
        <div className="solution-grid">
          <div>
            <h2 className="solution-headline">
              건강과 아름다움의<br />
              본질을 탐구합니다.
            </h2>
            <p className="solution-sub">
              원료·기술·임상·제조·브랜딩·유통까지,<br />
              고객이 신뢰할 수 있는 기준으로 설계된 완성형 솔루션.
            </p>
          </div>

          <div className="solution-cards">
            {[bs, mm].map((b) => (
              <div
                key={b.id}
                className="solution-card"
                onClick={() => onNavigate(b.slug)}
              >
                <div className="solution-card-tag">{b.category}</div>
                <div className="solution-card-title">{b.name}</div>
                <p className="solution-card-body">{b.pitch}</p>
                <div className="solution-card-cta">
                  브랜드 보기 <span>→</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ── Partnership ─────────────────────────── */
  function HomePartnership() {
    const partners = D.partners;
    const advisors = D.advisors;
    const track = [...partners, ...partners]; // double for loop

    return (
      <section className="sec sec--alt">
        <span className="sec-label">partnership &amp; advisors</span>

        {/* Marquee */}
        <div className="marquee-outer">
          <div className="marquee-track">
            {track.map((p, i) => (
              <span key={i} className="marquee-item">
                {p.logo
                  ? <img src={p.logo} alt={p.name} className="marquee-logo" />
                  : <span className="marquee-name">{p.name}</span>
                }
                <span className="marquee-sep" />
              </span>
            ))}
          </div>
        </div>

        {/* Advisors */}
        <div className="advisors-grid">
          {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', display: 'block' }} />
              </div>
              <div className="advisor-name">{a.name}</div>
              <div className="advisor-role" style={{ whiteSpace: 'pre-line' }}>{a.role}</div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── Company ─────────────────────────────── */
  function HomeCompany({ onNavigate }) {
    const { headline, manifesto, stats } = D.company;
    return (
      <section className="sec">
        <span className="sec-label">company</span>
        <div className="company-grid">
          <div>
            <h1 className="company-headline">{headline}</h1>
            <p className="company-manifesto">{manifesto}</p>
            <button className="btn btn--outline" onClick={() => onNavigate('company')}>
              자세히 보기 →
            </button>
          </div>
          <div className="stat-cards">
            {stats.map((s) => (
              <div key={s.label} className="stat-card">
                <span className="stat-number">{s.value}</span>
                <span className="stat-label">{s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ── Culture Banner ──────────────────────── */
  function HomeCultureBanner({ onNavigate }) {
    return (
      <GNBSCtaBanner
        eyebrow="GNB COMMUNITY"
        headline={"지앤바이오솔루션은\n평범한 회사를 넘어\n하나의 강력한 커뮤니티입니다."}
        body={"과학적 근거와 집요한 실행력을 공유하는\n사람들이 모인 곳. GNB Community."}
        ctaLabel="CULTURE →"
        onCta={() => onNavigate('culture')}
      />
    );
  }

  /* ── Page ────────────────────────────────── */
  function GNBSHome({ onNavigate }) {
    return (
      <main>
        <HomeHero />
        <HomeSolution onNavigate={onNavigate} />
        <HomePartnership />
        <HomeCompany onNavigate={onNavigate} />
        <HomeCultureBanner onNavigate={onNavigate} />
      </main>
    );
  }

  window.GNBSHome = GNBSHome;
})();