// Final hybrid mockup — merges V1 + V2 sections per user direction.
// - Header + Profile + Services: V1
// - Content + Book + 운영서비스 (was Build Proof): V2
// - Credentials + Follow + Footer: V1
// - Business Card: restored from original

const FW = 390;
const FP = 22;

// Real published book.
const REAL_BOOK = {
  tag: "PUBLISHED BOOK",
  titleMain: "AI 웹 서비스",
  titleLead: "비개발자도 클로드 코드로 쉽게 만드는",
  author: "최원재 著 · 위즈앤북",
  desc: "비개발자가 AI와 대화하며 서비스 기획부터 개발·배포까지 혼자 완성하는 실전형 AI 웹 서비스 가이드.",
  stores: [
    { label: "교보문고", href: "https://product.kyobobook.co.kr/detail/S000220004305" },
    { label: "YES24", href: "https://www.yes24.com/product/goods/189627877" },
  ],
};

// SERVICES — local override (Final mockup)
const SERVICES_FINAL = [
  {
    icon: "screen",
    title: "기업 AX 컨설팅 & AI Agentic Development 교육",
    tags: ["B2B"],
    desc: "기업 AX 도입 및 AI를 이용한 체계적인 바이브코딩 프로세스 기반 교육.",
    highlight: true,
    href: "https://itconnect.dev/",
  },
  {
    icon: "code",
    title: "AI 바이브코딩으로 서비스 개발하기",
    tags: ["B2C", "기수제"],
    desc: "AI로 서비스 기획·설계·개발·배포까지 진행하는 바이브코딩 교육.",
    href: "https://itconnect.dev/program/4week",
  },
];

// ─────────────────────────────────────────────────────────────
// Final composed page
// ─────────────────────────────────────────────────────────────
function LittFinal() {
  const LINE = "var(--line-light)";
  const INK = "var(--brand-ink)";

  return (
    <MobileFrame width={FW} theme="paper" showHome={false} showStatus={false}>
      {/* === PROFILE CARD · 마스트헤드 통합 === */}
      <div style={{ padding: `28px ${FP}px 0` }}>
        <div style={{
          background: "#fff", border: `1px solid ${LINE}`, borderRadius: 18,
          padding: "26px 22px 22px", textAlign: "center", position: "relative",
          overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", left: 0, right: 0, top: 0, height: 88,
            background: "linear-gradient(180deg, var(--bg2) 0%, transparent 100%)",
          }}/>
          <div style={{ position: "relative", display: "inline-block" }}>
            <img src="assets/profile-photo-circle.png" alt="최원재"
              style={{
                width: 124, height: 124, borderRadius: "50%",
                border: "3px solid #fff", boxShadow: "0 8px 24px -6px rgba(31,36,48,0.18)",
                objectFit: "cover", display: "block",
              }}
            />
            <span style={{
              position: "absolute", right: 4, bottom: 4,
              width: 14, height: 14, borderRadius: 99, background: "#3d8b5f",
              boxShadow: "0 0 0 3px #fff",
            }}/>
          </div>
          <h1 style={{
            margin: "18px 0 8px",
            fontFamily: "var(--font-sans)", fontWeight: 800,
            fontSize: 28, letterSpacing: "-0.025em", color: INK,
          }}>최원재</h1>
          <div style={{
            fontFamily: "\"Manrope\", var(--font-sans)", fontSize: 11.5, fontWeight: 650,
            color: "var(--text-soft)", letterSpacing: "0.075em", textTransform: "uppercase",
          }}>
            ITCONNECT · CEO · CHOI WON JAE
          </div>
          <div style={{
            marginTop: 10, fontFamily: "\"Manrope\", var(--font-sans)", fontSize: 12, fontWeight: 700,
            color: "var(--brand-blue)", letterSpacing: "0.07em", textTransform: "uppercase",
            lineHeight: 1.75,
          }}>
            AX Consultant<br/>AI Agentic Developer
          </div>
        </div>

        <div style={{ marginTop: 14 }}>
          <Btn href="https://itconnect.dev/contact" target="_blank" variant="primary" size="lg" iconLeft={<Icon.Mail />}>기업 교육·컨설팅 문의하기</Btn>
        </div>
      </div>

      {/* === SERVICES · V1 === */}
      <SectionV1
        eyebrow="Services"
        icon={<Icon.Building size={14} />}
        lead="기업의 업무를 파악하고 AX를 적용하기 위한 컨설팅과 AI Agentic 개발 방법론을 교육합니다."
      >
        <ServiceCardV1 svc={SERVICES_FINAL[0]} />
        <ServiceCardV1 svc={SERVICES_FINAL[1]} />
      </SectionV1>

      {/* === CONTENT · V2 === */}
      <SectionV2 eyebrow="01 · Content" color="#c45b5b">
        {CONTENT_LINKS.map((c, i) => <LinkCardV2 key={i} {...c} />)}
      </SectionV2>

      {/* === BOOK · V2 (with real cover) === */}
      <SectionV2 eyebrow="02 · Book" color="#c87d1a">
        <BookFeatureFinal />
      </SectionV2>

      {/* === 운영 서비스 · V2 (was Build Proof) === */}
      <SectionV2 eyebrow="03 · 운영 서비스" color="#3d8b5f"
        lead="비개발자 창업가가 AI로 직접 개발하고 운영하는 서비스.">
        {PROOF.filter(p => p.name !== "Startora").map((p, i) => <ProofCardV2 key={i} item={p} />)}
      </SectionV2>

      {/* === CREDENTIALS · 약력 (한국어) === */}
      <CredFinal />

      {/* === FOLLOW · V1 === */}
      <FollowV1 />

      {/* === BUSINESS CARD (original image) === */}
      <BusinessCardOriginal />

      {/* === FOOTER · 기존 원본과 동일 === */}
      <FooterFinal />
    </MobileFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// Book feature card — warm editorial card, transparent cover floats
// ─────────────────────────────────────────────────────────────
function BookFeatureFinal() {
  return (
    <div style={{
      padding: "22px 18px 20px", borderRadius: 16,
      background: "linear-gradient(155deg, #FCEFD9 0%, #F7E6CB 45%, #ECE0C5 100%)",
      border: "1px solid rgba(212,176,118,0.35)",
      position: "relative", overflow: "hidden",
      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.6)",
    }}>
      {/* warm peach glow top-right */}
      <div style={{
        position: "absolute", right: -60, top: -80, width: 220, height: 220,
        borderRadius: "50%", background: "rgba(232,140,90,0.22)", filter: "blur(50px)",
        pointerEvents: "none",
      }} />
      {/* tiny dot grid */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `radial-gradient(rgba(120,90,40,0.10) 1px, transparent 1px)`,
        backgroundSize: "18px 18px", opacity: 0.5, pointerEvents: "none",
      }} />

      <div style={{ position: "relative", textAlign: "center" }}>
        <span style={{
          display: "inline-block",
          padding: "4px 10px", borderRadius: 4, background: "var(--accent-highlight)",
          fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.14em", color: "#5a4506",
          textTransform: "uppercase", fontWeight: 700,
        }}>{REAL_BOOK.tag}</span>

        <div style={{ marginTop: 14, display: "flex", justifyContent: "center" }}>
          <img src="assets/book-cover-transparent.png" alt="비개발자도 클로드 코드로 쉽게 만드는 AI 웹 서비스"
            style={{
              width: 156, height: 156, objectFit: "contain", display: "block",
              filter: "drop-shadow(0 14px 22px rgba(120,80,30,0.28)) drop-shadow(0 5px 8px rgba(120,80,30,0.18))",
            }}
          />
        </div>

        <h3 style={{
          margin: "14px auto 0", maxWidth: 290,
          fontFamily: "var(--font-serif)", fontWeight: 700,
          fontSize: 19, lineHeight: 1.35, letterSpacing: "-0.02em",
          color: "#2e1d10",
        }}>
          『비개발자도 클로드 코드로<br/>쉽게 만드는 <Mark color="#2e1d10" bar="rgba(232,140,90,0.5)">AI 웹 서비스</Mark>』
        </h3>

        <div style={{ marginTop: 10, fontSize: 11, color: "#8a6d40", fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>
          {REAL_BOOK.author}
        </div>
      </div>

      <p style={{
        position: "relative", margin: "18px auto 16px", maxWidth: 310, fontSize: 12.5, lineHeight: 1.65,
        color: "#5a4321", letterSpacing: "-0.008em", textAlign: "center",
      }}>{REAL_BOOK.desc}</p>

      <div style={{ position: "relative", display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "center" }}>
        {REAL_BOOK.stores.map((s) => (
          <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "7px 13px", borderRadius: 99,
            background: "rgba(255,255,255,0.7)", border: "1px solid rgba(180,140,80,0.3)",
            fontSize: 11.5, color: "#4a3618", fontWeight: 600,
            textDecoration: "none",
          }}>{s.label} <Icon.ArrowUR size={10} /></a>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Business Card — original cards, two stacked images
// ─────────────────────────────────────────────────────────────
function BusinessCardOriginal() {
  return (
    <section style={{ padding: `40px ${FP}px 0` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <span style={{
          width: 22, height: 22, borderRadius: 6,
          background: "var(--blue-subtle)", color: "var(--brand-blue)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
        }}><Icon.Building size={14} /></span>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600,
          letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-soft)",
        }}>Business Card</span>
        <span style={{ flex: 1, height: 1, background: "var(--line-light)" }} />
      </div>

      <img src="assets/biz-card-front.png" alt="명함 앞면"
        style={{ width: "100%", display: "block", borderRadius: 10 }}
      />
      <img src="assets/biz-card-back.png" alt="명함 뒷면"
        style={{ width: "100%", display: "block", marginTop: 10, borderRadius: 10 }}
      />
    </section>
  );
}

Object.assign(window, { LittFinal });

// ─────────────────────────────────────────────────────────────
// CREDENTIALS in Korean — Cred section (약력)
// ─────────────────────────────────────────────────────────────
function CredFinal() {
  const career = [
    { y: "2023 —",       t: "아이티커넥트(주) CEO" },
    { y: "2017 — 2020",  t: "㈜엔코아 IT교육 전략기획실장" },
    { y: "2014 — 2017",  t: "(주)L&CA CEO, Co-founder" },
    { y: "2014 — 2016",  t: "㈜코코로톡 COO, Co-founder" },
  ];
  return (
    <section style={{ padding: `40px ${FP}px 0` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--blue-subtle)", color: "var(--brand-blue)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
          <Icon.Check />
        </span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-soft)" }}>
          약력 · Profile
        </span>
        <span style={{ flex: 1, height: 1, background: "var(--line-light)" }} />
      </div>

      {/* Certifications — single line */}
      <div style={{
        padding: "11px 14px", borderRadius: 10,
        background: "#fff", border: "1px solid var(--line-light)",
        marginBottom: 22,
        fontSize: 11.5, color: "var(--brand-ink)", lineHeight: 1.5,
        letterSpacing: "-0.012em", whiteSpace: "nowrap",
        overflow: "hidden", textOverflow: "ellipsis",
      }}>
        청년창업사관학교 <span style={{ color: "var(--text-tertiary)" }}>·</span> 창업중심대학 예비창업자 <span style={{ color: "var(--text-tertiary)" }}>·</span> 과천시 우수 스타트업
      </div>

      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--text-tertiary)", textTransform: "uppercase", marginBottom: 10 }}>
        경력 · Career
      </div>
      <div>
        {career.map((c, i, arr) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "92px 1fr", gap: 12,
            padding: "10px 0",
            borderBottom: i === arr.length - 1 ? "none" : "1px dashed var(--line-faint)",
          }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-soft)", letterSpacing: "0.04em" }}>{c.y}</span>
            <span style={{ fontSize: 13.5, color: "var(--brand-ink)", fontWeight: 500, letterSpacing: "-0.01em" }}>{c.t}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer — matches the original page
// ─────────────────────────────────────────────────────────────
function FooterFinal() {
  return (
    <div style={{ padding: `36px ${FP}px 32px`, marginTop: 16, textAlign: "center" }}>
      <Wordmark size={13} />
      <div style={{ marginTop: 10, fontSize: 11, color: "var(--text-soft)", lineHeight: 1.8, letterSpacing: "0.01em" }}>
        © 2026 아이티커넥트(주) · <a href="mailto:contact@itconnect.dev">contact@itconnect.dev</a><br/>
        서울시 금천구 가산디지털1로 16, 420호 · <a href="https://itconnect.dev" target="_blank" rel="noopener noreferrer">itconnect.dev</a>
      </div>
    </div>
  );
}

Object.assign(window, { CredFinal, FooterFinal });