// leasebot landing page — single-page React app
const { useState, useEffect, useMemo } = React;

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "showRibbon": true,
  "darkSection": true
}/*EDITMODE-END*/;

const ACCENTS = {
  blue:   { primary: "#2563EB", primaryHover: "#1D4ED8", primarySoft: "#EFF4FF", ring: "#93B4FF", mint: "#14B8A6", mintSoft: "#E6FBF6" },
  indigo: { primary: "#4F46E5", primaryHover: "#4338CA", primarySoft: "#EEF0FF", ring: "#A5B4FC", mint: "#14B8A6", mintSoft: "#E6FBF6" },
  navy:   { primary: "#1E40AF", primaryHover: "#1E3A8A", primarySoft: "#E8EEFB", ring: "#93B4FF", mint: "#0EA5A4", mintSoft: "#E0F7F4" },
};

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULT_TWEAKS);
  const c = ACCENTS[tweaks.accent] || ACCENTS.blue;

  // expose CSS vars for downstream components
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--c-primary", c.primary);
    r.style.setProperty("--c-primary-hover", c.primaryHover);
    r.style.setProperty("--c-primary-soft", c.primarySoft);
    r.style.setProperty("--c-ring", c.ring);
    r.style.setProperty("--c-mint", c.mint);
    r.style.setProperty("--c-mint-soft", c.mintSoft);
  }, [c]);

  return (
    <div className="page">
      <TopNav />
      <Hero />
      <LogoStrip />
      <WhySection />
      <WhyActionAISection />
      <AbilitiesSection />
      <IndustriesSection />
      <ForWhomSection />
      <UseCasesSection />
      <FlowSection />
      <PricingSection highlight={tweaks.showRibbon} />
      <FaqSection />
      <FinalCta />
      <Footer />
      <MobileStickyCta />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "blue",   label: "Blue" },
              { value: "indigo", label: "Indigo" },
              { value: "navy",   label: "Navy" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Pricing">
          <TweakToggle
            label="추천 리본 표시"
            checked={tweaks.showRibbon}
            onChange={(v) => setTweak("showRibbon", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

/* ------------------------- Top Nav ------------------------- */
function TopNav() {
  const [open, setOpen] = useState(false);
  return (
    <header className="nav">
      <div className="container nav__inner">
        <a href="#top" className="brand" aria-label="Lease Bot 홈">
          <BrandMark />
          <span className="brand__name">Lease Bot</span>
        </a>
        <nav className="nav__links" aria-label="주요 메뉴">
          <a href="#why-action">왜 행동형 AI</a>
          <a href="#abilities">할 수 있는 일</a>
          <a href="#industries">활용 분야</a>
          <a href="#pricing">요금제</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav__cta">
          <a href="#contact" className="btn btn--ghost">도입 상담</a>
          <a href="#hero-demo" className="btn btn--primary">텔레그램 봇 체험</a>
        </div>
        <button className="nav__menu" aria-label="메뉴 열기" onClick={() => setOpen(!open)}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M3 6h18M3 12h18M3 18h18"/>
          </svg>
        </button>
      </div>
      {open && (
        <div className="nav__mobile">
          <a href="#why-action" onClick={() => setOpen(false)}>왜 행동형 AI</a>
          <a href="#abilities" onClick={() => setOpen(false)}>할 수 있는 일</a>
          <a href="#industries" onClick={() => setOpen(false)}>활용 분야</a>
          <a href="#pricing" onClick={() => setOpen(false)}>요금제</a>
          <a href="#faq" onClick={() => setOpen(false)}>FAQ</a>
          <a href="#contact" className="btn btn--primary" onClick={() => setOpen(false)}>도입 상담</a>
        </div>
      )}
    </header>
  );
}

function BrandMark() {
  return (
    <span className="brand__mark" aria-hidden="true">
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <rect x="1" y="1" width="26" height="26" rx="7" fill="var(--c-primary)"/>
        <path d="M8 18.5l5-2 5 2-1-6.5L20 8l-6.5 1L7 8l1.5 4-0.5 6.5z" fill="white"/>
        <circle cx="14" cy="13" r="1.4" fill="var(--c-primary)"/>
      </svg>
    </span>
  );
}

/* ------------------------- Hero ------------------------- */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container hero__inner">
        <div className="hero__copy">
          <span className="eyebrow">
            <span className="eyebrow__dot" /> 관리형 AI 텔레그램 봇 서비스
          </span>
          <div className="hero__proof">
            <span className="hero__proof-badge">⚡ 30분 제작</span>
            <span className="hero__proof-text">
              이 사이트, <strong>Lease Bot이 30분 만에 만들었다</strong>고 하면 — 믿어지시나요?
              <span className="hero__proof-detail">아이디어 10분 + 실행 20분 = <strong>Lease Bot 탄생 시간</strong></span>
            </span>
          </div>
          <h1 className="hero__title">
            AI 봇을 빌려 쓰는<br/>
            <span className="hero__title-accent">가장 쉬운 방법.</span>
          </h1>
          <p className="hero__sub">
            복잡한 설치와 관리는 Lease Bot이 대신합니다.<br/>
            고객은 텔레그램에서 바로 AI 봇을 체험하고 업무에 활용하면 됩니다.
          </p>

          <div className="hero__ctas">
            <a href="#hero-demo" className="btn btn--primary btn--lg">
              텔레그램 봇 체험하기
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M4 8h8M9 4l4 4-4 4"/>
              </svg>
            </a>
            <a href="#pricing" className="btn btn--outline btn--lg">요금제 보기</a>
            <a href="#contact" className="btn btn--text btn--lg">도입 상담 문의 →</a>
          </div>

          <ul className="hero__bullets">
            <li><CheckIcon/> 별도 서버·API 없이 사용</li>
            <li><CheckIcon/> 1주 체험형 77,000원부터</li>
            <li><CheckIcon/> 설치·관리·유지보수 대행</li>
          </ul>
        </div>

        <div className="hero__visual" id="hero-demo">
          <TelegramMock />
        </div>
      </div>
    </section>
  );
}

function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <circle cx="10" cy="10" r="9" fill="var(--c-primary-soft)" />
      <path d="M6 10.5l2.5 2.5L14 7.5" stroke="var(--c-primary)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ------------------------- Telegram Mock ------------------------- */
function TelegramMock() {
  const [tab, setTab] = useState(0);
  const conversations = [
    {
      title: "고객 문의 답변 초안",
      messages: [
        { who: "user", text: "고객 문의 답변 초안 만들어줘.\n내용: 환불 가능 여부 문의" },
        { who: "bot",  text: "네, 자연스러운 답변 초안을 작성해드렸습니다.\n\n안녕하세요 고객님, 문의 주신 환불 건은 결제일로부터 7일 이내, 미사용 상태에 한해 가능합니다. 영수증과 함께 회신 부탁드립니다." },
      ],
    },
    {
      title: "오늘 상담 요약",
      messages: [
        { who: "user", text: "오늘 상담 내용을 정리해줘." },
        { who: "bot",  text: "상담 핵심을 항목별로 정리했습니다.\n\n• 신규 문의 4건 (계약 2 / 일반 2)\n• 후속 처리 필요: 김OO 사장님 견적서\n• 다음 미팅: 5/3(월) 오전 10시" },
      ],
    },
    {
      title: "FAQ 자동 응답",
      messages: [
        { who: "user", text: "영업시간이 어떻게 되나요?" },
        { who: "bot",  text: "평일 오전 9시 ~ 오후 6시까지 운영됩니다. 주말·공휴일은 쉬며, 긴급 문의는 카카오톡 채널로 부탁드립니다." },
      ],
    },
  ];

  return (
    <div className="tg-window" role="figure" aria-label="텔레그램 AI 봇 대화 예시">
      <div className="tg-header">
        <div className="tg-avatar">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="11" fill="white" opacity="0.18"/>
            <path d="M5 12.5l13-5.5-2 13-4.5-2.5-2 2.5-0.5-4 7-6L7.5 13.5z" fill="white"/>
          </svg>
        </div>
        <div className="tg-header__meta">
          <div className="tg-header__name">Lease Bot · 업무 보조 AI</div>
          <div className="tg-header__status"><span className="dot dot--live"/> 온라인 · 평균 응답 2초</div>
        </div>
        <div className="tg-header__icons" aria-hidden="true">
          <span/><span/><span/>
        </div>
      </div>

      <div className="tg-tabs" role="tablist">
        {conversations.map((conv, i) => (
          <button
            key={i}
            role="tab"
            aria-selected={tab === i}
            className={"tg-tab " + (tab === i ? "is-active" : "")}
            onClick={() => setTab(i)}
          >{conv.title}</button>
        ))}
      </div>

      <div className="tg-body">
        <div className="tg-date">오늘</div>
        {conversations[tab].messages.map((m, i) => (
          <Bubble key={i} who={m.who} text={m.text} />
        ))}
        <Typing />
      </div>

      <div className="tg-input">
        <span className="tg-input__icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <circle cx="12" cy="12" r="9"/><path d="M9 14s1 1 3 1 3-1 3-1M9 9h.01M15 9h.01"/>
          </svg>
        </span>
        <span className="tg-input__placeholder">메시지 입력…</span>
        <span className="tg-input__send" aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
            <path d="M3 12L21 4l-4 17-5-7-9-2z" fill="currentColor"/>
          </svg>
        </span>
      </div>
    </div>
  );
}

function Bubble({ who, text }) {
  return (
    <div className={"bubble bubble--" + who}>
      <div className="bubble__inner">
        {text.split("\n").map((line, i) => (
          <div key={i} className={line === "" ? "bubble__br" : "bubble__line"}>{line || "\u00A0"}</div>
        ))}
        <span className="bubble__time">
          {who === "bot" ? "오후 2:14" : "오후 2:14"}
          {who === "user" && <span className="bubble__check">✓✓</span>}
        </span>
      </div>
    </div>
  );
}

function Typing() {
  return (
    <div className="bubble bubble--bot bubble--typing" aria-hidden="true">
      <div className="bubble__inner">
        <span className="typing-dot"/>
        <span className="typing-dot"/>
        <span className="typing-dot"/>
      </div>
    </div>
  );
}

/* ------------------------- Logo Strip ------------------------- */
function LogoStrip() {
  const lines = [
    "행정사 사무실", "노무·세무사", "법무 사무소",
    "부동산 중개", "비자·유학원", "보험·렌탈",
  ];
  return (
    <section className="logos" aria-label="이용 업종 예시">
      <div className="container">
        <div className="logos__label">이런 업종에서 사용 중</div>
        <div className="logos__row">
          {lines.map((t, i) => (
            <div key={i} className="logo-chip">
              <span className="logo-chip__sq" aria-hidden="true"/>
              <span>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------- Why ------------------------- */
function WhySection() {
  const items = [
    { num: "01", title: "텔레그램에서 바로 사용", body: "별도 앱 설치, 회원가입, 서버 세팅이 필요 없습니다. 평소 쓰던 텔레그램에서 그대로 사용합니다.", icon: "telegram" },
    { num: "02", title: "기본 스킬 저장된 봇", body: "고객 응대, 요약, 초안 작성, 번역 등 업무에 자주 쓰이는 스킬이 미리 세팅되어 있습니다.", icon: "skills" },
    { num: "03", title: "설치·관리는 Lease Bot", body: "API 키 관리, 모델 업데이트, 장애 대응 모두 운영팀이 담당합니다. 고객은 사용만 하면 됩니다.", icon: "wrench" },
    { num: "04", title: "업무에 맞는 조정", body: "응답 톤, 자주 쓰는 양식, 업종별 표현 등 사용 환경에 맞춰 간단히 조정할 수 있습니다.", icon: "tune" },
  ];
  return (
    <section className="section section--white" id="why">
      <div className="container">
        <SectionHead
          eyebrow="WHY LEASEBOT"
          title="AI를 직접 세팅하지 않아도 됩니다."
          sub="설치, API 연결, 모델 선택 — 복잡한 일은 우리가 합니다. 고객은 받아서 바로 씁니다."
        />
        <div className="why-grid">
          {items.map((it) => (
            <article key={it.num} className="why-card">
              <div className="why-card__top">
                <span className="why-card__num">{it.num}</span>
                <span className="why-card__icon"><WhyIcon name={it.icon}/></span>
              </div>
              <h3 className="why-card__title">{it.title}</h3>
              <p className="why-card__body">{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyIcon({ name }) {
  const stroke = "var(--c-primary)";
  const props = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "telegram") return <svg {...props}><path d="M3 11.5L21 4l-4 16-5-6-4 4 1-6 8-7-10 5z"/></svg>;
  if (name === "skills") return <svg {...props}><path d="M4 6h16M4 12h10M4 18h16"/><circle cx="18" cy="12" r="2"/></svg>;
  if (name === "wrench") return <svg {...props}><path d="M14 6a4 4 0 105 5l5 5-3 3-5-5a4 4 0 01-5-5l3 3 2-2-3-3z"/></svg>;
  if (name === "tune") return <svg {...props}><path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/></svg>;
  return null;
}

/* ------------------------- WHY Action AI (vs General AI) ------------------------- */
function WhyActionAISection() {
  const rows = [
    { what: "사이트 만들고 배포",     general: "코드만 알려줌 — 본인이 직접 배포", action: "도메인·SSL·배포까지 봇이 실행 ✅" },
    { what: "노션 DB 정리",            general: "정리 방법 안내",                 action: "노션 API 직접 연결해 자동 정리 ✅" },
    { what: "고객 문의 답변",          general: "답변 초안만 작성",              action: "텔레그램·DM에 직접 회신 ✅" },
    { what: "매출 알림",               general: "엑셀 분석 도와줌",              action: "계좌 입금 즉시 텔레그램 알림 ✅" },
    { what: "후기 모니터링",           general: "직접 검색하라고 안내",          action: "네이버·구글 새 리뷰 매일 자동 알림 ✅" },
    { what: "법령·고시 알림",          general: "오늘자 법령은 모름",            action: "신규 법령 RSS·API 자동 모니터링 ✅" },
    { what: "이메일 답장",             general: "초안만 보여줌",                 action: "초안 작성 후 본인 확인 → 자동 발송 ✅" },
    { what: "정기 리포트",             general: "한번에 1번만 응답",             action: "매일·매주 자동 실행·발송 ✅" },
  ];
  return (
    <section className="section section--soft" id="why-action">
      <div className="container">
        <SectionHead
          eyebrow="WHY 행동형 AI"
          title={<>응답형 AI는 ‘말’만 합니다.<br/>행동형 AI 봇은 <span style={{color:"var(--c-primary)"}}>‘직접 실행’</span>합니다.</>}
          sub="ChatGPT·Claude·제미나이 — 다 좋습니다. 다만, 답변을 받아도 결국 본인이 직접 해야 합니다. Lease Bot의 ‘행동형 AI 봇’은 답변 대신 결과를 가져옵니다."
        />

        <div className="vs-grid">
          <article className="vs-card vs-card--general">
            <div className="vs-card__head">
              <span className="vs-card__chip">응답형 AI (일반)</span>
              <h3 className="vs-card__title">묻고 → 답변 받음</h3>
            </div>
            <ul className="vs-card__list">
              <li>✗ 결과를 본인이 직접 복붙·실행해야 함</li>
              <li>✗ 외부 시스템(노션·텔레그램·결제 등) 연동 X</li>
              <li>✗ 매번 사람이 질문해야 작동</li>
              <li>✗ 24시간 자동 모니터링 X</li>
              <li>✗ 정기 작업 자동 실행 X</li>
            </ul>
            <p className="vs-card__example"><strong>예:</strong> "사이트 만드는 코드 알려줘" → 코드 받음 → <em>본인이 직접 배포</em></p>
          </article>

          <article className="vs-card vs-card--action">
            <span className="vs-card__ribbon">Lease Bot</span>
            <div className="vs-card__head">
              <span className="vs-card__chip vs-card__chip--primary">행동형 AI 봇</span>
              <h3 className="vs-card__title">시키고 → 결과 받음</h3>
            </div>
            <ul className="vs-card__list">
              <li>✓ 봇이 직접 실행 (배포·발송·등록·정리)</li>
              <li>✓ 노션·텔레그램·구글·결제·SNS 직접 연동</li>
              <li>✓ 한 번 시키면 24시간 자동 작동</li>
              <li>✓ 매출·후기·법령·시세 자동 모니터링</li>
              <li>✓ 매일·매주 정기 작업 자동 실행</li>
            </ul>
            <p className="vs-card__example"><strong>예:</strong> "사이트 만들어줘" → <em>봇이 코드 작성·도메인 연결·배포까지 실행 → URL 회신</em></p>
          </article>
        </div>

        <div className="vs-table-wrap">
          <h3 className="vs-table__title">같은 일을 시켰을 때 — 차이</h3>
          <div className="vs-table">
            <div className="vs-table__head">
              <div>업무</div>
              <div>일반 AI (응답형)</div>
              <div>Lease Bot (행동형 봇)</div>
            </div>
            {rows.map((r, i) => (
              <div className="vs-table__row" key={i}>
                <div className="vs-table__what"><strong>{r.what}</strong></div>
                <div className="vs-table__general">{r.general}</div>
                <div className="vs-table__action">{r.action}</div>
              </div>
            ))}
          </div>
        </div>

        <p className="vs-foot">
          요약: 일반 AI는 <strong>"방법"</strong>을 알려주고, 행동형 봇은 <strong>"결과"</strong>를 가져옵니다. 시간이 부족한 1인 사업자·전문가에게 차이는 결정적입니다.
        </p>
      </div>
    </section>
  );
}

/* ------------------------- Abilities (50+) ------------------------- */
function AbilitiesSection() {
  const groups = [
    {
      icon: "🌐", area: "웹사이트·앱 제작/운영",
      hook: "코드 몰라도 사이트가 살아 움직입니다.",
      items: [
        "랜딩페이지 자동 제작·Vercel 배포",
        "도메인 연결, SSL 발급, DNS 세팅",
        "디자인·문구 변경 즉시 반영",
        "신청 폼 수신 → 텔레그램 알림 + DB 저장",
        "사이트 다운 시 자동 알림·복구",
      ],
    },
    {
      icon: "📝", area: "노션·구글·엑셀 자동화",
      hook: "직접 입력하던 시간, 0초로.",
      items: [
        "노션 DB 자동 입력·업데이트",
        "회의록 → 노션 자동 정리",
        "구글 스프레드시트 자동 갱신",
        "구글 캘린더 자동 일정 등록",
        "구글 드라이브 파일 자동 분류·태그",
      ],
    },
    {
      icon: "💬", area: "카톡·텔레그램·DM 자동 응대",
      hook: "잘 때도 영업합니다.",
      items: [
        "카카오·인스타·페이스북 DM 자동 응대",
        "FAQ(영업시간·메뉴·위치·가격) 자동 응답",
        "예약 접수 (날짜·시간·인원 받기)",
        "단골 생일·기념일 자동 메시지",
        "상담 핵심 자동 요약 → 사장님께 보고",
      ],
    },
    {
      icon: "📊", area: "매출·입금·재고 모니터링",
      hook: "사업 숫자가 텔레그램에서 흐릅니다.",
      items: [
        "계좌 입금 즉시 알림",
        "일·주·월 매출 자동 리포트",
        "재고 부족 자동 경고",
        "광고 성과(전환·CPC) 모니터링",
        "정산·세금 일정 자동 알림",
      ],
    },
    {
      icon: "⭐", area: "후기·평판 모니터링",
      hook: "고객이 무슨 말을 했는지, 5분 안에 압니다.",
      items: [
        "네이버 플레이스 새 리뷰 즉시 알림",
        "구글·카카오·인스타·블로그 멘션 추적",
        "평점 변동 추적",
        "부정 리뷰 즉시 사장님 텔레그램 알림",
        "감사 답글 초안 자동 생성",
      ],
    },
    {
      icon: "📋", area: "문서·견적·계약 자동화",
      hook: "한 시간 걸리던 견적서, 30초.",
      items: [
        "견적서·계약서 자동 작성·발송",
        "영수증·세금계산서 자동 정리",
        "회의록 요약 → 이메일 자동 전송",
        "이메일 답장 초안 → 확인 후 자동 발송",
        "표준 양식 일괄 생성·관리",
      ],
    },
    {
      icon: "🏛️", area: "법령·정부 정보 자동 모니터링",
      hook: "전문직의 1순위 도구.",
      items: [
        "신규 법령·고시 자동 알림 (분야별)",
        "입찰·공고 모니터링 (조달청·나라장터)",
        "정부 지원금·바우처 신규 알림",
        "세무 일정 알림 (부가세·종소세·원천세)",
        "면허·자격 갱신·교육 알림",
      ],
    },
    {
      icon: "🛒", area: "가격·매물·시세 자동 추적",
      hook: "사람이 새로고침하지 않습니다.",
      items: [
        "항공권 가격 알림 (특정 노선·가격대)",
        "부동산 매물 자동 알림 (지역·가격·평수)",
        "주식·코인 가격·뉴스 알림",
        "환율 알림 (목표 환율 도달)",
        "쿠팡·네이버 최저가 변동 알림",
      ],
    },
    {
      icon: "🎨", area: "콘텐츠·SNS 자동화",
      hook: "콘텐츠 1인 운영자에게 직원 1명을 줍니다.",
      items: [
        "블로그·네이버 포스팅 자동 작성·발행",
        "인스타·유튜브 자막·요약 자동 생성",
        "트렌드 키워드·해시태그 자동 추천",
        "댓글 자동 답글 + 부정 댓글 알림",
        "SEO 키워드 추출·콘텐츠 아이디어",
      ],
    },
    {
      icon: "🌏", area: "번역·외국어 응대",
      hook: "외국 고객과 즉시 대화 — 같은 사람처럼.",
      items: [
        "외국 고객 메시지 자동 번역·응대",
        "한·중·영·일 동시 응대",
        "전문 문서 번역 (용어 보존)",
        "외국어 이메일 자동 작성",
        "회의 실시간 통역 보조",
      ],
    },
  ];

  return (
    <section className="section section--white" id="abilities">
      <div className="container">
        <SectionHead
          eyebrow="ABILITIES — 50+ 가지"
          title={<>"이거 하고 싶었는데, 못했죠?"<br/>이제 <span style={{color:"var(--c-primary)"}}>봇이 합니다.</span></>}
          sub="홈페이지 제작·노션 자동화·문서 작성·매출 알림·후기 모니터링 — 지식이 없어 시도조차 못하던 일들. 이제 텔레그램에 한 줄 시키면 됩니다."
        />

        <div className="abil-grid">
          {groups.map((g, i) => (
            <article key={i} className="abil-card">
              <div className="abil-card__head">
                <span className="abil-card__icon" aria-hidden="true">{g.icon}</span>
                <div>
                  <h3 className="abil-card__title">{g.area}</h3>
                  <p className="abil-card__hook">{g.hook}</p>
                </div>
              </div>
              <ul className="abil-card__list">
                {g.items.map((it, j) => (
                  <li key={j}><span className="abil-bullet" aria-hidden="true">▸</span>{it}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        <p className="abil-note">
          ※ 위 50가지는 예시입니다. 텔레그램에 일을 설명하면 — Lease Bot이 가능 여부를 즉시 판단하고, 가능한 것은 그 자리에서 자동화 셋업합니다.
        </p>
      </div>
    </section>
  );
}

/* ------------------------- Industries ------------------------- */
function IndustriesSection() {
  const inds = [
    { emoji: "⚖️", name: "행정사·세무사·노무사·법무사",  uses: "법령 모니터링·신규 의뢰 접수·서류 누락 자동 체크·일정 알림" },
    { emoji: "🏢", name: "부동산 중개·임대업",           uses: "매물 자동 모니터링·임대료 입금 확인·만기 알림·시세 추적" },
    { emoji: "🍴", name: "음식점·카페·미용실·학원",      uses: "예약 접수·메뉴 안내·후기 모니터링·단골 알림·매출 리포트" },
    { emoji: "👤", name: "1인 기업·프리랜서",            uses: "견적·계약·인보이스·이메일 답장·일정 정리 — 직원 1명 효과" },
    { emoji: "✈️", name: "유학원·이민·비자·여행사",      uses: "다국어 상담·서류 체크리스트·정부 정책 모니터링·일정 안내" },
    { emoji: "🏥", name: "의원·한의원·약국·헬스",        uses: "예약 접수·복약 알림·후기 응대·건강검진 일정·환자 안내" },
    { emoji: "📸", name: "콘텐츠 크리에이터·인플루언서", uses: "댓글 답글·통계 일일 보고·트렌드 알림·콘텐츠 아이디어·SEO" },
    { emoji: "💼", name: "보험·렌탈·금융상담",           uses: "상품 비교·고객 응대·재계약 알림·시장 동향·법규 변동" },
    { emoji: "🛍️", name: "쇼핑몰·전자상거래",            uses: "재고 알림·CS 자동 응대·후기 모니터링·광고 성과·매출 리포트" },
    { emoji: "⛪", name: "비영리·교회·동호회·학원",      uses: "공지 자동 발송·일정 안내·등록 접수·회비 입금 확인·문의 응대" },
  ];
  return (
    <section className="section section--soft" id="industries">
      <div className="container">
        <SectionHead
          eyebrow="INDUSTRIES — 활용 분야"
          title="당신의 업종에도 — 이미 쓰입니다."
          sub="아래 분야 외에도 ‘반복 업무’가 있는 곳이라면 어디든 적용 가능합니다."
        />
        <div className="ind-grid">
          {inds.map((it, i) => (
            <article key={i} className="ind-card">
              <span className="ind-card__emoji" aria-hidden="true">{it.emoji}</span>
              <h3 className="ind-card__name">{it.name}</h3>
              <p className="ind-card__uses">{it.uses}</p>
            </article>
          ))}
        </div>
        <div className="ind-foot">
          <a href="#contact" className="btn btn--primary">우리 업종에도 가능한지 상담 →</a>
        </div>
      </div>
    </section>
  );
}

/* ------------------------- For Whom ------------------------- */
function ForWhomSection() {
  const items = [
    { tag: "반복 문의", title: "고객 문의가 반복되는 사업자", body: "영업시간, 가격, 절차 같은 자주 묻는 질문에 1차 응대를 자동으로." },
    { tag: "1인 기업", title: "직원 없이 업무를 정리해야 하는 1인 기업", body: "상담 요약, 일정 정리, 메일 초안 작성을 텔레그램 한 곳에서." },
    { tag: "전문가",   title: "블로그·상담·문서 초안을 빠르게", body: "자료 정리와 초안 작성을 맡기고, 전문가는 검토만." },
    { tag: "쉬운 도입", title: "AI는 쓰고 싶지만 설정이 어려운 대표님", body: "설치·세팅·유지보수 없이 텔레그램에서 바로 사용." },
    { tag: "사무실",   title: "업무 보조가 필요한 사무실", body: "직원이 공통으로 쓰는 업무 메모·매뉴얼 검색을 봇 한 명에게." },
  ];
  return (
    <section className="section section--soft" id="for-whom">
      <div className="container">
        <SectionHead
          eyebrow="이런 분께 적합합니다"
          title="‘AI 직원 한 명’이 더 필요하셨다면."
          sub="기술 회사가 아니어도, 1인 사무실이어도 괜찮습니다."
        />
        <div className="whom-grid">
          {items.map((it, i) => (
            <article key={i} className="whom-card">
              <span className="whom-card__tag">{it.tag}</span>
              <h3 className="whom-card__title">{it.title}</h3>
              <p className="whom-card__body">{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------- Use Cases ------------------------- */
function UseCasesSection() {
  const cases = [
    { area: "고객 응대", items: ["고객 문의 답변 초안", "FAQ 자동 응답", "상담 내용 요약"] },
    { area: "문서 작성", items: ["블로그 글 초안", "계약서·안내문 다듬기", "이메일 초안"] },
    { area: "내부 업무", items: ["업무 체크리스트 작성", "회의록 요약", "직원용 매뉴얼 검색 보조"] },
    { area: "언어",      items: ["외국어 문장 번역 보조", "고객 메시지 한국어 정돈", "용어 통일"] },
  ];
  return (
    <section className="section section--white" id="use-cases">
      <div className="container">
        <SectionHead
          eyebrow="활용 예시"
          title="이미 잘 쓰고 있는 업무, 더 빨라집니다."
          sub="아래는 고객사에서 자주 사용되는 업무 패턴입니다."
        />
        <div className="cases-grid">
          {cases.map((c) => (
            <div key={c.area} className="case-card">
              <div className="case-card__head">{c.area}</div>
              <ul className="case-card__list">
                {c.items.map((it) => (
                  <li key={it}><DotIcon/> {it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <p className="cases-note">
          ※ 법률·세무·의료 등 전문 판단이 필요한 영역의 답변은 반드시 담당 전문가가 최종 검토해 주세요.
        </p>
      </div>
    </section>
  );
}
function DotIcon(){ return <span className="case-dot" aria-hidden="true"/>; }

/* ------------------------- Flow ------------------------- */
function FlowSection() {
  const steps = [
    { n: 1, t: "상담 신청", d: "필요한 업무와 사용 환경을 알려주세요." },
    { n: 2, t: "봇 유형 확인", d: "업종·업무에 맞는 기본 스킬 구성을 함께 정합니다." },
    { n: 3, t: "텔레그램 봇 세팅", d: "설치·연결·테스트 모두 Lease Bot이 진행합니다." },
    { n: 4, t: "고객이 직접 사용", d: "텔레그램에서 곧바로 봇과 대화하며 업무에 활용." },
    { n: 5, t: "운영 관리", d: "장애 대응, 업데이트, 사용 안내까지 지속 지원." },
  ];
  return (
    <section className="section section--dark" id="flow">
      <div className="container">
        <SectionHead
          eyebrow="사용 흐름"
          title="다섯 단계면 충분합니다."
          sub="상담부터 운영 관리까지 — 고객이 직접 챙길 일은 없습니다."
          dark
        />
        <ol className="flow">
          {steps.map((s, i) => (
            <li key={s.n} className="flow__step">
              <div className="flow__num">{String(s.n).padStart(2, "0")}</div>
              <div className="flow__title">{s.t}</div>
              <div className="flow__desc">{s.d}</div>
              {i < steps.length - 1 && <div className="flow__arrow" aria-hidden="true">→</div>}
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ------------------------- Pricing ------------------------- */
function PricingSection({ highlight }) {
  return (
    <section className="section section--white" id="pricing">
      <div className="container">
        <SectionHead
          eyebrow="요금제"
          title="필요한 만큼만, 명확한 가격."
          sub="부가세 포함 가격입니다. 1주 체험 후 월 구독 전환이 가능합니다."
        />

        <div className="pricing">
          <article className="price-card">
            <div className="price-card__head">
              <h3 className="price-card__name">1주 체험형</h3>
              <p className="price-card__lede">짧게 써보고 결정하세요.</p>
            </div>
            <div className="price-card__price">
              <span className="price-card__amount">77,000<span className="won">원</span></span>
              <span className="price-card__per">/ 1주, 부가세 포함</span>
            </div>
            <ul className="price-card__list">
              <li><CheckIcon/> 1주간 봇 사용</li>
              <li><CheckIcon/> 텔레그램 기반 체험</li>
              <li><CheckIcon/> 기본 스킬 포함</li>
              <li><CheckIcon/> 간단한 사용 안내</li>
              <li><CheckIcon/> 관리 지원 포함</li>
            </ul>
            <a href="#contact" className="btn btn--outline btn--block">1주 체험 신청</a>
            <p className="price-card__foot">결제 후 1영업일 내 세팅 안내</p>
          </article>

          <article className={"price-card price-card--featured " + (highlight ? "" : "is-flat")}>
            {highlight && <span className="price-card__ribbon">추천 · 가장 많이 선택</span>}
            <div className="price-card__head">
              <h3 className="price-card__name">월 구독형</h3>
              <p className="price-card__lede">실제 업무에 꾸준히 적용할 때.</p>
            </div>
            <div className="price-card__price">
              <span className="price-card__amount">220,000<span className="won">원</span></span>
              <span className="price-card__per">/ 월, 부가세 포함</span>
            </div>
            <ul className="price-card__list">
              <li><CheckIcon/> 월 단위 AI 봇 사용</li>
              <li><CheckIcon/> 기본 스킬 저장 봇 제공</li>
              <li><CheckIcon/> 텔레그램 사용</li>
              <li><CheckIcon/> 운영 및 관리 지원</li>
              <li><CheckIcon/> 업무에 맞는 간단한 조정</li>
              <li><CheckIcon/> 지속 사용 가능</li>
            </ul>
            <a href="#contact" className="btn btn--primary btn--block">월 구독 상담하기</a>
            <p className="price-card__foot">언제든 해지 가능 · 위약금 없음</p>
          </article>
        </div>

        <div className="pricing-note">
          <span className="pricing-note__icon"><CheckIcon/></span>
          업무 범위가 큰 경우, 별도 맞춤 구성도 가능합니다. <a href="#contact">문의하기 →</a>
        </div>
      </div>
    </section>
  );
}

/* ------------------------- FAQ ------------------------- */
function FaqSection() {
  const faqs = [
    { q: "제가 직접 AI를 세팅해야 하나요?", a: "아닙니다. 기본 세팅과 관리는 Lease Bot이 담당합니다. 고객은 텔레그램에서 봇과 대화만 하면 됩니다." },
    { q: "텔레그램을 꼭 사용해야 하나요?", a: "기본 사용 채널은 텔레그램입니다. 별도 앱 설치 없이 평소 쓰던 텔레그램에서 간편하게 사용할 수 있습니다." },
    { q: "우리 업종에 맞게 사용할 수 있나요?", a: "기본 스킬을 바탕으로 업무 목적에 맞는 사용 방향을 안내해드립니다. 응답 톤, 자주 쓰는 양식 등은 간단한 조정이 가능합니다." },
    { q: "AI 답변을 그대로 고객에게 보내도 되나요?", a: "중요한 업무나 전문 판단(법률·세무·의료 등)이 필요한 내용은 반드시 사람이 최종 검토해 주세요. AI 답변은 ‘초안’으로 활용하시는 것을 권장합니다." },
    { q: "1주 체험 후 월 구독으로 전환할 수 있나요?", a: "가능합니다. 체험 만료 전 안내드리며, 별도 추가 세팅 없이 그대로 이어서 사용하실 수 있습니다." },
    { q: "데이터는 어떻게 관리되나요?", a: "텔레그램 대화 기록은 운영상 필요한 범위 내에서만 보관되며, 고객이 요청하시면 즉시 삭제됩니다. 자세한 안내는 도입 상담 시 드립니다." },
  ];
  const [open, setOpen] = useState(0);

  return (
    <section className="section section--soft" id="faq">
      <div className="container container--narrow">
        <SectionHead
          eyebrow="FAQ"
          title="자주 묻는 질문"
          sub="추가로 궁금하신 내용은 도입 상담에서 자세히 안내드립니다."
        />
        <ul className="faq" itemScope itemType="https://schema.org/FAQPage">
          {faqs.map((f, i) => (
            <li key={i} className={"faq__item " + (open === i ? "is-open" : "")} itemScope itemProp="mainEntity" itemType="https://schema.org/Question">
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span itemProp="name">Q. {f.q}</span>
                <span className="faq__chev" aria-hidden="true">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M6 9l6 6 6-6"/>
                  </svg>
                </span>
              </button>
              <div className="faq__a" itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer">
                <p itemProp="text">A. {f.a}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ------------------------- Final CTA + Apply Form ------------------------- */
function FinalCta() {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    const form = e.target;
    const data = new FormData(form);
    try {
      const res = await fetch("/api/contact", { method: "POST", body: data });
      if (!res.ok) throw new Error(String(res.status));
      setSubmitted(true);
      form.reset();
    } catch (err) {
      // Fallback: open mail with pre-filled body
      const name = data.get("name") || "";
      const email = data.get("email") || "";
      const phone = data.get("phone") || "";
      const plan = data.get("plan") || "";
      const message = data.get("message") || "";
      const subject = encodeURIComponent("[Lease Bot] 신청 — " + name);
      const body = encodeURIComponent(`이름: ${name}\n이메일: ${email}\n전화: ${phone}\n플랜: ${plan}\n메시지:\n${message}`);
      window.location.href = `mailto:5000meter@gmail.com?subject=${subject}&body=${body}`;
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className="cta" id="contact">
      <div className="container">
        <div className="cta__card">
          <div className="cta__copy">
            <h2 className="cta__title">AI 직원, 어렵게 만들지 말고 빌려 쓰세요.</h2>
            <p className="cta__sub">Lease Bot이 세팅하고 관리합니다. 고객은 텔레그램에서 편하게 사용만 하면 됩니다.</p>
          </div>
          {submitted ? (
            <div className="cta__success" style={{padding:"24px",background:"#E6FBF6",border:"1px solid #14B8A6",borderRadius:"16px",textAlign:"center"}}>
              <div style={{fontSize:"28px",marginBottom:"8px"}}>✅</div>
              <div style={{fontWeight:700,fontSize:"18px",color:"#0F172A"}}>신청이 접수되었습니다</div>
              <div style={{marginTop:"6px",color:"#475569",fontSize:"14px"}}>24시간 내 텔레그램·이메일로 안내드립니다.</div>
            </div>
          ) : (
            <form className="apply-form" onSubmit={onSubmit} style={{display:"grid",gap:"12px"}}>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"12px"}}>
                <input name="name" required placeholder="이름 *" className="input" />
                <input name="phone" required placeholder="연락처 *" className="input" type="tel" />
              </div>
              <input name="email" required placeholder="이메일 *" className="input" type="email" />
              <select name="plan" required defaultValue="" className="input">
                <option value="" disabled>관심 플랜 선택 *</option>
                <option value="trial">1주 체험형 (₩77,000)</option>
                <option value="monthly">1개월 구독 (₩220,000)</option>
                <option value="undecided">아직 결정 못함</option>
              </select>
              <textarea name="message" rows={3} placeholder="원하시는 업무·자동화 내용 (선택)" className="input" />
              <label style={{fontSize:"13px",color:"#64748B",display:"flex",gap:"8px",alignItems:"flex-start"}}>
                <input type="checkbox" required style={{marginTop:"4px"}} />
                <span>개인정보 수집·이용에 동의합니다 (상담 목적, 1년 보관 후 파기)</span>
              </label>
              <button type="submit" className="btn btn--primary btn--lg btn--block" disabled={submitting}>
                {submitting ? "전송 중…" : "도입 상담 신청"}
              </button>
              <div style={{display:"flex",gap:"10px",justifyContent:"center",marginTop:"4px"}}>
                <a href="#hero-demo" className="btn btn--text">또는 텔레그램 봇 먼저 체험 →</a>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ------------------------- Footer ------------------------- */
function Footer() {
  return (
    <footer className="footer" id="blog">
      <div className="container footer__inner">
        <div className="footer__brand">
          <div className="brand">
            <BrandMark />
            <span className="brand__name">Lease Bot</span>
          </div>
          <p>텔레그램 기반 관리형 AI 봇 서비스. 설치·관리는 우리가, 사용은 고객이.</p>
          <p className="footer__contact">
            문의 <a href="mailto:5000meter@gmail.com">5000meter@gmail.com</a>
          </p>
        </div>
        <div className="footer__cols">
          <div className="footer__col">
            <h4>서비스</h4>
            <a href="#why">서비스 소개</a>
            <a href="#use-cases">활용 사례</a>
            <a href="#pricing">요금제</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="footer__col">
            <h4>블로그</h4>
            <span className="footer__muted">준비 중</span>
          </div>
          <div className="footer__col">
            <h4>회사</h4>
            <a href="#contact">도입 상담</a>
            <span className="footer__muted">개인정보처리방침 (준비 중)</span>
            <span className="footer__muted">이용약관 (준비 중)</span>
            <span className="footer__muted">사업자 정보 (준비 중)</span>
          </div>
        </div>
      </div>
      <div className="footer__bottom">
        <div className="container footer__bottom-row">
          <span>© 2026 leasebot.co.kr</span>
          <span>Managed AI for everyday work.</span>
        </div>
      </div>
    </footer>
  );
}

/* ------------------------- Mobile sticky CTA ------------------------- */
function MobileStickyCta() {
  return (
    <div className="m-cta" aria-hidden="false">
      <a href="#pricing" className="btn btn--outline">요금제</a>
      <a href="#contact" className="btn btn--primary">도입 상담 문의</a>
    </div>
  );
}

/* ------------------------- Section Head ------------------------- */
function SectionHead({ eyebrow, title, sub, dark }) {
  return (
    <header className={"sec-head " + (dark ? "sec-head--dark" : "")}>
      <div className="sec-head__eyebrow">{eyebrow}</div>
      <h2 className="sec-head__title">{title}</h2>
      {sub && <p className="sec-head__sub">{sub}</p>}
    </header>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);