/* global React, Reveal, Eyebrow, SectionHead, Btn, CountUp */

function IRPage({ onNavigate }) {
 return (
 <div className="page-fade">
 <IRHero />
 <KeyMetricsIR />
 <RevenueProjection />
 <IRContact onNavigate={onNavigate} />
 </div>
 );
}

function IRHero() {
 return (
 <section className="block" style={{ paddingTop: "clamp(80px, 9vw, 130px)", paddingBottom: "clamp(40px, 6vw, 80px)" }}>
 <div className="container">
 <Reveal><Eyebrow>INVESTOR RELATIONS · 2026 회계연도</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 serif-it">숫자는 정직하게.</span>
 </h1>
 </Reveal>
 <Reveal delay={160}>
 <p className="lede" style={{ marginTop: 28 }}>
 <span className="lb">이온랩은 2026년 1월에 시작한 신생 회사입니다.</span>{" "}
 <span className="lb">회계는 아직 개인사업자 기준이며,</span>{" "}
 <span className="lb">2028년 법인 전환을 계획하고 있습니다.</span>{" "}
 <span className="lb">모든 숫자는 가장 최근 기준으로 정리합니다.</span>
 </p>
 </Reveal>
 </div>
 </section>
 );
}

function KeyMetricsIR() {
 const items = [
 { v: 5124, suffix: "만원", lbl: "2026 누적 실현 매출", sub: "세금계산서 기준" },
 { v: 2, suffix: "억원", lbl: "FY26 매출 목표", sub: "전기 대비 약 10배" },
 { v: 20, suffix: "%", lbl: "FY26 영업이익률 목표", sub: "영업이익 4천만원" },
 { v: 7, suffix: "명", lbl: "2028년 목표 인원", sub: "4대보험 가입자 기준" },
 ];
 return (
 <section className="block" style={{ paddingTop: 0, borderTop: 0 }}>
 <div className="container">
 <div className="ir-key">
 {items.map((m, i) => (
 <Reveal key={i} delay={i * 70}>
 <div className="ir-key-cell">
 <div className="eyebrow">{m.lbl}</div>
 <div style={{ marginTop: 18, fontSize: "clamp(36px, 4.4vw, 56px)", letterSpacing: "-0.03em", fontWeight: 500 }}>
 <CountUp to={m.v} suffix={m.suffix} />
 </div>
 <div style={{ marginTop: 8, fontSize: 12.5, color: "var(--ink-3)" }}>
 {m.sub}
 </div>
 </div>
 </Reveal>
 ))}
 </div>
 </div>
 <style>{`
 .ir-key {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 }
 .ir-key-cell {
 padding: 36px 28px 44px;
 border-right: 1px solid var(--line);
 }
 .ir-key-cell:last-child { border-right: 0; }
 @media (max-width: 900px) {
 .ir-key { grid-template-columns: 1fr 1fr; }
 .ir-key-cell:nth-child(2) { border-right: 0; }
 .ir-key-cell:nth-child(1), .ir-key-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
 }
 `}</style>
 </section>
 );
}

/* -------- 3개년 매출 / 영업이익 차트 -------- */
function RevenueProjection() {
 // 단위 백만원
 const data = [
 { y: "FY26", form: "개인", rev: 200, opex: 160, profit: 40, net: 37.5 },
 { y: "FY27", form: "개인", rev: 300, opex: 249, profit: 51, net: 48.5 },
 { y: "FY28", form: "법인", rev: 400, opex: 336, profit: 64, net: 51.5 },
 ];
 const max = 400;
 const W = 900, H = 360, P = { l: 56, r: 24, t: 24, b: 56 };
 const innerW = W - P.l - P.r;
 const innerH = H - P.t - P.b;
 const bw = innerW / data.length;
 const y = (v) => P.t + innerH - (v / max) * innerH;

 return (
 <section className="block" style={{ background: "var(--bg-sub)" }}>
 <div className="container">
 <SectionHead tag="3-YEAR PROJECTION" title={<><span className="lb">향후 3개년 매출과</span>{" "}<span className="lb">영업이익 추정.</span></>}>
 <span className="lb">단위 백만원.</span>{" "}<span className="lb">FY28에 개인사업자에서 법인으로 전환합니다.</span>{" "}<span className="lb">매출과 영업이익은</span>{" "}<span className="lb">청년창업자금 심의 자료 기준입니다.</span>
 </SectionHead>

 <Reveal>
 <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: 14, padding: 28 }}>
 <div className="row gap-24" style={{ marginBottom: 18, flexWrap: "wrap" }}>
 <LegendDot color="var(--ink)" filled>매출 (Revenue)</LegendDot>
 <LegendDot color="var(--ink-3)" filled>영업이익 (Operating Profit)</LegendDot>
 <LegendDot color="var(--accent)">당기 순이익 (Net Income)</LegendDot>
 <div className="grow" />
 <span className="muted" style={{ fontSize: 12 }}>단위: 백만원 KRW 추정치</span>
 </div>

 <div style={{ overflowX: "auto" }}>
 <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block", minWidth: 560 }}>
 {[0, 100, 200, 300, 400].map((t) => (
 <g key={t}>
 <line x1={P.l} x2={W - P.r} y1={y(t)} y2={y(t)} stroke="var(--line)" strokeDasharray={t === 0 ? "" : "3 3"} />
 <text x={P.l - 10} y={y(t) + 4} fontSize="11" fill="var(--ink-3)" textAnchor="end">
 {t}
 </text>
 </g>
 ))}

 {data.map((d, i) => {
 const cx = P.l + bw * i + bw / 2;
 const barW = bw * 0.32;
 return (
 <g key={d.y}>
 {/* revenue bar */}
 <rect
 x={cx - barW - 4}
 y={y(d.rev)}
 width={barW}
 height={y(0) - y(d.rev)}
 fill="var(--ink)"
 />
 {/* operating profit bar */}
 <rect
 x={cx + 4}
 y={y(d.profit)}
 width={barW}
 height={y(0) - y(d.profit)}
 fill="var(--ink-3)"
 />
 {/* value labels */}
 <text x={cx - barW / 2 - 4} y={y(d.rev) - 8} fontSize="12" fill="var(--ink)" textAnchor="middle" fontWeight="600">
 {d.rev}
 </text>
 <text x={cx + barW / 2 + 4} y={y(d.profit) - 8} fontSize="11" fill="var(--ink-3)" textAnchor="middle">
 {d.profit}
 </text>
 {/* x label */}
 <text x={cx} y={H - 32} fontSize="13" fill="var(--ink)" textAnchor="middle" fontWeight="500">{d.y}</text>
 <text x={cx} y={H - 14} fontSize="10.5" fill="var(--ink-3)" textAnchor="middle" letterSpacing="0.06em">
 {d.form.toUpperCase()}
 </text>
 </g>
 );
 })}
 </svg>
 </div>

 <div className="ir-table-wrap" style={{ marginTop: 32 }}>
 <table className="ir-table">
 <thead>
 <tr>
 <th>항목 / 회계연도</th>
 {data.map((d) => <th key={d.y} style={{ textAlign: "right" }}>{d.y} {d.form === "법인" ? "(법인)" : "(개인)"}</th>)}
 </tr>
 </thead>
 <tbody>
 {[
 ["매출액", (d) => d.rev],
 ["매출원가 + 판매관리비", (d) => d.opex],
 ["영업이익", (d) => d.profit],
 ["당기 순이익", (d) => d.net],
 ].map(([k, get]) => (
 <tr key={k}>
 <td>{k}</td>
 {data.map((d) => <td key={d.y} style={{ textAlign: "right" }}>{get(d).toLocaleString("ko-KR")}</td>)}
 </tr>
 ))}
 </tbody>
 </table>
 </div>
 </div>
 </Reveal>
 </div>
 </section>
 );
}

function LegendDot({ color, filled, children }) {
 return (
 <span className="row gap-8" style={{ fontSize: 13, color: "var(--ink-2)" }}>
 <span style={{
 width: 16, height: 2,
 background: filled ? color : "transparent",
 borderTop: filled ? "none" : `2px dashed ${color}`,
 display: "inline-block",
 }} />
 {children}
 </span>
 );
}

/* -------- 누적 거래 내역 -------- */
function SalesLedger() {
 const rows = [
 { d: "2026.04.20", t: "소프트웨어 개발비 (2회차) + 유지보수비", v: "2,750,000" },
 { d: "2026.03.21", t: "태블릿 단말기 (추가 공급)", v: "1,144,000" },
 { d: "2026.03.20", t: "소프트웨어 개발비 (1회차) + 유지보수비", v: "2,750,000" },
 { d: "2026.02.27", t: "계약금 (소프트웨어 개발비)", v: "6,600,000" },
 { d: "2026.02.27", t: "거치대 공급", v: "707,000" },
 { d: "2026.02.27", t: "태블릿 단말기 (초도 공급)", v: "4,293,000" },
 ];
 return (
 <section className="block">
 <div className="container">
 <SectionHead tag="ACTUAL SALES · 2026" title="실제 발생한 매출 내역.">
 <span className="lb">2026년 들어 첫 매장과 진행한 거래입니다.</span>{" "}<span className="lb">모든 항목은 전자세금계산서로</span>{" "}<span className="lb">정식 발행되었습니다.</span>
 </SectionHead>

 <Reveal>
 <div className="ir-table-wrap">
 <table className="ir-table">
 <thead>
 <tr>
 <th>작성일자</th>
 <th>주요 품목</th>
 <th style={{ textAlign: "right" }}>합계 금액 (원)</th>
 </tr>
 </thead>
 <tbody>
 {rows.map((r) => (
 <tr key={r.d + r.t}>
 <td style={{ fontSize: 13, color: "var(--ink-2)" }}>{r.d}</td>
 <td style={{ fontSize: 14 }}>{r.t}</td>
 <td style={{ fontSize: 14, color: "var(--ink)", textAlign: "right", fontWeight: 500 }}>{r.v}</td>
 </tr>
 ))}
 <tr className="ir-total">
 <td colSpan="2"><span className="eyebrow">총 합계</span></td>
 <td style={{ fontSize: 16, color: "var(--ink)", textAlign: "right", fontWeight: 600 }}>18,244,000</td>
 </tr>
 </tbody>
 </table>
 </div>
 </Reveal>

 <Reveal delay={120}>
 <div style={{ marginTop: 32, padding: 24, background: "var(--bg-sub)", borderRadius: 12 }}>
 <div className="eyebrow" style={{ marginBottom: 12 }}>추가 진행 중인 거래</div>
 <div style={{ fontSize: 16, color: "var(--ink)" }}>
 울릉도 크루즈, 테이블 오더 시스템 변경 및 고도화
 </div>
 <div className="muted" style={{ marginTop: 8, fontSize: 14, lineHeight: 1.6, maxWidth: "60ch" }}>
 기존 설치되어 있는 타사 시스템을 이온랩의 소셜 테이블 오더로 교체합니다. 통신이 약한 선상 환경에 맞춰 시스템을 새로 설계 중입니다.
 </div>
 <div style={{ marginTop: 16, fontSize: 16, color: "var(--ink)", fontWeight: 500 }}>
 33,000,000원 <span className="muted" style={{ fontSize: 13, marginLeft: 8 }}>VAT 포함 계약서 및 세금계산서 발행 예정</span>
 </div>
 </div>
 </Reveal>
 </div>
 </section>
 );
}

/* -------- 자금 사용 계획 -------- */
function FundingPlan() {
 return (
 <section className="block" style={{ background: "var(--bg-sub)" }}>
 <div className="container">
 <SectionHead tag="FUNDING PLAN" title={<><span className="lb">대출금 사용과</span>{" "}<span className="lb">상환 계획.</span></>}>
 <span className="lb">중소벤처기업진흥공단 청년전용창업자금</span>{" "}<span className="lb">1억원 신청을 진행 중입니다.</span>{" "}<span className="lb">자금은 원부자재 구입과 인건비로</span>{" "}<span className="lb">절반씩 사용할 계획입니다.</span>
 </SectionHead>

 <div className="fund-grid">
 <Reveal>
 <div className="card">
 <div className="eyebrow" style={{ marginBottom: 18 }}>사용 계획 (1억원)</div>
 <FundRow k="원부자재 구입비" v="50,000,000원" sub="태블릿 등 단말 초도 물량 대량 매입" />
 <FundRow k="인건비" v="50,000,000원" sub="WebRTC 서버 개발자, PM 채용" />
 <FundRow k="기타" v="0원" sub="생산부대비, 임차료, 인증비 등 해당 없음" />
 <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--line-strong)", display: "flex", justifyContent: "space-between" }}>
 <span style={{ fontWeight: 500 }}>합계</span>
 <span style={{ fontWeight: 600, fontSize: 16 }}>100,000,000원</span>
 </div>
 </div>
 </Reveal>

 <Reveal delay={120}>
 <div className="card">
 <div className="eyebrow" style={{ marginBottom: 18 }}>상환 계획</div>
 <FundRow k="대출금 상환 시작일" v="2029.05.01" />
 <FundRow k="상환 기간" v="6년 (거치 3 + 상환 3)" />
 <FundRow k="상환 방식" v="매월 원금 균등 상환" />
 <FundRow k="이자율" v="고정금리 적용" />
 <FundRow k="월 예상 상환금" v="2,777,777원" sub="원금 기준, 이자 별도" />
 <FundRow k="상환 완료 예정일" v="2032.05.01" />
 </div>
 </Reveal>
 </div>
 </div>
 <style>{`
 .fund-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 }
 @media (max-width: 720px) { .fund-grid { grid-template-columns: 1fr; } }
 `}</style>
 </section>
 );
}

function FundRow({ k, v, sub }) {
 return (
 <div style={{ padding: "14px 0", borderBottom: "1px dashed var(--line)" }}>
 <div style={{ display: "flex", justifyContent: "space-between", gap: 16 }}>
 <span className="muted" style={{ fontSize: 13 }}>{k}</span>
 <span style={{ fontSize: 14.5, color: "var(--ink)", fontWeight: 500, textAlign: "right" }}>{v}</span>
 </div>
 {sub && <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{sub}</div>}
 </div>
 );
}

/* -------- Documents -------- */
function DocumentsIR() {
 const docs = [
 { d: "2026.05.02", t: "26년도 청년전용창업자금 심의 발표자료", k: "PDF 17p" },
 { d: "2026.04.20", t: "FY26 1분기 실현 매출 정리", k: "PDF 4p" },
 { d: "2026.04.20", t: "전자세금계산서, 매출 거래 내역", k: "PDF 6장" },
 { d: "2026.02.27", t: "첫 매장 계약서 사본 (요약본)", k: "PDF 2p" },
 ];
 return (
 <section className="block">
 <div className="container">
 <SectionHead tag="DOCUMENTS" title={<><span className="lb">공시 자료 /</span>{" "}<span className="lb">제출 문서.</span></>}>
 <span className="lb">자금 신청과 함께 제출한 자료입니다.</span>{" "}<span className="lb">필요한 경우 원문은</span>{" "}<span className="lb">별도 NDA 후 공유드립니다.</span>
 </SectionHead>
 <div>
 {docs.map((d, i) => (
 <Reveal key={i} delay={i * 40}>
 <a className="ir-doc" href="#" onClick={(e) => e.preventDefault()}>
 <div className="muted" style={{ fontSize: 12.5, width: 110 }}>{d.d}</div>
 <div style={{ fontSize: 15.5, color: "var(--ink)", flex: 1 }}>{d.t}</div>
 <div className="muted" style={{ fontSize: 12 }}>{d.k}</div>
 <span style={{ color: "var(--ink)", marginLeft: 16, fontSize: 14 }}>요청 →</span>
 </a>
 </Reveal>
 ))}
 </div>
 </div>
 <style>{`
 .ir-doc {
 display: flex;
 align-items: center;
 gap: 24px;
 padding: 22px 4px;
 border-top: 1px solid var(--line);
 transition: padding .2s ease, background .2s ease;
 }
 .ir-doc:last-child { border-bottom: 1px solid var(--line); }
 .ir-doc:hover { padding-left: 16px; padding-right: 16px; background: var(--bg-sub); }
 `}</style>
 </section>
 );
}

function IRContact({ onNavigate }) {
 return (
 <section className="block" style={{ background: "var(--ink)", color: "var(--bg)", borderTop: 0 }}>
 <div className="container" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "end" }}>
 <div>
 <div className="eyebrow" style={{ color: "color-mix(in oklab, var(--bg) 70%, transparent)" }}>
 <span className="dot" style={{ background: "var(--bg)" }} />
 INVESTOR INQUIRIES
 </div>
 <h2 style={{ marginTop: 22, fontWeight: 500, color: "inherit", maxWidth: "20ch" }}>
 <span className="lb"><span className="serif-it" style={{ color: "var(--bg)" }}>대표가 직접</span> 응대합니다.</span>
 </h2>
 <p style={{ marginTop: 18, color: "color-mix(in oklab, var(--bg) 75%, transparent)", maxWidth: "52ch", fontSize: 16 }}>
 <span className="lb">자금 / 투자 관련 문의는</span>{" "}<span className="lb">대표가 직접 응대합니다.</span>{" "}<span className="lb">영업일 기준 24시간 이내 회신을</span>{" "}<span className="lb">원칙으로 합니다.</span>
 </p>
 </div>
 <div className="col gap-16">
 <div style={{ fontSize: 14, color: "var(--bg)" }}>ir@eonlab.kr</div>
 <div className="row gap-16" style={{ marginTop: 8 }}>
 <button className="btn lg" style={{ background: "var(--bg)", color: "var(--ink)" }} onClick={() => onNavigate("contact")}>
 메시지 보내기 <span className="arr">→</span>
 </button>
 </div>
 </div>
 </div>
 </section>
 );
}

/* -------- shared table styles -------- */
const IR_TABLE_STYLES = (
 <style>{`
 .ir-table-wrap { overflow-x: auto; }
 .ir-table {
 width: 100%;
 border-collapse: collapse;
 background: var(--bg-elev);
 border: 1px solid var(--line);
 border-radius: 14px;
 overflow: hidden;
 }
 .ir-table th, .ir-table td {
 text-align: left;
 padding: 16px 22px;
 border-bottom: 1px solid var(--line);
 }
 .ir-table th {
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink-3);
 font-weight: 500;
 background: var(--bg);
 }
 .ir-table tbody tr:last-child td { border-bottom: 0; }
 .ir-table tbody tr:hover { background: var(--bg); }
 .ir-table .ir-total td { border-top: 1px solid var(--line-strong); background: var(--bg); }
 `}</style>
);

// inject once
if (typeof document !== "undefined" && !document.getElementById("__ir_table_styles")) {
 const tag = document.createElement("style");
 tag.id = "__ir_table_styles";
 tag.textContent = `
 .ir-table-wrap { overflow-x: auto; }
 .ir-table {
 width: 100%;
 border-collapse: collapse;
 background: var(--bg-elev);
 border: 1px solid var(--line);
 border-radius: 14px;
 overflow: hidden;
 }
 .ir-table th, .ir-table td {
 text-align: left;
 padding: 16px 22px;
 border-bottom: 1px solid var(--line);
 }
 .ir-table th {
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--ink-3);
 font-weight: 500;
 background: var(--bg);
 }
 .ir-table tbody tr:last-child td { border-bottom: 0; }
 .ir-table tbody tr:hover { background: var(--bg); }
 .ir-table .ir-total td { border-top: 1px solid var(--line-strong); background: var(--bg); }
 `;
 document.head.appendChild(tag);
}

window.IRPage = IRPage;