// tl-story.jsx — Brand story / about view (real content from s004)
function Story({ go }) {
  const beliefs = [
    { icon: "hand",  title: "사람의 손길", desc: "현장에서 변수를 대응하며 직접 손으로 해결하는 기술자의 능력은 AI가 복제할 수 없습니다." },
    { icon: "spark", title: "마음을 읽는 기술", desc: "손기술에 고객의 마음을 읽는 ‘마음기술’을 더합니다. 사람만이 할 수 있는 일." },
    { icon: "route", title: "대체 불가능한 모델", desc: "AI 시대에 오히려 가치가 폭등하는, 사람 중심의 비즈니스 모델을 제시합니다." },
  ];
  return (
    <main>
      {/* INTRO */}
      <section className="tl-wrap" style={{ paddingTop: 56, paddingBottom: 64 }}>
        <div className="tl-story-intro">
          <div>
            <Kicker>OUR STORY</Kicker>
            <h1 style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: "clamp(32px,4.6vw,56px)", letterSpacing: "-0.035em", lineHeight: 1.14, marginTop: 20, color: "var(--ink)" }}>
              AI 시대, 왜<br/><span style={{ color: "var(--accent-ink)" }}>‘틴트라이프’</span>인가?
            </h1>
            <p style={{ fontSize: "clamp(16px,1.6vw,19px)", lineHeight: 1.7, color: "var(--ink)", marginTop: 22, maxWidth: 480, fontWeight: 600 }}>
              {STORY.sub}
            </p>
            <p style={{ fontSize: "clamp(15px,1.5vw,17px)", lineHeight: 1.8, color: "var(--muted)", marginTop: 16, maxWidth: 480 }}>
              {STORY.body}
            </p>
          </div>
          <div className="tl-story-media">
            <img src="uploads/C3E62003-BD2A-4199-8F88-38D23A1FE711.jpeg" alt="틴트라이프 수원경기대점 전경" style={{ display: "block", width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: 22 }} />
          </div>
        </div>
      </section>

      {/* BELIEFS */}
      <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: 600, marginBottom: 44 }}>
            <Kicker>WHAT WE BELIEVE</Kicker>
            <h2 className="tl-h2">AI가 정복할 수 없는 마지막 성지</h2>
            <p className="tl-lead">테슬라의 일론 머스크가 가장 유망한 직업으로 ‘기술자’를 꼽은 이유.</p>
          </div>
          <div className="tl-cards-3">
            {beliefs.map((b) => (
              <article key={b.title} className="tl-card">
                <div className="tl-card-ic"><Icon name={b.icon} size={24} /></div>
                <h3 style={{ fontSize: 19, fontWeight: 700, marginTop: 18, color: "var(--ink)", letterSpacing: "-0.02em" }}>{b.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--muted)", marginTop: 10 }}>{b.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* PROVEN */}
      <section className="tl-wrap" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ maxWidth: 620, marginBottom: 40 }}>
          <Kicker>SINCE 2021.02</Kicker>
          <h2 className="tl-h2">{STORY.proofTitle}</h2>
          <p className="tl-lead">모든 오프라인 매장이 위축되던 팬데믹 한복판에서 탄생해, 5년간 꾸준한 매출과 지속 성장을 증명해 냈습니다.</p>
        </div>
        <div className="tl-proof" style={{ marginTop: 8 }}>
          {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>
      </section>

      {/* TAGLINE / SPACE */}
      <section className="tl-wrap" style={{ paddingBottom: 84 }}>
        <div style={{ marginBottom: 28, textAlign: "center" }}>
          <p style={{ fontFamily: "var(--display)", fontStyle: "italic", fontWeight: 700, fontSize: "clamp(22px,2.8vw,34px)", color: "var(--accent-ink)", letterSpacing: "-0.01em" }}>
            {STORY.tagline}
          </p>
        </div>
        <div className="tl-gallery">
          <img src="uploads/ED19C716-A32C-4030-9B2E-22DAD414011B_1_105_c.jpeg" alt="틴트라이프 라운지" style={{ display: "block", width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: 18 }} />
          <img src="uploads/18454EF3-84B7-4469-BFF3-D45A65D32507_4_5005_c.jpeg" alt="틴트라이프 헤어 제품" style={{ display: "block", width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: 18 }} />
          <img src="uploads/399AB8E7-BEF8-49DA-9B36-FE32B9321B02_4_5005_c.jpeg" alt="염색 시술 컷" style={{ display: "block", width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: 18 }} />
          <img src="uploads/D2531B1A-DA8D-48FB-AB74-4581BD2ADAA5_1_105_c.jpeg" alt="틴트라이프 브랜드 포스터" style={{ display: "block", width: "100%", aspectRatio: "3 / 4", objectFit: "cover", borderRadius: 18 }} />
        </div>
      </section>

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

Object.assign(window, { Story });