/* global React, Reveal, Eyebrow, SectionHead, Btn, ImgSlot, VideoPlaceholder */

function AboutPage({ onNavigate }) {
 return (
 <div className="page-fade">
 <AboutHero />
 <Mission />
 <Timeline />
 <Principles />
 </div>
 );
}

function AboutHero() {
 return (
 <section className="block" style={{ paddingTop: "clamp(80px, 10vw, 140px)" }}>
 <div className="container">
 <Reveal><Eyebrow>ABOUT</Eyebrow></Reveal>
 <Reveal delay={80}>
 <h1 style={{ maxWidth: "22ch", marginTop: 24, fontSize: "clamp(36px, 5.2vw, 68px)" }}>
 <span className="lb">소외된 경험에</span><br />
 <span className="lb"><span className="serif-it" style={{ color: "var(--accent)" }}>귀</span> 기울입니다.</span>
 </h1>
 </Reveal>
 <Reveal delay={160}>
 <p className="lede" style={{ marginTop: 36, maxWidth: "62ch" }}>
 <span className="lb">이온랩(EonLab)은</span>{" "}
 <span className="lb">기술을 통해 문제를 실험하고 해결하는 팀입니다.</span>{" "}
 <span className="lb">사람들이 익숙해져 버린 불편함,</span>{" "}
 <span className="lb">아무도 답하지 않던 자리에</span>{" "}
 <span className="lb">서비스를 만들어 둡니다.</span>{" "}
 <span className="lb">첫 제품은 룸 헌팅포차를 위한</span>{" "}
 <span className="lb">소셜 테이블 오더이며,</span>{" "}
 <span className="lb">사람이 모이는 자리마다</span>{" "}
 <span className="lb">필요한 도구를 하나씩 만들어 갑니다.</span>
 </p>
 </Reveal>

 <div className="about-photo-grid" style={{ marginTop: 64 }}>
 <Reveal><VideoPlaceholder ratio="4/3" label="HQ · 충북 청주" /></Reveal>
 <Reveal delay={80}><VideoPlaceholder ratio="4/3" label="제품 시연" /></Reveal>
 <Reveal delay={160}><VideoPlaceholder ratio="4/3" label="설치 현장" /></Reveal>
 </div>
 </div>
 <style>{`
 .about-photo-grid {
 display: grid;
 grid-template-columns: 1.4fr 1fr 1fr;
 gap: 16px;
 }
 @media (max-width: 900px) {
 .about-photo-grid { grid-template-columns: 1fr 1fr; }
 }
 `}</style>
 </section>
 );
}

function Mission() {
 const blocks = [
 {
 tag: "MISSION",
 kr: "미션",
 lead: "소외된 경험에 귀 기울이고,",
 emph: "불편함을 놓치지 않는 서비스를 만듭니다.",
 note: "가장 큰 목소리가 아니라, 가장 자주 잊히는 자리를 봅니다.",
 },
 {
 tag: "VISION",
 kr: "비전",
 lead: "세상에 낯선 질문을,",
 emph: "약자에게 따뜻한 답을.",
 note: "아직 누구도 묻지 않은 질문을 우리가 먼저 던집니다.",
 },
 {
 tag: "SLOGAN",
 kr: "슬로건",
 lead: "불편함을 감수하는 것이 약자라면,",
 emph: "우리는 약자를 줄입니다.",
 note: "제품이 매장에 들어가는 이유도, 한 사람의 불편이 한 명만큼 줄기 때문입니다.",
 },
 ];
 return (
 <section className="block" style={{ background: "var(--bg-sub)" }}>
 <div className="container">
 <Reveal>
 <Eyebrow>WHAT WE BELIEVE</Eyebrow>
 <h2 style={{ marginTop: 24, maxWidth: "18ch", fontWeight: 500 }}>
 <span className="lb">세 문장으로,</span>{" "}
 <span className="lb"><span className="serif-it" style={{ color: "var(--accent)" }}>이온랩은</span> 이런 곳입니다.</span>
 </h2>
 </Reveal>

 <div className="mission-stack" style={{ marginTop: "clamp(40px, 6vw, 72px)" }}>
 {blocks.map((b, i) => (
 <Reveal key={b.tag} delay={i * 100}>
 <div className="m-row">
 <div className="m-tag">
 <div className="eyebrow">{b.tag}</div>
 <div className="muted" style={{ marginTop: 8, fontSize: 13 }}>{b.kr}</div>
 </div>
 <div className="m-body">
 <p className="m-lead">{b.lead}</p>
 <p className="m-emph"><span className="serif-it">{b.emph}</span></p>
 <p className="m-note">{b.note}</p>
 </div>
 </div>
 </Reveal>
 ))}
 </div>
 </div>
 <style>{`
 .mission-stack { display: grid; }
 .m-row {
 display: grid;
 grid-template-columns: 180px 1fr;
 gap: clamp(20px, 4vw, 64px);
 padding: clamp(44px, 6vw, 84px) 0;
 border-top: 1px solid var(--line);
 align-items: start;
 }
 .m-row:last-child { border-bottom: 1px solid var(--line); }
 .m-tag { padding-top: 12px; }
 .m-lead {
 font-size: clamp(20px, 2.2vw, 30px);
 line-height: 1.35;
 color: var(--ink-3);
 letter-spacing: -0.02em;
 margin: 0;
 font-weight: 400;
 }
 .m-emph {
 font-size: clamp(28px, 3.6vw, 54px);
 line-height: 1.15;
 letter-spacing: -0.035em;
 color: var(--ink);
 margin: 10px 0 0;
 max-width: 24ch;
 font-weight: 500;
 }
 .m-note {
 margin-top: clamp(20px, 2.4vw, 32px);
 font-size: 14.5px;
 line-height: 1.65;
 color: var(--ink-3);
 max-width: 48ch;
 }
 @media (max-width: 720px) {
 .m-row { grid-template-columns: 1fr; gap: 16px; }
 .m-tag { padding-top: 0; display: flex; align-items: baseline; gap: 12px; }
 .m-tag .muted { margin-top: 0; }
 }
 `}</style>
 </section>
 );
}

function Timeline() {
 const items = [
 { y: "2026.01", t: "이온랩 설립", d: "충북 청주에서 사업자등록. 첫 제품으로 룸 헌팅포차용 소셜 테이블 오더 개발 착수." },
 { y: "2026.02", t: "첫 매장 계약", d: "주점 한 곳과 정식 계약. 태블릿, 거치대, 소프트웨어 개발비 계약 체결." },
 { y: "2026.03", t: "1차 납품 완료", d: "소프트웨어 1회차 개발분 납품 및 운영 시작." },
 { y: "2026.04", t: "2차 납품 완료", d: "추가 기능 개발 및 유지보수 계약 진행." },
 ];
 return (
 <section className="block">
 <div className="container">
 <SectionHead tag="HISTORY" title="짧지만, 한 걸음씩.">
 이온랩이 지금까지 통과해온 분기점을 시간 순으로 정리합니다.
 </SectionHead>

 <div className="timeline">
 {items.map((it, i) => (
 <Reveal key={i} delay={i * 60}>
 <div className="t-row">
 <div className="t-when">
 <span className="numeric" style={{ fontSize: 22, color: "var(--ink)", letterSpacing: "-0.01em" }}>{it.y}</span>
 </div>
 <div className="t-line" />
 <div className="t-body">
 <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em" }}>{it.t}</div>
 <div className="muted" style={{ marginTop: 6, fontSize: 14.5, lineHeight: 1.6, maxWidth: "62ch" }}>{it.d}</div>
 </div>
 </div>
 </Reveal>
 ))}
 </div>
 </div>
 <style>{`
 .t-row {
 display: grid;
 grid-template-columns: 140px 40px 1fr;
 gap: 24px;
 align-items: start;
 padding: 28px 0;
 border-top: 1px solid var(--line);
 }
 .t-row:last-child { border-bottom: 1px solid var(--line); }
 .t-when { padding-top: 2px; white-space: nowrap; }
 .t-line { position: relative; height: 100%; }
 .t-line::before {
 content: "";
 width: 9px; height: 9px;
 border-radius: 50%;
 background: var(--ink);
 position: absolute; top: 9px; left: 50%;
 transform: translateX(-50%);
 }
 .t-line::after {
 content: "";
 position: absolute;
 left: 50%; top: 22px; bottom: -28px;
 width: 1px;
 background: var(--line);
 transform: translateX(-50%);
 }
 .t-row:last-child .t-line::after { display: none; }
 @media (max-width: 720px) {
 .t-row { grid-template-columns: 100px 24px 1fr; gap: 12px; }
 }
 `}</style>
 </section>
 );
}

function Principles() {
 const items = [
 { n: "Ⅰ", t: "현장에서 답을 찾습니다.",
 d: "제품의 결정은 본사 회의실이 아니라 현장에서 내려집니다. 사용자가 어디서 불편을 참고 있는지, 어떤 자리가 가장 자주 잊히는지, 그 자리에 직접 가서 답을 찾습니다." },
 { n: "Ⅱ", t: "불편함의 종류마다 도구를 만듭니다.",
 d: "하나의 제품을 모든 상황에 끼워 맞추지 않습니다. 누구의 어떤 불편인지 먼저 보고, 그 자리에 맞는 도구를 따로 만듭니다." },
 { n: "Ⅲ", t: "사용자가 받는 효과로 판단합니다.",
 d: "좋아 보이는 것보다 쓰는 사람이 받는 효과가 먼저입니다. 누군가의 시간과 돈, 마음에 직접 닿지 않는 일은 우선순위에서 미룹니다." },
 { n: "Ⅳ", t: "한 번 만들고 끝내지 않습니다.",
 d: "도입 후에도 현장이 바뀌면 제품도 같이 바뀝니다. 정기적으로 기능을 갱신하고, 사용자와 오랜 시간을 같이 운영합니다." },
 ];
 return (
 <section className="block" style={{ background: "var(--bg-sub)" }}>
 <div className="container">
 <SectionHead tag="OUR PRINCIPLES" title={<><span className="lb">우리가 일하는</span>{" "}<span className="lb">네 가지 원칙.</span></>}>
 <span className="lb">매장과의 계약에 부속서로</span>{" "}<span className="lb">함께 들어가는 문장들입니다.</span>{" "}<span className="lb">기술이 아니라 약속에 가깝습니다.</span>
 </SectionHead>
 <div className="principle-grid">
 {items.map((p, i) => (
 <Reveal key={p.n} delay={i * 80}>
 <div className="card" style={{ height: "100%" }}>
 <div className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
 <div className="serif-it" style={{ fontSize: 36, color: "var(--accent)" }}>{p.n}</div>
 <div className="muted" style={{ fontSize: 11, letterSpacing: "0.12em" }}>PRINCIPLE</div>
 </div>
 <h3 style={{ marginTop: 22, fontSize: 20, letterSpacing: "-0.015em" }}>{p.t}</h3>
 <p style={{ marginTop: 14, fontSize: 14.5, lineHeight: 1.65 }}>{p.d}</p>
 </div>
 </Reveal>
 ))}
 </div>
 </div>
 <style>{`
 .principle-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 }
 @media (max-width: 720px) {
 .principle-grid { grid-template-columns: 1fr; }
 }
 `}</style>
 </section>
 );
}

function AboutCTA({ onNavigate }) {
 return (
 <section className="block" style={{ background: "var(--bg-sub)" }}>
 <div className="container" style={{ textAlign: "center" }}>
 <Reveal>
 <Eyebrow>JOIN US</Eyebrow>
 <h2 style={{ marginTop: 28, fontWeight: 500, maxWidth: "20ch", margin: "28px auto 0" }}>
 <span className="lb">함께 일할</span><br />
 <span className="lb serif-it" style={{ color: "var(--accent)" }}>동료를 찾고 있습니다.</span>
 </h2>
 <p className="lede" style={{ margin: "28px auto 36px", textAlign: "center" }}>
 <span className="lb">첫 채용은</span>{" "}
 <span className="lb">WebRTC 서버 개발자와 PM</span>{" "}
 <span className="lb">두 자리입니다.</span>{" "}
 <span className="lb">매장에 같이 가실 분을 환영합니다.</span>
 </p>
 <div className="row gap-16" style={{ justifyContent: "center", flexWrap: "wrap" }}>
 <Btn size="lg" arrow onClick={() => onNavigate("contact")}>지원하기</Btn>
 </div>
 </Reveal>
 </div>
 </section>
 );
}

window.AboutPage = AboutPage;