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

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

  /* ── Narrative ───────────────────────────── */
  function BrandNarrative({ brand }) {
    return (
      <section className="sec">
        <span className="sec-label">brand</span>
        <div className="narrative-layout">
          <div>
            {brand.logoW && (
              <img src={brand.logoW} alt={brand.name} className="narrative-logo" />
            )}
            <h2 className="narrative-heading">{brand.category}</h2>
            <a
              href="https://ponings.cafe24.com/skin-skin18"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn--primary"
            >
              브랜드 스토어 →
            </a>
          </div>
          <div>
            {brand.narrative.map((p, i) => {
              const isFirst = i === 0;
              const isLast = i === brand.narrative.length - 1;
              const cls = ['narrative-p', isFirst && 'narrative-p--first', isLast && 'narrative-p--last']
                .filter(Boolean).join(' ');
              return <p key={i} className={cls}>{p}</p>;
            })}
          </div>
        </div>
      </section>
    );
  }

  /* ── Stats ───────────────────────────────── */
  function AnimatedCounter({ target, decimals }) {
    const [count, setCount] = React.useState(0);
    const elRef = React.useRef(null);
    const started = React.useRef(false);

    React.useEffect(() => {
      const el = elRef.current;
      if (!el) return;
      const observer = new IntersectionObserver(([entry]) => {
        if (!entry.isIntersecting || started.current) return;
        started.current = true;
        const duration = 1800;
        const startTime = performance.now();
        function step(now) {
          const progress = Math.min((now - startTime) / duration, 1);
          const ease = 1 - Math.pow(1 - progress, 4);
          setCount(ease * target);
          if (progress < 1) requestAnimationFrame(step);
        }
        requestAnimationFrame(step);
      }, { threshold: 0.4 });
      observer.observe(el);
      return () => observer.disconnect();
    }, [target]);

    const display = decimals > 0
      ? count.toFixed(decimals)
      : Math.floor(count).toLocaleString();

    return <span ref={elRef}>{display}</span>;
  }

  function BrandStats({ brand }) {
    if (!brand.stats) return null;
    return (
      <section className="sec sec--alt">
        <span className="sec-label">by the numbers</span>
        <p className="stats-lead">데이터로 증명하는 신뢰</p>
        <div className="stats-grid">
          {brand.stats.map((s, i) => (
            <div key={i} className="stat-big-card">
              <div className="stat-big-num">
                <AnimatedCounter target={s.targetNum} decimals={s.decimals} />
              </div>
              <div style={{ flex: 1 }} />
              <div className="stat-big-bottom">
                <div className="stat-big-label">{s.label}</div>
                <div className="stat-big-note">{s.note}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── SAGX 6중 기능성 (BESTRONG373 전용) ──── */
  function BrandSagxFeature({ brand }) {
    if (!brand.features) return null;
    return (
      <section className="sec sec--dark">
        <span className="sec-label">6-way functionality</span>
        <div className="sagx-layout">
          <div>
            <h2 className="sagx-title">
              남성 건강의<br />6가지 기준
            </h2>
          </div>
          <div>
            <p className="sagx-desc">
              독점 개별인정형 원료 SAGX(단삼주정추출분말)를 핵심으로,
              전립선·눈 건강·혈행·세포분열·면역·항산화까지—
              과학적으로 설계된 남성 6중 기능성 솔루션.
            </p>
          </div>
        </div>
        <div className="feature-grid">
          {brand.features.map((f, i) => (
            <div key={i} className="feature-card">
              <div className="feature-card-idx">0{i + 1}</div>
              <div className="feature-card-name">{f.name}</div>
              <div style={{ flex: 1 }} />
              <div className="feature-card-sep">
                <div className="feature-card-ingredient">{f.ingredient}</div>
                <div className="feature-card-bottom">
                  <span className="feature-card-dose">{f.dose}</span>
                  {f.note && <span className="feature-card-note">{f.note}</span>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── Tech Platform (MICRO MIRACLE 전용) ─── */
  function BrandTechPlatform({ brand }) {
    if (!brand.techPlatform) return null;
    return (
      <section className="sec">
        <span className="sec-label">technology platform</span>
        <div className="tech-platform-layout">
          <div>
            <h2 className="tech-platform-title">
              기술이<br />피부가 되는<br />플랫폼
            </h2>
          </div>
          <div>
            <p className="tech-platform-desc">
              마이크로니들 DDS 플랫폼을 중심으로,
              독점 원료 계약과 특허 기술 실시를 통해
              피부 전달 혁신을 구현합니다.
            </p>
          </div>
        </div>
        <div className="tech-platform-grid">
          {brand.techPlatform.map((t, i) => (
            <div key={i} className="tech-platform-card">
              <div className="tech-platform-card-idx">0{i + 1}</div>
              <div className="tech-platform-card-name">{t.name}</div>
              <div style={{ flex: 1 }} />
              <p className="tech-platform-card-desc">{t.desc}</p>
              <div className="tech-platform-card-badge">{t.badge}</div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── Values ──────────────────────────────── */
  function BrandValues({ brand }) {
    if (!brand.values) return null;
    return (
      <section className="sec">
        <span className="sec-label">brand values</span>
        <div className="values-grid">
          {brand.values.map((v, i) => (
            <div key={i}>
              {v.media && (
                <div className="values-card-media">
                  {v.media.type === 'video'
                    ? <video src={v.media.src} autoPlay muted loop playsInline />
                    : <img src={v.media.src} alt={v.en} />
                  }
                </div>
              )}
              <div className="values-card-body">
                <div className="values-card-idx">0{i + 1}</div>
                <div className="values-card-title">{v.en}</div>
                <div className="values-card-desc">{v.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── Lineup ──────────────────────────────── */
  function BrandLineup({ brand }) {
    return (
      <section className="sec sec--alt">
        <span className="sec-label">lineup</span>
        <div className="lineup-grid">
          {brand.lineups.map((lineup) => (
            <div key={lineup.name} className="lineup-card">
              <div className="lineup-img">
                {lineup.img && lineup.img !== 'PRODUCT IMAGE'
                  ? <img src={lineup.img} alt={lineup.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  : 'PRODUCT IMAGE'
                }
              </div>
              <div>
                <div className="lineup-name">{lineup.name}</div>
                <div className="lineup-slogan">{lineup.slogan}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── CTA Banner ──────────────────────────── */
  function BrandCta({ onNavigate }) {
    return (
      <GNBSCtaBanner
        eyebrow="GNB COMMUNITY"
        headline={"과학과 기술이\n당신의 삶을\n바꿀 수 있다고 믿습니다."}
        body={"함께 만들어갈 사람을 찾습니다.\n지앤바이오솔루션과 함께 성장하세요."}
        ctaLabel="JOBS →"
        onCta={() => onNavigate('jobs')}
      />
    );
  }

  /* ── Page ────────────────────────────────── */
  function GNBSBrand({ brand: brandId, onNavigate }) {
    const brand = brandId === 'bestrong373'
      ? D.brands.bestrong373
      : D.brands.microMiracle;

    return (
      <main>
        <BrandHero brandId={brandId} />
        <BrandNarrative brand={brand} />
        <BrandTechPlatform brand={brand} />
        <BrandStats brand={brand} />
        <BrandSagxFeature brand={brand} />
        <BrandValues brand={brand} />
        <BrandLineup brand={brand} />
        <BrandCta onNavigate={onNavigate} />
      </main>
    );
  }

  window.GNBSBrand = GNBSBrand;
})();