// tl-home.jsx — Home view
const { useState: useStateHome } = React;

function Home({ go }) {
  return (
    <main>
      {/* HERO */}
      <section className="tl-wrap" style={{ paddingTop: 56, paddingBottom: 72 }}>
        <div className="tl-hero">
          <div className="tl-hero-copy">
            <Kicker>{CLASS.guide}</Kicker>
            <h1 style={{
              fontFamily: "var(--display)", fontWeight: 800, letterSpacing: "-0.035em",
              fontSize: "clamp(38px, 5.4vw, 66px)", lineHeight: 1.1, marginTop: 22, color: "var(--ink)",
            }}>
              {CLASS.heroTitle1}<br/>
              <span style={{ color: "var(--accent-ink)" }}>{CLASS.heroTitle2}</span>
            </h1>
            <p style={{ marginTop: 24, fontSize: "clamp(16px,1.5vw,19px)", lineHeight: 1.75, color: "var(--muted)", maxWidth: 480 }}>
              <b style={{ color: "var(--ink)", fontWeight: 700 }}>{CLASS.heroSub}.</b><br/>{CLASS.lede}
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 32 }}>
              <Button size="lg" onClick={() => go("reserve")} iconRight>무료 클래스 신청</Button>
              <Button size="lg" variant="ghost" onClick={() => go("class")}>클래스 자세히 보기</Button>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "10px 26px", marginTop: 34 }}>
              {[
                { icon: "won", text: `비용 ${CLASS.priceLabel}` },
                { icon: "cal", text: `${CLASS.day} ${CLASS.time}` },
                { icon: "users", text: CLASS.capacity },
              ].map((s) => (
                <div key={s.text} style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink)" }}>
                  <span style={{ color: "var(--accent-ink)" }}><Icon name={s.icon} size={18} /></span>
                  <span style={{ fontSize: 14.5, fontWeight: 600 }}>{s.text}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="tl-hero-media">
            <img src="uploads/p002.jpg" alt="염색 실습 — 모델 시술 장면" style={{ display: "block", width: "100%", aspectRatio: "4 / 5", objectFit: "cover", borderRadius: 22 }} />
            <div className="tl-hero-badge">
              <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 30, lineHeight: 1, color: "var(--ink)" }}>1:1</div>
              <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 4, lineHeight: 1.4 }}>소수정예<br/>밀착 실습</div>
            </div>
          </div>
        </div>
      </section>

      {/* VALUE CARDS */}
      <section style={{ background: "var(--surface-2)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
        <div className="tl-wrap" style={{ paddingTop: 72, paddingBottom: 72 }}>
          <div style={{ maxWidth: 620, marginBottom: 44 }}>
            <Kicker>WHY TINTLIFE</Kicker>
            <h2 className="tl-h2">구경하다 끝나는 수업이 아닙니다</h2>
            <p className="tl-lead">정원을 줄이고, 재료를 모두 준비해 두고, 창업까지 길을 열어둔 이유.</p>
          </div>
          <div className="tl-cards-4">
            {VALUES.map((v) => (
              <article key={v.title} className="tl-card">
                <div className="tl-card-ic"><Icon name={v.icon} size={24} /></div>
                <h3 style={{ fontSize: 18.5, fontWeight: 700, marginTop: 18, color: "var(--ink)", letterSpacing: "-0.02em" }}>{v.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.7, color: "var(--muted)", marginTop: 10 }}>{v.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CLASS PREVIEW */}
      <section className="tl-wrap" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="tl-split">
          <div className="tl-split-media">
            <img
              src="assets/oneday-class-day.jpg"
              alt="틴트라이프 원데이클래스 현장 — 염색 시술 실습"
              style={{ display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", borderRadius: 22 }}
            />
          </div>
          <div>
            <Kicker>THE CLASS</Kicker>
            <h2 className="tl-h2" style={{ marginBottom: 8 }}>{CLASS.name}</h2>
            <p className="tl-lead" style={{ marginBottom: 28 }}>1만 건 데이터 레시피부터 실제 모델 시술, 운영 노하우까지 — 수요일 하루에.</p>
            <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 2 }}>
              {CURRICULUM.map((s) => (
                <li key={s.step} style={{ display: "flex", gap: 16, padding: "16px 0", borderBottom: "1px solid var(--hairline)" }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--accent-ink)", fontWeight: 700, paddingTop: 2 }}>{s.step}</span>
                  <div>
                    <div style={{ fontSize: 16.5, fontWeight: 700, color: "var(--ink)", letterSpacing: "-0.02em" }}>{s.title}</div>
                    <div style={{ fontSize: 14, lineHeight: 1.6, color: "var(--muted)", marginTop: 4 }}>{s.desc}</div>
                  </div>
                </li>
              ))}
            </ol>
            <div style={{ marginTop: 28 }}>
              <Button variant="soft" onClick={() => go("class")} iconRight>전체 커리큘럼 보기</Button>
            </div>
          </div>
        </div>
      </section>

      {/* AUDIENCE BAND */}
      <section style={{ background: "var(--accent-band)" }}>
        <div className="tl-wrap" style={{ paddingTop: 72, paddingBottom: 72 }}>
          <div className="tl-aud">
            <div>
              <Kicker>FOR YOU</Kicker>
              <h2 className="tl-h2" style={{ color: "var(--ink)" }}>이런 분께 가장 잘 맞아요</h2>
              <p className="tl-lead">미용이 처음이어도, 제2의 시작을 준비하는 중이어도 괜찮습니다.</p>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
              {AUDIENCE.map((a) => (
                <li key={a} style={{ display: "flex", alignItems: "center", gap: 14, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 14, padding: "16px 20px" }}>
                  <span style={{ flex: "none", width: 30, height: 30, borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center" }}><Icon name="check" size={18} /></span>
                  <span style={{ fontSize: 16, fontWeight: 600, color: "var(--ink)" }}>{a}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* PROOF */}
      <section style={{ background: "var(--accent-band)", borderTop: "1px solid var(--hairline)" }}>
        <div className="tl-wrap" style={{ paddingTop: 64, paddingBottom: 64 }}>
          <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto 8px" }}>
            <div style={{ display: "flex", justifyContent: "center" }}><Kicker center>SINCE 2021.02</Kicker></div>
            <h2 className="tl-h2" style={{ textAlign: "center" }}>위기 속에서 증명된 저력</h2>
          </div>
          <div className="tl-proof">
            {PROOF.map((p) => (
              <div key={p.k} className="tl-proof-item">
                <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: "clamp(34px,4vw,52px)", letterSpacing: "-0.03em", color: "var(--accent-ink)", lineHeight: 1 }}>{p.v}</div>
                <div style={{ fontSize: 15, color: "var(--muted)", marginTop: 12 }}>{p.k}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      <section className="tl-wrap" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ textAlign: "center", maxWidth: 560, margin: "0 auto 44px" }}>
          <div style={{ display: "flex", justifyContent: "center" }}><Kicker center>REVIEWS</Kicker></div>
          <h2 className="tl-h2" style={{ textAlign: "center" }}>교육생 후기</h2>
          <p className="tl-lead" style={{ textAlign: "center" }}>하루를 함께한 분들의 직접적인 경험.</p>
        </div>
        <div className="tl-cards-3">
          {REVIEWS.map((r) => (
            <article key={r.name} className="tl-card" style={{ display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", gap: 3, color: "var(--accent)" }}>
                {Array.from({ length: r.stars }).map((_, i) => <Icon key={i} name="star" size={16} />)}
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.75, color: "var(--ink)", marginTop: 14, flex: 1 }}>“{r.text}”</p>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--hairline)", display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ flex: "none", width: 38, height: 38, borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 15 }}>{r.name.slice(0,1)}</span>
                <span>
                  <span style={{ display: "block", fontSize: 15, fontWeight: 700, color: "var(--ink)" }}>{r.name}</span>
                  <span style={{ display: "block", fontSize: 13, color: "var(--muted)", marginTop: 2 }}>{r.tag}</span>
                </span>
              </div>
            </article>
          ))}
        </div>
        <p style={{ textAlign: "center", marginTop: 22, fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>* 예시 후기입니다 — 실제 교육생 후기로 교체 가능</p>
      </section>

      {/* CTA */}
      <CtaBand go={go} />
    </main>
  );
}

function CtaBand({ go }) {
  return (
    <section className="tl-wrap" style={{ paddingBottom: 84 }}>
      <div className="tl-cta">
        <div className="tl-cta-glow"></div>
        <div style={{ position: "relative" }}>
          <Kicker>RESERVE</Kicker>
          <h2 style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: "clamp(28px,3.4vw,44px)", letterSpacing: "-0.03em", color: "#fff", marginTop: 16, lineHeight: 1.12 }}>
            단 하루, 직접 경험해보고<br/>확신을 가져가세요
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.7, color: "color-mix(in oklab,#fff 78%,transparent)", marginTop: 16, maxWidth: 460 }}>
            비용 무료 · 매주 수요일 10:00~16:00 · 선착순 2명 / 중식 제공. 조기 마감될 수 있으니 서둘러 예약해 주세요.
          </p>
        </div>
        <div style={{ position: "relative", display: "flex", flexWrap: "wrap", gap: 12, marginTop: 28 }}>
          <Button size="lg" variant="onAccent" onClick={() => go("reserve")} iconRight>신청·문의하기</Button>
          <a href={`tel:${CONTACT.tel}`} style={{ textDecoration: "none" }}>
            <Button size="lg" variant="ghost">
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "#fff" }}><Icon name="phone" size={18} />{CONTACT.tel}</span>
            </Button>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home, CtaBand });