import Link from "next/link";
import { ArrowRight, Package, FileSpreadsheet, Mail, BarChart3, Smartphone, ShieldCheck, UserPlus, Search, ShoppingCart, CheckCircle2, Receipt, ClipboardList } from "lucide-react";

export const metadata = {
  title: "모모유통 — 유통관리 시스템",
  description: "발주 · 입고 · 명세서 · 정산까지, 유통 업무의 모든 흐름을 한 곳에서.",
};

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-white text-slate-900">
      {/* 상단 네비 */}
      <header className="sticky top-0 z-30 bg-white/85 backdrop-blur border-b border-slate-200">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <img src="/momo-icon.svg" alt="" className="w-8 h-8" />
            <span className="font-bold text-emerald-800 tracking-wider">MOMO DISTRIBUTION</span>
          </div>
          <nav className="flex items-center gap-2">
            <Link
              href="/login"
              className="px-4 h-9 inline-flex items-center text-sm font-semibold text-emerald-800 hover:text-emerald-900 rounded-lg hover:bg-emerald-50 transition"
            >
              로그인
            </Link>
            <Link
              href="/signup"
              className="px-4 h-9 inline-flex items-center text-sm font-bold text-white rounded-lg bg-gradient-to-r from-emerald-700 to-emerald-600 shadow shadow-emerald-600/20 hover:shadow-emerald-600/40 hover:-translate-y-0.5 transition-all"
            >
              회원가입
            </Link>
          </nav>
        </div>
      </header>

      {/* 히어로 */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[#0d3b24] via-[#1b5e3a] to-[#0f4a2a] text-white">
        <div
          className="absolute inset-0 pointer-events-none opacity-30"
          style={{
            backgroundImage:
              "radial-gradient(circle at 20% 30%, rgba(126,217,167,0.25) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(46,139,87,0.3) 0, transparent 45%)",
          }}
        />
        <div
          className="absolute inset-0 pointer-events-none opacity-30"
          style={{
            backgroundImage:
              "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 0), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 0)",
            backgroundSize: "48px 48px",
          }}
        />
        <div className="relative max-w-6xl mx-auto px-6 py-20 lg:py-28">
          <div className="inline-flex items-center gap-2 bg-emerald-400/10 border border-emerald-300/20 px-3 py-1.5 rounded-full text-[12px] font-semibold tracking-widest text-emerald-100 mb-6">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-300 animate-pulse" />
            MOMO ERP · 2026 NEW
          </div>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-5 tracking-tight">
            엑셀로 하던 발주,<br />
            <span className="text-emerald-200">한 번의 클릭으로.</span>
          </h1>
          <p className="text-emerald-100/90 text-lg md:text-xl max-w-2xl leading-relaxed mb-10">
            모모유통 유통관리 시스템은 <b>발주 · 재고 · 명세서 · 정산</b>을 하나로 묶어
            여러 명이 동시에 입력해도 금액이 어긋나지 않습니다.
            거래처는 PC와 휴대폰 어디서든 발주할 수 있습니다.
          </p>
          <div className="flex flex-wrap items-center gap-3">
            <Link
              href="/signup"
              className="group inline-flex items-center gap-2 px-6 h-12 rounded-xl bg-white text-emerald-800 font-bold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all"
            >
              지금 시작하기
              <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
            </Link>
            <Link
              href="/login"
              className="inline-flex items-center gap-2 px-6 h-12 rounded-xl border border-emerald-300/40 text-white font-semibold hover:bg-white/10 transition"
            >
              로그인
            </Link>
          </div>
        </div>
      </section>

      {/* 전체 업무 흐름 — 거래처(구매자) 관점 4단계 */}
      <section className="bg-slate-50 border-y border-slate-200">
        <div className="max-w-6xl mx-auto px-6 py-16">
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
              <span className="w-6 h-[2px] bg-emerald-600" /> WORKFLOW · 거래처 관점
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-3">출고 요청부터 계산서까지 4단계</h2>
            <p className="text-slate-500">출고 요청 → 출고 완료(메일 발송) → 입금 완료 → 계산서 발행 완료</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
            {[
              {
                n: "1", t: "품목 검색 + 출고 요청", who: "거래처가 작성",
                desc: "재고가 있는 품목만 활성화(재고 0은 비활성). 수량 입력 후 출고 요청 작성.",
                c: "from-amber-500 to-orange-600",
                state: "상태: 출고 요청",
              },
              {
                n: "2", t: "출고 처리", who: "모모 출고 담당자 승인",
                desc: "담당자가 요청 확인 후 출고. 가입 이메일로 거래명세표(엑셀 첨부) 자동 발송.",
                c: "from-orange-500 to-rose-500",
                state: "상태: 출고 완료",
              },
              {
                n: "3", t: "입금 확인", who: "모모 담당자 등록",
                desc: "거래처 입금 확인 후 담당자가 입금 등록. 완납 시 자동으로 상태 변경.",
                c: "from-rose-500 to-pink-500",
                state: "상태: 입금 완료",
              },
              {
                n: "4", t: "계산서 발행", who: "월말 일괄",
                desc: "월말 결산 시 미발행 건을 일괄 선택해 계산서 발행. 최종 완료.",
                c: "from-pink-500 to-violet-500",
                state: "상태: 계산서 발행 완료 (최종)",
              },
            ].map((x) => (
              <div key={x.n} className="rounded-2xl bg-white border border-slate-200 p-5 shadow-sm relative">
                <div className={`absolute -top-3 left-5 w-7 h-7 rounded-full bg-gradient-to-br ${x.c} text-white font-bold flex items-center justify-center text-sm shadow`}>{x.n}</div>
                <h3 className="font-bold mt-3 mb-1 text-sm leading-tight">{x.t}</h3>
                <div className="text-[11px] text-emerald-700 font-semibold mb-1.5">{x.who}</div>
                <p className="text-xs text-slate-600 leading-relaxed mb-2">{x.desc}</p>
                <div className="text-[10px] font-bold text-slate-500 bg-slate-100 px-2 py-0.5 rounded inline-block">{x.state}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 사용 방법 (거래처 4단계 — 회원가입 + 4단계 흐름) */}
      <section className="max-w-6xl mx-auto px-6 py-20">
        <div className="text-center mb-14">
          <div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
            <span className="w-6 h-[2px] bg-emerald-600" />
            HOW IT WORKS · 거래처 상세
          </div>
          <h2 className="text-3xl md:text-4xl font-bold mb-3">가입부터 계산서 발행 완료까지</h2>
          <p className="text-slate-500">거래처는 출고 요청만 하시면 됩니다. 출고·입금·계산서는 모모유통 담당자가 처리합니다.</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          <StepCard num="0" icon={<UserPlus size={20} />} title="회원가입 (1회)"
            desc="우측 상단 [회원가입] 버튼 → 이메일·업체명·비밀번호 입력. 사업자등록번호·대표자명도 등록해 두면 거래명세서에 자동 표시됩니다."
          />
          <StepCard num="1" icon={<Search size={20} />} title="품목 검색 + 출고 요청"
            desc="[품목 검색]에서 사진과 단가를 보고 담습니다. 재고가 0인 품목은 비활성화되어 잘못 발주할 수 없습니다. 면세(M품목)는 보라 뱃지로 구분, 면세/과세 합계가 실시간 계산됩니다. [출고 요청] 버튼으로 즉시 모모에 전송."
          />
          <StepCard num="2" icon={<Mail size={20} />} title="출고 처리 (담당자 승인)"
            desc="모모 담당자가 [출고 관리]에서 요청을 확인 후 [승인]. 그 즉시 재고가 차감되고, 가입 이메일로 거래명세표 메일이 자동 발송됩니다 (엑셀 .xlsx 첨부)."
            highlight="상태: 출고 요청 → 출고 완료"
          />
          <StepCard num="3" icon={<CheckCircle2 size={20} />} title="입금 확인"
            desc="거래처가 입금하면 모모 담당자가 [입금 관리]에서 입금 등록. 부분 입금도 가능하고, 완납 시 자동으로 상태가 변경됩니다."
            highlight="상태: 출고 완료 → 입금 완료"
          />
          <StepCard num="4" icon={<Receipt size={20} />} title="월말 계산서 발행"
            desc="월말 결산 시 미발행 건을 [계산서 발행]에서 체크박스 멀티 선택하여 일괄 발행. 계산서 번호 자동 채번."
            highlight="상태: 입금 완료 → 계산서 발행 완료 (최종)"
          />
          <StepCard num="✓" icon={<ClipboardList size={20} />} title="이력 추적"
            desc="거래처는 [내 출고 이력]에서 본인 발주 내역을, 모모는 통계 메뉴에서 일자별·월별·업체별·품목별·마진까지 한눈에."
          />
        </div>
      </section>

      {/* 화면 미리보기 */}
      <section className="bg-gradient-to-br from-emerald-50/40 to-white border-y border-emerald-100">
        <div className="max-w-6xl mx-auto px-6 py-20">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
              <span className="w-6 h-[2px] bg-emerald-600" />
              SCREEN PREVIEW
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-3">실제 동작 화면</h2>
          </div>

          <div className="grid md:grid-cols-2 gap-5">
            <PreviewCard title="장바구니" desc="우측 패널에 면세/과세/세액이 즉시 분리 계산됩니다.">
              <div className="space-y-2 text-xs">
                <div className="flex justify-between p-2 bg-slate-50 rounded">
                  <span>M 유정란 × 30</span><span className="font-bold tabular-nums">₩300,000</span>
                </div>
                <div className="flex justify-between p-2 bg-slate-50 rounded">
                  <span>빨강 탈취제 × 11</span><span className="font-bold tabular-nums">₩101,200</span>
                </div>
                <div className="border-t pt-2 mt-3 space-y-1">
                  <div className="flex justify-between"><span className="text-violet-700">면세 합계</span><span className="tabular-nums">₩300,000</span></div>
                  <div className="flex justify-between"><span className="text-rose-700">과세 공급가</span><span className="tabular-nums">₩92,000</span></div>
                  <div className="flex justify-between"><span>세액</span><span className="tabular-nums">₩9,200</span></div>
                  <div className="flex justify-between font-bold text-emerald-700 pt-1 border-t"><span>총 합계</span><span className="tabular-nums">₩401,200</span></div>
                </div>
              </div>
            </PreviewCard>
            <PreviewCard title="자동 발송 메일" desc="승인 직후 가입 이메일로 도착하는 거래명세표 본문 + 엑셀 첨부.">
              <div className="bg-slate-900 rounded-lg p-3 text-emerald-100 text-[11px] font-mono space-y-1">
                <div className="text-slate-400">받는사람: 거래처 ▸</div>
                <div className="text-slate-400 mb-2">제목: [모모유통] 발주 ORD-… 승인되었습니다</div>
                <div className="text-emerald-300">📎 거래명세표_ORD-….xlsx (12 KB)</div>
                <div className="border-t border-slate-700 pt-2 mt-2 space-y-0.5 text-slate-200">
                  <div>발주번호: ORD-20260425-0007</div>
                  <div>면세 합계: ₩300,000</div>
                  <div>과세 공급가: ₩92,000</div>
                  <div className="text-emerald-300 font-bold">총 합계: ₩401,200</div>
                </div>
              </div>
            </PreviewCard>
          </div>
        </div>
      </section>

      {/* 주요 기능 */}
      <section className="bg-emerald-50/40 border-y border-emerald-100">
        <div className="max-w-6xl mx-auto px-6 py-20">
          <div className="text-center mb-14">
            <div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
              <span className="w-6 h-[2px] bg-emerald-600" />
              FEATURES
            </div>
            <h2 className="text-3xl md:text-4xl font-bold mb-3">유통 업무 전체를 한 화면에</h2>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            <Feature icon={<Package size={22} />} title="품목·재고 관리" desc="사진·제조사·면세 여부, 창고별 현재고와 입출고 이력까지 추적합니다." />
            <Feature icon={<FileSpreadsheet size={22} />} title="거래명세표 자동 생성" desc="VAT 포함/별도, 면세/과세 합계가 자동 계산되어 명세서가 곧바로 만들어집니다." />
            <Feature icon={<Mail size={22} />} title="메일 자동 발송" desc="승인 시 가입 이메일로 명세서 본문 + 엑셀 파일이 자동 첨부되어 발송됩니다." />
            <Feature icon={<BarChart3 size={22} />} title="매출 통계·그래프" desc="일별·월별·업체별·품목별 누적 매출을 실시간 그래프로 확인합니다." />
            <Feature icon={<Smartphone size={22} />} title="안드로이드 앱" desc="거래처가 휴대폰으로 품목을 검색하고 즉시 발주할 수 있습니다(APK 제공)." />
            <Feature icon={<ShieldCheck size={22} />} title="동시 입력 안전" desc="여러 명이 동시에 발주해도 재고와 합계가 어긋나지 않도록 트랜잭션으로 보장합니다." />
          </div>
        </div>
      </section>

      {/* 사용 가이드 */}
      <section className="max-w-5xl mx-auto px-6 py-20">
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
            <span className="w-6 h-[2px] bg-emerald-600" />
            USER GUIDE
          </div>
          <h2 className="text-3xl md:text-4xl font-bold mb-3">사용자별 화면</h2>
        </div>

        <div className="grid md:grid-cols-2 gap-6">
          <div className="rounded-2xl border border-emerald-100 bg-white p-7 shadow-sm">
            <div className="text-emerald-700 text-xs font-bold tracking-widest mb-2">FOR 거래처</div>
            <h3 className="text-2xl font-bold mb-4">대리점 · 소매상</h3>
            <ul className="space-y-3 text-slate-600 text-[15px]">
              <li className="flex gap-2"><span className="text-emerald-600 font-bold">·</span>이메일과 업체명으로 무료 가입</li>
              <li className="flex gap-2"><span className="text-emerald-600 font-bold">·</span>현재고 있는 품목 검색·선택</li>
              <li className="flex gap-2"><span className="text-emerald-600 font-bold">·</span>장바구니에 담아 발주 요청</li>
              <li className="flex gap-2"><span className="text-emerald-600 font-bold">·</span>승인되면 거래명세표가 메일로 도착</li>
              <li className="flex gap-2"><span className="text-emerald-600 font-bold">·</span>본인 발주 내역과 미수금을 언제든 확인</li>
            </ul>
          </div>
          <div className="rounded-2xl border border-emerald-100 bg-gradient-to-br from-[#0d3b24] to-[#1b5e3a] text-white p-7 shadow-lg shadow-emerald-700/20">
            <div className="text-emerald-200 text-xs font-bold tracking-widest mb-2">FOR 모모유통</div>
            <h3 className="text-2xl font-bold mb-4">관리자 · 담당자</h3>
            <ul className="space-y-3 text-emerald-50/90 text-[15px]">
              <li className="flex gap-2"><span className="text-emerald-300 font-bold">·</span>품목 마스터 관리 (사진·제조사·면세)</li>
              <li className="flex gap-2"><span className="text-emerald-300 font-bold">·</span>창고별 재고와 입출고 이력 관리</li>
              <li className="flex gap-2"><span className="text-emerald-300 font-bold">·</span>발주 요청 검토 → 승인 (1클릭)</li>
              <li className="flex gap-2"><span className="text-emerald-300 font-bold">·</span>월말 계산서 발행 / 입금 관리</li>
              <li className="flex gap-2"><span className="text-emerald-300 font-bold">·</span>대시보드에서 매출·미수금 한눈에</li>
            </ul>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="max-w-5xl mx-auto px-6 pb-20">
        <div className="rounded-3xl bg-gradient-to-br from-emerald-700 to-emerald-600 text-white p-10 md:p-14 text-center shadow-xl shadow-emerald-600/20">
          <h2 className="text-3xl md:text-4xl font-bold mb-3">엑셀에서 벗어날 시간입니다</h2>
          <p className="text-emerald-100/90 mb-7 max-w-xl mx-auto">
            가입 후 바로 사용할 수 있습니다. 별도 설치 없이 웹 브라우저만 있으면 됩니다.
          </p>
          <div className="flex flex-wrap justify-center gap-3">
            <Link
              href="/signup"
              className="inline-flex items-center gap-2 px-7 h-12 rounded-xl bg-white text-emerald-800 font-bold shadow hover:-translate-y-0.5 transition"
            >
              회원가입 <ArrowRight size={18} />
            </Link>
            <Link
              href="/login"
              className="inline-flex items-center gap-2 px-7 h-12 rounded-xl border border-emerald-300/40 text-white font-semibold hover:bg-white/10 transition"
            >
              로그인
            </Link>
          </div>
        </div>
      </section>

      <footer className="border-t border-slate-200">
        <div className="max-w-6xl mx-auto px-6 py-8 flex flex-wrap items-center justify-between gap-4 text-sm text-slate-500">
          <div className="flex items-center gap-2">
            <img src="/momo-icon.svg" alt="" className="w-5 h-5 opacity-70" />
            <span>© 2026 모모유통 유통관리 시스템</span>
          </div>
          <div className="flex gap-4 text-[13px]">
            <span>momo8443@daum.net</span>
            <span>010-6624-5315</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

function Step({ num, title, desc }: { num: string; title: string; desc: string }) {
  return (
    <div className="relative rounded-2xl border border-emerald-100 bg-white p-7 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
      <div className="absolute -top-4 left-7 w-9 h-9 rounded-full bg-gradient-to-br from-emerald-700 to-emerald-500 text-white font-bold flex items-center justify-center shadow">
        {num}
      </div>
      <h3 className="text-lg font-bold mt-4 mb-2 text-slate-900">{title}</h3>
      <p className="text-slate-600 text-sm leading-relaxed">{desc}</p>
    </div>
  );
}

function StepCard({ num, icon, title, desc, highlight }: { num: string; icon: React.ReactNode; title: string; desc: string; highlight?: string }) {
  return (
    <div className="relative rounded-2xl border border-emerald-100 bg-white p-6 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
      <div className="flex items-center gap-3 mb-3">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-700 to-emerald-500 text-white flex items-center justify-center shadow">
          {icon}
        </div>
        <div className="text-emerald-700 text-xs font-bold tracking-widest">STEP {num}</div>
      </div>
      <h3 className="text-base font-bold mb-2 text-slate-900">{title}</h3>
      <p className="text-slate-600 text-sm leading-relaxed">{desc}</p>
      {highlight && (
        <div className="mt-3 text-[11px] font-bold text-emerald-800 bg-emerald-50 border border-emerald-200 px-2.5 py-1.5 rounded">
          {highlight}
        </div>
      )}
    </div>
  );
}

function PreviewCard({ title, desc, children }: { title: string; desc: string; children: React.ReactNode }) {
  return (
    <div className="rounded-2xl border border-emerald-100 bg-white p-6 shadow-sm">
      <h3 className="font-bold mb-1">{title}</h3>
      <p className="text-xs text-slate-500 mb-4">{desc}</p>
      {children}
    </div>
  );
}

function Feature({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) {
  return (
    <div className="rounded-xl bg-white border border-emerald-100 p-6 hover:shadow-md transition">
      <div className="w-11 h-11 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center mb-3">
        {icon}
      </div>
      <h4 className="font-bold mb-1">{title}</h4>
      <p className="text-sm text-slate-600 leading-relaxed">{desc}</p>
    </div>
  );
}
