/* global React, Reveal, Eyebrow, SectionHead, Btn, Tabs, Accordion, VideoPlaceholder */
const { useState: useStateP } = React;

const ZONES = {
 order: {
 code: "ORDER",
 label: "주문 · 홈 & 메뉴",
 tagline: "주문 받는 일을 가장 적게 만듭니다.",
 intro:
 "손님이 룸에서 직접 메뉴를 보고, 담고, 주문합니다. 주문 상태는 주방과 홀에 실시간으로 전달되어 직원이 한 걸음 덜 걷게 합니다.",
 specs: [
 ["메뉴 카테고리", "메인 / 절반 / 사이드 / 주류 / 음료"],
 ["주문 상태 추적", "실시간 (주방, 홀)"],
 ["주당 순위 갱신", "30초 단위"],
 ["사전 결제 알림", "퇴장 10분 전 UI"],
 ["기기", "안드로이드 태블릿 (거치형)"],
 ],
 features: [
 { t: "홈 대시보드", d: "내 룸의 상태 카드, 남은 시간 카운트다운, 매장 공지, 주당 순위가 한 화면에. 룸에 들어선 손님이 가장 먼저 만나는 화면입니다." },
 { t: "메뉴 조회와 장바구니", d: "메뉴를 보고 담고 수량을 정해 주문합니다. 요청사항을 직접 입력할 수 있어 직원에게 말로 전할 일이 줄어듭니다." },
 { t: "실시간 주문 상태", d: "주방과 홀의 상태가 손님 화면에 실시간으로 표시됩니다. '얼마나 더 기다려야 하나요'라는 질문이 사라집니다." },
 { t: "주당 순위 시스템", d: "주류 결제액 기준으로 30초마다 갱신되는 룸별 순위. 자연스럽게 한 잔 더 시키게 만드는 장치입니다." },
 ],
 },
 azit: {
 code: "AZIT",
 label: "아지트 · 룸 안의 게임",
 tagline: "룸이 비지 않게 합니다.",
 intro:
 "자체 개발한 게임 16종을 도수 3단계로 분류했습니다. 5도(아이스브레이커) 7개, 16도(19금) 7개, 40도(과감한 성인용) 2개로, 사람 수와 분위기에 맞춰 고를 수 있습니다.",
 specs: [
 ["전체 게임 수", "16종"],
 ["5도 (아이스브레이커)", "7종"],
 ["16도 (19금)", "7종"],
 ["40도 (과감한 성인용)", "2종"],
 ["콘텐츠 갱신 주기", "셔플 후 순차 소진. 최소 2개월 중복 없음"],
 ],
 features: [
 { t: "게임 카테고리 선택", d: "5도, 16도, 40도 세 도수로 분류된 16종 게임에서 선택. 모임의 분위기에 맞춰 자연스럽게 고를 수 있도록 설계했습니다." },
 { t: "벌칙 시스템", d: "게임 결과에 따른 사다리타기 벌칙. 음주 / 비음주 옵션을 손님이 선택할 수 있어, 분위기를 강요하지 않습니다." },
 { t: "셔플 후 순차 소진", d: "매번 무작위로 같은 게임이 반복되지 않도록 설계. 월 64세션 기준 최소 2개월 동안은 같은 콘텐츠가 다시 나오지 않습니다." },
 { t: "단골 매장을 위한 정기 업데이트", d: "매장 측 피드백을 받아 게임 콘텐츠가 정기적으로 갱신됩니다. 매장이 오래 써도 새 콘텐츠가 들어옵니다." },
 ],
 },
 lounge: {
 code: "LOUNGE",
 label: "라운지 · 룸 사이의 만남",
 tagline: "룸과 룸을 잇습니다.",
 intro:
 "헌팅포차의 핵심은 룸 사이의 만남입니다. 라운지 탭에서 다른 룸의 분위기를 확인하고, 1:1과 단체 채팅과 음성 통화로 인사하고, 합석을 제안할 수 있습니다.",
 specs: [
 ["룸 간 대전 게임", "4종"],
 ["통신 방식", "WebRTC (음성), WebSocket (채팅)"],
 ["대전 게임 반응 속도", "0.1초 동시성 보장"],
 ["룸 모드", "OPEN / CLOSED / HOT / FREE 4종"],
 ["맵뷰", "매장 룸 배치도 형태"],
 ],
 features: [
 { t: "맵뷰와 룸 모드", d: "매장 룸 배치를 한눈에 보고, 각 룸이 어떤 분위기인지(OPEN, HOT, CLOSED, FREE) 확인. 분위기에 맞는 룸에 자연스럽게 말을 걸 수 있습니다." },
 { t: "1:1 / 단체 채팅과 음성 통화", d: "WebRTC와 WebSocket을 직접 구축해 룸 간 실시간 소통이 가능합니다. 옆 룸에 직접 가지 않아도 인사를 건넬 수 있습니다." },
 { t: "선물하기 & 번개타임", d: "다른 룸에 메뉴를 선물하거나 즉석 만남을 제안하는 기능. 매장의 객단가는 올라가고 손님은 더 즐거워집니다." },
 { t: "룸 vs 룸 대전 게임", d: "두 룸이 함께 즐길 수 있는 대전 게임 4종. 0.1초 단위로 동시성을 보장하도록 직접 만들었습니다." },
 ],
 },
 backoffice: {
 code: "BACKOFFICE",
 label: "백오피스 · 사장님의 화면",
 tagline: "매출이 어디서 어떻게 나는지 보입니다.",
 intro:
 "관리자 대시보드에서 매장 전체를 한눈에 봅니다. 룸별 매출, 객단가, 시간대별 분포, 직원 동선까지. CSV로 내려받아 회계와 곧장 연결할 수 있습니다.",
 specs: [
 ["대시보드 항목", "룸별 매출, 객단가, 시간대 분포"],
 ["직원 동선 분석", "출퇴근 로그 CSV 추출"],
 ["선물하기 데이터", "상시 수집 (룸 간 메뉴 결제)"],
 ["병목 분석 단위", "일 / 주 / 월"],
 ],
 features: [
 { t: "룸별 매출 요약", d: "어느 룸에서 매출이 가장 많이 나는지, 시간대별로 어떻게 움직이는지. 사장님이 들어오자마자 확인할 수 있습니다." },
 { t: "객단가와 시간대 분포", d: "총매출액과 함께 객단가가 함께 표시됩니다. 어떤 요일과 시간에 손님이 더 쓰는지 데이터로 보입니다." },
 { t: "직원 동선 데이터", d: "직원 출퇴근 로그를 CSV로 내려받아 분석. '평균 30% 동선 단축'을 목표로 매장과 함께 개선합니다." },
 { t: "결제 트래픽 분산", d: "퇴장 10분 전 사전 결제 알림으로 마감 시간대의 트래픽을 분산. 카운터 줄이 길어지는 문제를 줄입니다." },
 ],
 },
};

function ProductsPage({ onNavigate }) {
 const [tab, setTab] = useStateP("order");
 const p = ZONES[tab];

 return (
 <div className="page-fade">
 <ProductsHero />
 <section className="block" style={{ paddingTop: "clamp(40px, 5vw, 64px)" }}>
 <div className="container">
 <Tabs
 value={tab}
 onChange={setTab}
 items={Object.entries(ZONES).map(([k, z]) => ({ value: k, label: z.label }))}
 />

 <div className="prod-layout" style={{ marginTop: 56 }}>
 <div>
 <Reveal>
 <div style={{ color: "var(--ink-2)", letterSpacing: "0.12em", fontSize: 12, textTransform: "uppercase" }}>{p.code}</div>
 <h2 style={{ marginTop: 18, fontWeight: 500, maxWidth: "18ch" }}>
 <span className="serif-it">{p.tagline.split(" ")[0]}</span>{" "}
 {p.tagline.split(" ").slice(1).join(" ")}
 </h2>
 <p className="lede" style={{ marginTop: 24 }}>{p.intro}</p>
 <div className="row gap-16" style={{ marginTop: 28 }}>
 <Btn arrow onClick={() => onNavigate("contact")}>매장 도입 문의</Btn>
 <Btn variant="secondary">소개서 받기</Btn>
 </div>
 </Reveal>
 </div>

 <Reveal delay={120}>
 <div className="spec-card">
 <div className="eyebrow" style={{ marginBottom: 18 }}>SPEC · {p.code}</div>
 {p.specs.map(([k, v]) => (
 <div key={k} className="spec-row">
 <span className="muted" style={{ fontSize: 13.5 }}>{k}</span>
 <span style={{ fontSize: 13, color: "var(--ink)", textAlign: "right" }}>{v}</span>
 </div>
 ))}
 </div>
 </Reveal>
 </div>

 <div style={{ marginTop: 80 }}>
 <Reveal><div className="eyebrow" style={{ marginBottom: 24 }}>FEATURES · {p.features.length}</div></Reveal>
 <Accordion
 items={p.features.map((f, i) => ({
 id: `${p.code}-${i}`,
 title: f.t,
 body: f.d,
 }))}
 />
 </div>
 </div>
 </section>

 <BizModelSection />
 <ProductsCTA onNavigate={onNavigate} />

 <style>{`
 .prod-layout {
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: clamp(28px, 5vw, 80px);
 align-items: start;
 }
 .spec-card {
 background: var(--bg-elev);
 border: 1px solid var(--line);
 border-radius: 14px;
 padding: 28px;
 }
 .spec-row {
 display: flex; justify-content: space-between;
 gap: 16px;
 padding: 12px 0;
 border-bottom: 1px dashed var(--line);
 }
 .spec-row:last-child { border-bottom: 0; }
 .prod-showcase {
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 align-items: center;
 gap: clamp(28px, 5vw, 72px);
 margin-top: clamp(48px, 6vw, 72px);
 }
 .prod-showcase-copy { max-width: 32ch; }
 .prod-showcase-num {
 margin-top: 18px;
 font-size: clamp(44px, 5.6vw, 68px);
 line-height: 1.05;
 letter-spacing: -0.03em;
 font-weight: 500;
 }
 .prod-showcase-sub {
 margin-top: 20px;
 font-size: clamp(15px, 1.3vw, 17px);
 line-height: 1.65;
 color: var(--ink-2);
 }
 .prod-showcase-media { min-width: 0; }
 .prod-showcase-img {
 display: block;
 width: 100%;
 height: auto;
 }
 @media (max-width: 820px) {
 .prod-showcase { grid-template-columns: 1fr; gap: 8px; }
 .prod-showcase-copy { max-width: none; }
 }
 @media (max-width: 900px) {
 .prod-layout { grid-template-columns: 1fr; }
 }
 `}</style>
 </div>
 );
}

function ProductsHero() {
 return (
 <section className="block" style={{ paddingTop: "clamp(80px, 9vw, 130px)", paddingBottom: "clamp(24px, 4vw, 56px)" }}>
 <div className="container">
 <Reveal><Eyebrow>FIRST PRODUCT</Eyebrow></Reveal>
 <Reveal delay={80}>
 <h1 style={{ maxWidth: "22ch", marginTop: 22, fontSize: "clamp(36px, 5.2vw, 68px)" }}>
 <span className="lb">소셜 테이블 오더,</span><br />
 <span className="lb"><span className="serif-it">네</span> 화면으로.</span>
 </h1>
 </Reveal>
 <Reveal delay={160}>
 <p className="lede" style={{ marginTop: 28, maxWidth: "none" }}>
 <span className="lb">이온랩의 첫 출시 제품입니다.</span>{" "}
 <span className="lb">룸 헌팅포차를 위해 만들어졌으며,</span><br />
 <span className="lb">손님이 쓰는 화면 셋(주문, 아지트, 라운지)과</span>{" "}
 <span className="lb">사장님이 보는 화면 하나(백오피스)로</span>{" "}
 <span className="lb">매장 전체를 다룹니다.</span>
 </p>
 </Reveal>

 <Reveal delay={220}>
 <div className="prod-showcase">
 <div className="prod-showcase-copy">
 <div className="eyebrow">상권 평균 대비 월매출</div>
 <div className="prod-showcase-num"><span className="serif-it">2배</span> 상승</div>
 <p className="prod-showcase-sub">
 <span className="lb">소셜 테이블 오더를 도입한 매장이</span>{" "}
 <span className="lb">같은 상권 평균의 2배 월매출을 달성했습니다.</span>
 </p>
 </div>
 <div className="prod-showcase-media">
 <img src="/DD_태블릿목업.webp" alt="소셜 테이블 오더 태블릿 화면" className="prod-showcase-img" />
 </div>
 </div>
 </Reveal>
 </div>
 </section>
 );
}

/* PricingSection removed — pricing intentionally not exposed on site */


function BizModelSection() {
 return (
 <section className="block">
 <div className="container">
 <SectionHead tag="BUSINESS MODEL" title={<><span className="lb">하드웨어와 소프트웨어를</span>{" "}<span className="lb">함께 공급합니다.</span></>}>
 <span className="lb">태블릿 OEM 공급으로</span>{" "}<span className="lb">하드웨어 마진을 함께 확보하고,</span>{" "}<span className="lb">소프트웨어 유지보수로 장기 락인을 만듭니다.</span>{" "}<span className="lb">결제 데이터 연동을 통한 부가 수익 모델도</span>{" "}<span className="lb">함께 운영합니다.</span>
 </SectionHead>

 <Reveal>
 <div className="biz-grid">
 <BizCard
 lbl="HW"
 t="태블릿 OEM 공급"
 d="하드웨어 마진을 함께 확보합니다. 통신이 약한 매장이나 선상 환경까지 안정적으로 운영할 수 있게 합니다."
 />
 <BizCard
 lbl="SW"
 t="소셜 게임 + 주문 시스템"
 d="이온랩의 핵심 자산. 룸 안과 룸 사이를 잇는 자체 콘텐츠로 매장의 객단가를 직접 끌어올립니다."
 />
 <BizCard
 lbl="OPS"
 t="턴키 설치와 유지보수"
 d="HW와 SW를 묶어 한 번에 설치하고 한 곳에서 관리합니다. 매장의 유지보수 부담을 최소화합니다."
 />
 <BizCard
 lbl="DATA"
 t="결제 데이터 부가 수익"
 d="결제 데이터를 연동해 매장 운영 분석과 추가 수익 모델을 함께 운영합니다."
 />
 </div>
 </Reveal>
 </div>
 <style>{`
 .biz-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
 }
 @media (max-width: 720px) { .biz-grid { grid-template-columns: 1fr; } }
 `}</style>
 </section>
 );
}

function BizCard({ lbl, t, d }) {
 return (
 <div className="card" style={{ height: "100%" }}>
 <div className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
 <div style={{ fontSize: 12, color: "var(--accent)", letterSpacing: "0.18em" }}>{lbl}</div>
 <div className="muted" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>PILLAR</div>
 </div>
 <h3 style={{ marginTop: 22, fontSize: 20, letterSpacing: "-0.015em" }}>{t}</h3>
 <p style={{ marginTop: 14, fontSize: 14.5, lineHeight: 1.65 }}>{d}</p>
 </div>
 );
}

function ProductsCTA({ onNavigate }) {
 return (
 <section className="block" style={{ borderTop: 0 }}>
 <div className="container">
 <div className="cta-band">
 <div>
 <div className="eyebrow">START</div>
 <h2 style={{ marginTop: 16, fontWeight: 500, maxWidth: "20ch" }}>
 <span className="lb">30분만 보여드릴게요.</span><br />
 <span className="lb serif-it">매장에서.</span>
 </h2>
 </div>
 <div className="row gap-16" style={{ flexWrap: "wrap" }}>
 <Btn size="lg" arrow onClick={() => onNavigate("contact")}>매장 도입 문의</Btn>
 <Btn size="lg" variant="secondary">제품 소개서 받기</Btn>
 </div>
 </div>
 </div>
 <style>{`
 .cta-band {
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: 32px;
 padding: 56px 48px;
 background: var(--bg-sub);
 border-radius: 16px;
 align-items: end;
 }
 @media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; padding: 36px 28px; } }
 `}</style>
 </section>
 );
}

window.ProductsPage = ProductsPage;