// Home page
const HomePage = ({setRoute, onContact}) => {
  const D = window.PAS_DATA;
  const M = window.PAS_MEDIA || {products: {}, care: []};
  const [activeProduct, setActiveProduct] = React.useState(D.products[0].id);
  const active = D.products.find(p => p.id === activeProduct);
  const activeMedia = M.products[active.id];

  // animated chart bars
  const barHeights = [34, 42, 58, 48, 72, 64, 88, 76, 92, 82, 68, 78];

  return (
    <main>
      {/* Hero */}
      <section className="pas-hero">
        <div className="pas-container">
          <div className="pas-hero-inner">
            <div>
              <div className="pas-hero-meta">
                <span className="pas-hero-meta-dot"/>
                <span>PAS · Pharmacy AI Solution</span>
                <span>v8.2 / 2026</span>
              </div>
              <h1 className="pas-hero-title">
                약국 경영,<br/>
                <em>AI</em>가 함께<br/>
                운영합니다
              </h1>
              <p className="pas-hero-sub">
                PAS는 약국 환경에 필요한 업무 전반을 AI와 자동화로 연결하는
                약국 경영 통합 솔루션입니다. 지난 20년, 전국 15,000여 약국이 선택했습니다.
              </p>
              <div className="pas-hero-ctas">
                <button className="pas-btn pas-btn-lg" onClick={onContact}>
                  무료 데모 신청 <Icon name="arrow" size={16}/>
                </button>
                <button className="pas-btn pas-btn-ghost pas-btn-lg" onClick={() => setRoute("product")}>
                  <Icon name="play" size={12}/> 제품 둘러보기
                </button>
              </div>
            </div>
            <div className="pas-hero-viz">
              <div className="pas-hero-card">
                <div className="pas-hero-stat-row">
                  <div className="pas-hero-stat">
                    <div className="pas-hero-stat-k">오늘 처방</div>
                    <div className="pas-hero-stat-v">248 <em>+12%</em></div>
                  </div>
                  <div className="pas-hero-stat">
                    <div className="pas-hero-stat-k">평균 처리 시간</div>
                    <div className="pas-hero-stat-v">42s <em>−8%</em></div>
                  </div>
                  <div className="pas-hero-stat">
                    <div className="pas-hero-stat-k">재고 알림</div>
                    <div className="pas-hero-stat-v">3 <em>resolved</em></div>
                  </div>
                  <div className="pas-hero-stat">
                    <div className="pas-hero-stat-k">오늘 매출</div>
                    <div className="pas-hero-stat-v">₩3.8M <em>live</em></div>
                  </div>
                </div>
                <div className="pas-hero-chart">
                  <div className="pas-hero-bar-label">
                    <span>처방 처리 — 지난 12시간</span>
                    <span>MAX 92</span>
                  </div>
                  <div className="pas-hero-bars">
                    {barHeights.map((h, i) => (
                      <div key={i} className={`pas-hero-bar ${h === 92 ? "is-peak" : ""}`} style={{height: `${h}%`, animationDelay: `${i * 60}ms`}}/>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="pas-hero-marquee">
          <div className="pas-hero-marquee-track">
            {[...Array(2)].map((_, r) => (
              <React.Fragment key={r}>
                <span>◇ 전국 15,000+ 약국</span>
                <span>◇ 16개 대리점 네트워크</span>
                <span>◇ 20년 업계 최장 운영</span>
                <span>◇ AI 복약 상담 2026 런칭</span>
                <span>◇ 일 평균 420만 처방 처리</span>
                <span>◇ 99.98% 시스템 가동률</span>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* Stats strip */}
      <section className="pas-stat-strip">
        {D.stats.map(s => (
          <div key={s.k} className="pas-stat-strip-item">
            <div className="pas-stat-strip-k">{s.k}</div>
            <div className="pas-stat-strip-v">{s.v}</div>
          </div>
        ))}
      </section>

      {/* Intro */}
      <section className="pas-section">
        <div className="pas-container">
          <div style={{display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48}}>
            <div>
              <div className="pas-eyebrow">About</div>
              <h2 className="pas-big-title">
                약국 경영<br/>
                <em>원스톱</em><br/>
                솔루션
              </h2>
            </div>
            <div style={{display: "grid", gap: 40, paddingTop: 20}}>
              <div>
                <h3>처방부터 청구까지, 하나의 흐름으로</h3>
                <p className="muted" style={{marginTop: 14, fontSize: 17, lineHeight: 1.6}}>
                  PAS는 처방전 입력, 조제, 결제, 청구, 재고 관리를 하나의 AI 엔진으로 연결합니다.
                  분절된 시스템 때문에 발생하던 이중 입력, 재고 누락, 수가 오류를 구조적으로 제거합니다.
                </p>
              </div>
              <div>
                <h3>전국 15,000명 약사님의 선택</h3>
                <p className="muted" style={{marginTop: 14, fontSize: 17, lineHeight: 1.6}}>
                  지난 20년간 지속 발전되어 온 PAS의 서비스를 전국 약사님들이 선택해 주셨습니다.
                  현장의 피드백이 제품에 실시간 반영되는 구조를 갖추고 있습니다.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Products */}
      <section className="pas-section" style={{background: "var(--surface)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)"}}>
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow">Products</div>
              <h2>
                약국 경영에 필요한<br/>
                전 제품 라인업
              </h2>
            </div>
            <div style={{maxWidth: 360, color: "var(--ink-soft)", fontSize: 15}}>
              6개 코어 제품이 서로 연동되며, 필요한 것만 선택해 도입할 수 있습니다. 탭을 눌러 각 제품을 살펴보세요.
            </div>
          </div>

          <div className="pas-products">
            <div className="pas-product-list">
              {D.products.map(p => (
                <button
                  key={p.id}
                  className={`pas-product-tab ${activeProduct === p.id ? "is-active" : ""}`}
                  onClick={() => setActiveProduct(p.id)}
                >
                  <span className="pas-product-tab-code">{p.code}</span>
                  <span>
                    <div className="pas-product-tab-name">{p.name}</div>
                    <div className="pas-product-tab-ko">{p.ko}</div>
                  </span>
                  <span className="pas-product-tab-icon"><Icon name="arrow" size={16}/></span>
                </button>
              ))}
            </div>

            <div className="pas-product-panel" key={active.id}>
              <div className="pas-fade-in">
                <div className="pas-product-panel-label">Product · {active.code}</div>
                <div className="pas-product-panel-name">{active.name}</div>
                <div className="pas-product-panel-ko">{active.ko}</div>
                <div className="pas-product-panel-desc">{active.desc}</div>
                <p className="pas-product-panel-long">{active.long}</p>
                <div className="pas-product-panel-stats">
                  {active.stats.map(s => (
                    <div key={s.k}>
                      <div className="pas-product-panel-stat-k">{s.k}</div>
                      <div className="pas-product-panel-stat-v">{s.v}</div>
                    </div>
                  ))}
                </div>
                <button className="pas-btn pas-btn-ghost" onClick={() => setRoute("product")}>
                  자세히 보기 <Icon name="arrow-up-right" size={14}/>
                </button>
              </div>
              <div className="pas-fade-in">
                <AssetImage src={activeMedia?.src} alt={activeMedia?.alt || active.name} aspect="4/5"/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Care */}
      <section className="pas-section">
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow">Launch Care</div>
              <h2>
                첫 시작의 어려움,<br/>
                <em style={{fontStyle: "normal", color: "var(--accent)"}}>PAS</em>에는 없습니다
              </h2>
            </div>
            <div style={{maxWidth: 360, color: "var(--ink-soft)", fontSize: 15}}>
              개국 후 한 달 동안 제공되는 3가지 특별 케어 서비스로 안정적인 정착을 돕습니다.
            </div>
          </div>
          <div className="pas-care-grid">
            {D.care.map((c, i) => (
              <article key={c.title} className="pas-care-card">
                <AssetImage src={M.care[i]?.src} alt={M.care[i]?.alt || c.title} className="pas-care-card-viz" aspect="16/10"/>
                <div className="pas-care-card-body">
                  <div className="pas-care-card-eyebrow">0{i+1} / {c.ko}</div>
                  <div className="pas-care-card-title">{c.title}</div>
                  <div className="pas-care-card-desc">{c.desc}</div>
                  <div className="pas-care-card-detail">{c.detail}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="pas-section" style={{background: "var(--surface)", borderTop: "1px solid var(--line)"}}>
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow">Services</div>
              <h2>
                신뢰할 수 있는 서비스로<br/>
                보답하겠습니다
              </h2>
            </div>
          </div>
          <div className="pas-services-grid">
            {D.services.map(s => (
              <div key={s.n} className="pas-service-cell">
                <div className="pas-service-num">{s.n}</div>
                <div className="pas-service-title">{s.t}</div>
                <div className="pas-service-desc">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* News */}
      <section className="pas-section">
        <div className="pas-container">
          <div className="pas-section-head">
            <div>
              <div className="pas-eyebrow">News</div>
              <h2>최신 소식</h2>
            </div>
            <button className="pas-btn pas-btn-ghost">전체 보기 <Icon name="arrow" size={14}/></button>
          </div>
          <div className="pas-news-list">
            {D.news.map(n => (
              <div key={n.date} className="pas-news-item">
                <div className="pas-news-date">{n.date}</div>
                <div className="pas-news-tag">{n.tag}</div>
                <div className="pas-news-title">{n.title}</div>
                <div className="muted"><Icon name="arrow-up-right" size={16}/></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section style={{paddingBottom: 80}}>
        <div className="pas-cta-band">
          <div className="pas-container">
            <div className="pas-cta-band-title">
              약사님의 <em>디지털 경영</em>에<br/>
              함께 하겠습니다
            </div>
            <div className="pas-cta-band-row">
              <button className="pas-btn pas-btn-lg" onClick={onContact}>상담 문의 <Icon name="arrow" size={16}/></button>
              <button className="pas-btn pas-btn-ghost pas-btn-lg" onClick={() => setRoute("support")}>
                <Icon name="map-pin" size={14}/> 가까운 대리점 찾기
              </button>
              <div style={{marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 13, opacity: 0.7}}>
                02-2039-7767 · 평일 08:30 – 18:00
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, {HomePage});