// 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">
      <SloganBanner />
      <TopNav />
      <Hero />
      <LogoStrip />
      <WhySection />
      <SafetyBenefitSection />
      <WhyActionAISection />
      <AbilitiesSection />
      <CloudAutomationSection />
      <ToolDetailsSection />
      <LimitationsSection />
      <IndustriesSection />
      <ForWhomSection />
      <UseCasesSection />
      <FlowSection />
      <PricingSection highlight={tweaks.showRibbon} />
      <FaqSection />
      <TelegramDownloadSection />
      <FinalCta />
      <Footer />
      <MobileStickyCta />
      <ChatWidget />

      <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>
  );
}

/* ------------------------- Slogan Banner ------------------------- */
function SloganBanner() {
  return (
    <div className="slogan-banner" role="banner">
      <div className="container slogan-banner__inner">
        <span className="slogan-banner__icon" aria-hidden="true">🤖</span>
        <span className="slogan-banner__text">전국민이 <strong>봇</strong>을 활용할 수 있는 그날까지</span>
        <span className="slogan-banner__icon" aria-hidden="true">✨</span>
        <span className="slogan-banner__since">Since 2026년 5월 4일</span>
      </div>
    </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="#tool-details">도구별 작업</a>
          <a href="#pricing">요금제</a>
          <a href="#telegram-download" className="nav__highlight">📱 텔레그램</a>
          <a href="#faq">FAQ</a>
          <a href="/blog">블로그</a>
          <a href="/en" className="nav__lang-inline" title="English version">🇺🇸 English</a>
        </nav>
        <div className="nav__cta">
          <a href="/en" className="nav__lang-toggle" title="English">🇺🇸 EN</a>
          <a href="#contact" className="btn btn--ghost">도입 상담</a>
          <a href="#" onClick={(e) => { e.preventDefault(); document.querySelector('.chat-fab')?.click(); }} className="btn btn--primary">Lease Bot에게 질문하기</a>
        </div>
        <a href="/en" className="nav__lang-toggle-mobile" title="English version">🇺🇸 EN</a>
        <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="#tool-details" onClick={() => setOpen(false)}>도구별 작업</a>
          <a href="#limitations" onClick={() => setOpen(false)}>한계</a>
          <a href="#industries" onClick={() => setOpen(false)}>활용 분야</a>
          <a href="#pricing" onClick={() => setOpen(false)}>요금제</a>
          <a href="#telegram-download" onClick={() => setOpen(false)} className="nav__highlight">📱 텔레그램 설치방법</a>
          <a href="#faq" onClick={() => setOpen(false)}>FAQ</a>
          <a href="/blog" onClick={() => setOpen(false)}>📘 블로그</a>
          <a href="/en" onClick={() => setOpen(false)}>🇺🇸 English</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="#" onClick={(e) => { e.preventDefault(); document.querySelector('.chat-fab')?.click(); }} className="btn btn--primary btn--lg">
              Lease Bot에게 질문하기
              <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원부터 (Sonnet+Haiku 자동전환)</li>
            <li><CheckIcon/> 설치·관리·유지보수 대행</li>
          </ul>
        </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;
}

/* ------------------------- Safety Benefit (테스트와 실전을 동시에) ------------------------- */
function SafetyBenefitSection() {
  return (
    <section className="section section--soft" id="safety">
      <div className="container">
        <SectionHead
          eyebrow="걱정 없이 시작"
          title={<>테스트도, 실전도<br/><span style={{color:"var(--c-primary)"}}>한 곳에서 안전하게</span></>}
          sub="AI 봇을 직접 운영하기 부담스러우신가요? 서버 관리·보안 사고·예측 불가능한 동작 — 모두 Lease Bot이 대신 책임집니다. 검증된 환경에서 가볍게 체험하고, 그대로 실제 업무에 활용하세요."
        />

        <div className="safety-grid">
          <article className="safety-card">
            <div className="safety-card__icon">🛡️</div>
            <h3 className="safety-card__title">서버 걱정 0</h3>
            <p className="safety-card__concern">"내가 서버를 직접 관리해야 하나?"</p>
            <p className="safety-card__solution">→ Lease Bot 운영팀이 모든 인프라(Mac mini 클러스터·백업·보안)를 책임집니다. 고객은 텔레그램만 쓰면 됩니다.</p>
          </article>

          <article className="safety-card">
            <div className="safety-card__icon">🔒</div>
            <h3 className="safety-card__title">통제된 행동 범위</h3>
            <p className="safety-card__concern">"봇이 마음대로 잘못된 일을 하면 어쩌지?"</p>
            <p className="safety-card__solution">→ 사전 정의된 안전 범위 내에서만 작동. 중요 작업은 사전 확인 단계, 모든 행동 로그 기록, 비정상 동작 자동 차단.</p>
          </article>

          <article className="safety-card safety-card--featured">
            <div className="safety-card__icon">⚡</div>
            <h3 className="safety-card__title">체험 → 실전, 같은 환경</h3>
            <p className="safety-card__concern">"체험만 가능하고 실제론 못 쓰는 거 아닌가?"</p>
            <p className="safety-card__solution">→ 테스트 환경과 운영 환경이 동일. 체험 중 좋다고 느낀 흐름을 그대로 정식 도입 후 사용. <strong>체험 = 실전</strong>.</p>
          </article>

          <article className="safety-card">
            <div className="safety-card__icon">📊</div>
            <h3 className="safety-card__title">투명한 사용량·비용</h3>
            <p className="safety-card__concern">"AI 비용이 갑자기 폭증하면?"</p>
            <p className="safety-card__solution">→ 정액 구독(주 ₩77,000 / 월 ₩220,000). 월 8,000건 한도 도달 시 <strong>Sonnet → Haiku 자동 전환</strong>으로 끊김 없이 사용. 추가 비용 없이 예측 가능한 정액제.</p>
          </article>

          <article className="safety-card">
            <div className="safety-card__icon">👥</div>
            <h3 className="safety-card__title">3자 모니터링 (옵션)</h3>
            <p className="safety-card__concern">"봇이 잘 돌아가는지 누가 봐?"</p>
            <p className="safety-card__solution">→ 고객 + 봇 + 운영팀이 함께하는 텔레그램 그룹. 봇 동작을 실시간 감독, 필요 시 운영팀이 즉시 개입.</p>
          </article>

          <article className="safety-card">
            <div className="safety-card__icon">🚪</div>
            <h3 className="safety-card__title">언제든 그만두기</h3>
            <p className="safety-card__concern">"잘 안 맞으면 어떻게 해지하지?"</p>
            <p className="safety-card__solution">→ 위약금 없음. 데이터 즉시 삭제 가능. 부담 없이 시작, 부담 없이 종료.</p>
          </article>
        </div>

        <div className="safety-foot">
          <p className="safety-foot__line"><strong>Lease Bot</strong> = 검증된 환경에서 AI 봇을 안전하게 시작하세요.</p>
          <a href="#" onClick={(e) => { e.preventDefault(); document.querySelector('.chat-fab')?.click(); }} className="btn btn--primary btn--lg">먼저 봇에게 질문해 보기 →</a>
        </div>

        <div className="terms-notice">
          <h3 className="terms-notice__title">📌 이용 약관 — 반드시 확인해 주세요</h3>
          <ul className="terms-notice__list">
            <li><strong>서비스의 본질 (중개 서비스)</strong>: Lease Bot은 자체 AI 모델을 보유·운영하지 않으며, Anthropic(Claude)·OpenAI(GPT)·Google(Gemini) 등 외부 AI 회사의 공식 API를 <strong>중개·재판매</strong>하는 역할만 수행합니다. 모든 AI 응답은 해당 AI 제공사의 서비스에 의해 생성됩니다.</li>
            <li><strong>일시적 체험 목적 명시</strong>: 본 사이트와 채팅 위젯은 Lease Bot 서비스 안내와 <strong>일시적 체험을 위한 장소</strong>이며, 영구적·전문적·실무적 사용을 보장하지 않습니다. 실제 업무 적용은 정식 도입 후 별도 환경에서 진행됩니다.</li>
            <li><strong>봇 동작에 대한 책임 면책</strong>: Lease Bot은 중개 사업자로서, 봇이 생성하는 모든 답변·판단·자동 동작·결과물에 대해 <strong>법적 책임을 지지 않습니다</strong>. AI 응답의 정확성·적법성·적합성·완전성은 보장되지 않으며, 모든 결과는 외부 AI 제공사의 모델 특성에 따른 것입니다.</li>
            <li><strong>고객 주의 의무</strong>: AI 봇은 사람과 다른 판단을 내릴 수 있습니다. 중요한 의사결정·법률 자문·금융·의료 판단은 <strong>반드시 사람이 최종 검토</strong>하셔야 하며, 그에 따른 모든 결과 책임은 고객에게 있습니다.</li>
            <li><strong>개인정보 입력 금지</strong>: 봇에게 주민번호·계좌번호·비밀번호·여권번호 등 민감 개인정보를 절대 입력하지 마세요. 일반 정보(가격 문의 등)만 사용해 주세요.</li>
            <li><strong>고객 정보 입력 시 책임</strong>: 고객이 봇에게 개인정보·민감정보를 입력하여 발생하는 문제(유출·오용 등)에 대해 Lease Bot은 책임지지 않습니다. 봇과의 대화는 외부 AI 제공사의 인프라를 거쳐 처리될 수 있습니다.</li>
            <li><strong>봇 이상 행동에 따른 분쟁</strong>: 봇의 자동 동작으로 인한 손해·분쟁은 외부 AI 제공사의 서비스 특성에 의한 것으로, Lease Bot은 중개 사업자의 의무 외 별도 책임을 지지 않습니다. 분쟁 발생 시 양측이 합리적 협의로 해결하며 합의 불성립 시 관할 법원의 판단에 따릅니다.</li>
            <li><strong>책임 한도</strong>: 어떠한 경우에도 Lease Bot의 손해배상 한도는 고객이 직전 1개월간 결제한 금액을 초과하지 않습니다.</li>
            <li>전체 약관: <a href="/terms" style={{color:'#A33344',fontWeight:700}}>이용약관 →</a> · <a href="/privacy" style={{color:'#A33344',fontWeight:700}}>개인정보처리방침 →</a></li>
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ------------------------- 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>
  );
}

/* ------------------------- Cloud Automation (자동화 도구도 우리가 세팅) ------------------------- */
function CloudAutomationSection() {
  const tools = [
    { name: "n8n",     desc: "워크플로우 자동화 (가장 인기)", icon: "🔗" },
    { name: "Make",    desc: "노코드 자동화 (Zapier 대안)",   icon: "🧩" },
    { name: "Zapier",  desc: "5,000+ 앱 연동 자동화",         icon: "⚡" },
    { name: "Apify",   desc: "웹 스크래핑·크롤링 자동화",      icon: "🕷️" },
    { name: "Airtable",desc: "데이터베이스·자동화 통합",        icon: "🗂️" },
    { name: "Notion API", desc: "노션 자동 입력·정리",         icon: "📝" },
  ];

  return (
    <section className="section section--white" id="cloud-automation">
      <div className="container">
        <SectionHead
          eyebrow="설치·운영도 우리가"
          title="🛠️ 자동화 도구도 우리가 다 세팅합니다"
          sub="고객 컴퓨터에 아무것도 설치하지 않습니다. n8n·Zapier·Make 등 모든 자동화 도구를 우리가 클라우드에 설치하고, 고객은 받은 URL로 브라우저에서 바로 사용합니다."
        />

        <div className="cloud-analogy">
          <div className="cloud-analogy__icon">🏢</div>
          <div className="cloud-analogy__body">
            <h3 className="cloud-analogy__title">임대 사무실처럼 생각해 주세요</h3>
            <p className="cloud-analogy__text">
              사무실 새로 만들 때 — 인테리어, 책상, 인터넷, 전기 직접 다 하시나요? 보통은 <strong>"전부 준비된 사무실"</strong>에 입주하시죠.
              Lease Bot도 똑같습니다. 자동화 도구·서버·세팅·관리 — 전부 우리가 합니다. 고객은 <strong>URL과 비밀번호만 받아서 사용</strong>하시면 됩니다.
            </p>
          </div>
        </div>

        <div className="cloud-flow">
          <h3 className="cloud-flow__title">📋 작동 흐름 (5분 안에 사용 시작)</h3>
          <div className="cloud-flow__steps">
            <div className="cloud-flow__step">
              <div className="cloud-flow__num">1</div>
              <div className="cloud-flow__content">
                <h4>고객: 도입 결제</h4>
                <p>홈페이지에서 플랜 선택, 결제. 그게 끝.</p>
              </div>
            </div>
            <div className="cloud-flow__arrow">↓</div>
            <div className="cloud-flow__step">
              <div className="cloud-flow__num">2</div>
              <div className="cloud-flow__content">
                <h4>Lease Bot: 자동 세팅 (약 5분)</h4>
                <p>클라우드 서버에 자동화 도구가 자동으로 설치·설정됩니다. 사람 손길 0회.</p>
              </div>
            </div>
            <div className="cloud-flow__arrow">↓</div>
            <div className="cloud-flow__step">
              <div className="cloud-flow__num">3</div>
              <div className="cloud-flow__content">
                <h4>고객: 텔레그램으로 URL 받음</h4>
                <p>예: "n8n.leasebot.cloud/yourcompany — 비밀번호: ABC123" 브라우저에서 바로 접속.</p>
              </div>
            </div>
          </div>
        </div>

        <div className="cloud-compare">
          <h3 className="cloud-compare__title">📊 직접 설치 vs Lease Bot 클라우드</h3>
          <div className="cloud-compare__table">
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th>직접 설치 (혼자 하면)</th>
                  <th>Lease Bot 클라우드 ⭐</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><strong>준비 시간</strong></td>
                  <td>2~3일 (서버·도메인·설치 학습)</td>
                  <td><strong>5분</strong></td>
                </tr>
                <tr>
                  <td><strong>필요 지식</strong></td>
                  <td>리눅스·도커·네트워크</td>
                  <td><strong>없음</strong> (브라우저만)</td>
                </tr>
                <tr>
                  <td><strong>고객 컴퓨터</strong></td>
                  <td>설치·관리 부담</td>
                  <td><strong>건드릴 일 없음</strong></td>
                </tr>
                <tr>
                  <td><strong>24시간 가동</strong></td>
                  <td>컴퓨터 켜둬야 함</td>
                  <td><strong>자동 (클라우드)</strong></td>
                </tr>
                <tr>
                  <td><strong>업데이트</strong></td>
                  <td>본인이 직접</td>
                  <td><strong>자동</strong></td>
                </tr>
                <tr>
                  <td><strong>장애 대응</strong></td>
                  <td>본인이 직접</td>
                  <td><strong>자동 복구</strong></td>
                </tr>
                <tr>
                  <td><strong>비용</strong></td>
                  <td>서버 + 시간 + 학습비</td>
                  <td><strong>월 정액 (예측 가능)</strong></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="cloud-tools">
          <h3 className="cloud-tools__title">🔧 자동 세팅 가능한 도구들</h3>
          <p className="cloud-tools__sub">아래 도구들은 모두 Lease Bot이 직접 클라우드에 설치·설정합니다. 고객이 이름만 알아도 됩니다.</p>
          <div className="cloud-tools__grid">
            {tools.map((t, i) => (
              <div key={i} className="cloud-tool">
                <span className="cloud-tool__icon">{t.icon}</span>
                <div className="cloud-tool__body">
                  <h4>{t.name}</h4>
                  <p>{t.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="cloud-faq">
          <h3 className="cloud-faq__title">❓ 자주 묻는 질문</h3>
          <div className="cloud-faq__item">
            <h4>Q. "내 데이터가 외부 서버에 있어도 안전한가요?"</h4>
            <p>업계 표준 보안 (HTTPS 암호화, 접근 권한 관리)이 적용된 클라우드 서버를 사용합니다. 직접 운영하시는 것보다 보안 사고 위험이 낮은 경우가 많습니다 (전문 보안팀이 관리).</p>
          </div>
          <div className="cloud-faq__item">
            <h4>Q. "회사 내부망에서만 써야 하는데요?"</h4>
            <p>가능합니다. 별도 컨설팅(₩50~100만 별도)으로 회사 서버에 직접 설치 가능. 단, 표준 플랜은 클라우드 기반입니다.</p>
          </div>
          <div className="cloud-faq__item">
            <h4>Q. "해지하면 데이터는 어떻게 되나요?"</h4>
            <p>해지 시 데이터를 압축 파일로 보내드립니다. 고객 요청 시 30일 후 완전 삭제. 또는 본인이 백업 받아두실 수도 있습니다.</p>
          </div>
          <div className="cloud-faq__item">
            <h4>Q. "다른 클라우드(AWS·Azure)로 옮길 수 있나요?"</h4>
            <p>n8n 등 사용 도구가 표준 오픈소스이므로 데이터·워크플로우 모두 다른 곳으로 이전 가능합니다. 락인(lock-in) 없음.</p>
          </div>
        </div>

      </div>
    </section>
  );
}

/* ------------------------- Tool Details (도구별 작업 방식) ------------------------- */
function ToolDetailsSection() {
  const tools = [
    {
      icon: "🔗",
      name: "n8n",
      tagline: "오픈소스 워크플로우 자동화 (가장 인기)",
      whatIs: "여러 앱·서비스를 연결해 자동 흐름을 만드는 도구. 예: '카카오톡 문의 오면 → 노션에 자동 입력 → 담당자에 텔레그램 알림'",
      botDoes: [
        "클라우드 서버에 n8n 자동 설치 (5분)",
        "전용 도메인 + SSL 자동 발급 (예: yourcompany.leasebot.cloud)",
        "고객 요청에 맞는 워크플로우 직접 제작",
        "외부 앱 연결 (Gmail, Notion, Slack, 카톡 등) — OAuth 자동 처리",
        "실행 모니터링 + 에러 발생 시 자동 알림 + 자동 복구",
        "월 1회 정기 점검 + 새 기능 업데이트",
      ],
      customerDoes: [
        "도입 결제",
        "원하는 자동화 내용 텔레그램으로 설명 (예: '인스타 DM 오면 자동 답변')",
        "외부 앱 OAuth 1회 승인 (구글·카톡 등 로그인)",
      ],
      cost: "월 ₩220,000 (Lease Bot 플랜에 포함) · 별도 라이선스 비용 없음",
      goodFor: "복잡한 자동화 (3개 이상 앱 연결), 데이터 정제, 사용자 정의 로직",
    },
    {
      icon: "🧩",
      name: "Make.com (구 Integromat)",
      tagline: "노코드 자동화 SaaS · 시각적 워크플로우 빌더",
      whatIs: "마우스로 드래그하며 자동화 흐름을 설계하는 SaaS. n8n과 비슷하지만 우리가 설치 안 하고 Make.com 회사가 운영. 5,000+ 앱 즉시 연동 가능.",
      botDoes: [
        "Make.com 계정 생성·관리 (고객 명의)",
        "고객 요구사항을 시나리오(Scenario)로 직접 설계",
        "필요한 모든 앱 연결 (Gmail, Sheets, Stripe, HubSpot 등)",
        "에러 핸들링·재시도 로직 자동 구성",
        "사용량(Operations) 모니터링 + 한도 초과 자동 경고",
        "시나리오 백업·버전 관리",
        "월간 리포트 (자동 처리 건수·절약 시간)",
      ],
      customerDoes: [
        "도입 결제",
        "원하는 자동화 시나리오 텔레그램으로 설명",
        "외부 앱 OAuth 1회 승인",
        "Make.com 구독료 별도 결제 ($9~$29/월) — 또는 Lease Bot 통합 청구",
      ],
      cost: "Make.com Core $9/월 (10K 작업) ~ Pro $16/월 + Lease Bot 운영비",
      goodFor: "직접 시나리오 보고 싶을 때, 비개발자도 이해하기 쉬운 시각적 흐름 필요 시",
    },
    {
      icon: "⚡",
      name: "Zapier",
      tagline: "5,000+ 앱 연동의 표준 자동화 SaaS",
      whatIs: "전 세계 가장 많이 쓰는 자동화 SaaS. 'A 앱에서 B 일이 일어나면 → C 앱에서 D 실행' 형태의 단순 자동화에 강함.",
      botDoes: [
        "Zapier 계정 생성 + Zap(자동화 흐름) 직접 제작",
        "고객 앱 연결·인증 OAuth 자동 처리",
        "다단계 Zap (Multi-step) 설계",
        "필터·포맷 변환·조건 분기 설정",
        "월간 사용량 모니터링 + 비용 최적화 (한도 초과 방지)",
      ],
      customerDoes: [
        "도입 결제",
        "원하는 자동화 흐름 설명",
        "외부 앱 OAuth 승인",
        "Zapier 구독료 별도 결제 ($19.99~/월) — 또는 Lease Bot 통합",
      ],
      cost: "Zapier Starter $19.99/월 (750 tasks) ~ Professional $49/월 + Lease Bot 운영비",
      goodFor: "한국 외 글로벌 SaaS 통합, 단순 1:1 트리거 자동화",
    },
    {
      icon: "🤖",
      name: "Anthropic Claude / OpenAI GPT API",
      tagline: "AI 모델 직접 연결 (커스텀 봇·문서 처리)",
      whatIs: "AI 모델을 텔레그램 봇·웹사이트·자동화 흐름에 직접 연결. 단순 챗봇부터 문서 자동 분류, 요약, 번역, 코드 생성까지.",
      botDoes: [
        "Anthropic·OpenAI 계정·API 키 관리",
        "사용량 모니터링 + 한도 자동 관리 (Sonnet → Haiku 자동 전환)",
        "프롬프트 엔지니어링 (고객 업무에 맞는 시스템 프롬프트 설계)",
        "텔레그램·웹사이트·n8n과 연결",
        "비용 최적화 (모델 라우팅, 캐싱)",
      ],
      customerDoes: [
        "도입 결제",
        "원하는 AI 응답 스타일 설명 (예: '친절한 어조, 3문장 이내')",
        "비공개 정보·문서 제공 (선택, OAuth 또는 업로드)",
      ],
      cost: "Lease Bot 플랜에 포함 (월 8,000 질문 한도까지)",
      goodFor: "고객 응대 자동화, 내부 문서 검색, 자동 번역·요약",
    },
  ];

  return (
    <section className="section section--soft" id="tool-details">
      <div className="container">
        <SectionHead
          eyebrow="도구별 작업 방식"
          title="📦 어떤 도구를 어떻게 세팅해드리나요?"
          sub="각 자동화 도구별로 — 우리 봇이 직접 해드리는 일과 고객님이 제공해주실 일을 명확히 구분해서 안내드립니다."
        />

        <div className="tool-cards">
          {tools.map((t, i) => (
            <article key={i} className="tool-card">
              <div className="tool-card__head">
                <span className="tool-card__icon">{t.icon}</span>
                <div>
                  <h3 className="tool-card__name">{t.name}</h3>
                  <p className="tool-card__tagline">{t.tagline}</p>
                </div>
              </div>

              <div className="tool-card__what">
                <strong>이건 뭐예요?</strong>
                <p>{t.whatIs}</p>
              </div>

              <div className="tool-card__split">
                <div className="tool-card__col tool-card__col--bot">
                  <h4>🤝 Lease Bot이 해드리는 일</h4>
                  <ul>
                    {t.botDoes.map((d, j) => <li key={j}>{d}</li>)}
                  </ul>
                </div>
                <div className="tool-card__col tool-card__col--customer">
                  <h4>👤 고객이 제공해주실 것</h4>
                  <ul>
                    {t.customerDoes.map((d, j) => <li key={j}>{d}</li>)}
                  </ul>
                </div>
              </div>

              <div className="tool-card__foot">
                <div className="tool-card__cost"><strong>💰 비용:</strong> {t.cost}</div>
                <div className="tool-card__good"><strong>👍 추천 용도:</strong> {t.goodFor}</div>
              </div>
            </article>
          ))}
        </div>

        <div className="tool-note">
          <strong>💡 어느 도구를 선택할까요?</strong>
          <p>고민하지 마세요. 도입 상담 시 <strong>고객님 업무 내용을 듣고 가장 맞는 도구를 우리가 추천</strong>해드립니다. 도구가 바뀌어도 가격·서비스 동일.</p>
        </div>
      </div>
    </section>
  );
}

/* ------------------------- Limitations (할 수 없는 일) ------------------------- */
function LimitationsSection() {
  const groups = [
    {
      icon: "🚫",
      title: "다른 AI 서비스 직접 접속 불가",
      items: [
        "ChatGPT.com·gemini.google.com·Claude.ai 등 외부 AI 사이트에 대신 로그인해서 질문 X",
        "고객의 ChatGPT Plus·Gemini Advanced 계정 사용 X (각자 별도 결제)",
        "다른 AI 채팅 결과를 자동으로 가져오기 X",
      ],
    },
    {
      icon: "🔐",
      title: "본인 인증·로그인 필요한 사이트 접속 불가",
      items: [
        "은행·증권·정부24·국세청 홈택스 자동 접속 X",
        "회사 내부 시스템·인트라넷 자동 로그인 X",
        "휴대폰 본인인증·OTP·CAPTCHA 자동 통과 X",
      ],
    },
    {
      icon: "💸",
      title: "직접 금전 거래·결제 실행 불가",
      items: [
        "계좌이체·카드결제 직접 실행 X (안내·링크 제공만)",
        "주식·코인 자동 매매 X",
        "고객 카드로 외부 서비스 자동 결제 X",
      ],
    },
    {
      icon: "🖥️",
      title: "물리적·시스템 직접 조작 불가",
      items: [
        "고객 컴퓨터·휴대폰 직접 마우스·키보드 조작 X",
        "프린터·스캐너·하드웨어 직접 제어 X",
        "전화로 사람과 실시간 음성 통화 X",
      ],
    },
    {
      icon: "📞",
      title: "법적·전문적 책임이 따르는 결정 불가",
      items: [
        "법률 자문·소송 대리·계약 체결 X",
        "의료 진단·처방·치료 결정 X",
        "세무 신고서 직접 제출·세무 대리 X (초안·정리만)",
        "투자 자문·금융 상품 직접 판매 X",
      ],
    },
    {
      icon: "📤",
      title: "고객 동의 없는 외부 발송 불가",
      items: [
        "고객 동의 없이 이메일·SMS·SNS 자동 발송 X",
        "고객 연락처 무단 수집·제3자 공유 X",
        "타인 사칭·스팸 발송 X",
      ],
    },
    {
      icon: "🎨",
      title: "민감·불법 콘텐츠 생성 불가",
      items: [
        "딥페이크·얼굴 합성·신원 조작 X",
        "저작권 침해 콘텐츠 무단 복제·재배포 X",
        "성인·폭력·혐오·차별 콘텐츠 생성 X (외부 AI 정책상 차단)",
        "허위 정보·가짜 뉴스 의도적 생성 X",
      ],
    },
    {
      icon: "⚙️",
      title: "기술적 한계",
      items: [
        "100% 정확성 보장 X (AI는 환각·오류 발생 가능)",
        "실시간 검색 결과 보장 X (모델 학습 시점 제한)",
        "초대형 파일·동영상 실시간 처리 X",
        "외부 AI 제공사 장애 시 일시 중단 가능",
      ],
    },
  ];

  return (
    <section className="section section--soft" id="limitations">
      <div className="container">
        <SectionHead
          eyebrow="한계 명시 · 정직한 안내"
          title="🚫 봇이 할 수 없는 일"
          sub="허위 약속 없이 솔직하게 안내드립니다. Lease Bot은 외부 AI(Anthropic·OpenAI·Google) 중개 서비스로, 다음 작업은 구조적·정책적으로 불가능합니다."
        />
        <div className="limit-grid">
          {groups.map((g, i) => (
            <article key={i} className="limit-card">
              <div className="limit-card__head">
                <span className="limit-card__icon">{g.icon}</span>
                <h3 className="limit-card__title">{g.title}</h3>
              </div>
              <ul className="limit-card__list">
                {g.items.map((it, j) => (
                  <li key={j}>{it}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
        <div className="limit-note">
          <strong>💡 그럼 무엇을 도와줄 수 있나요?</strong>
          <p>위와 같은 작업은 못하지만, 텍스트 기반 질문·답변·정리·번역·초안 작성·자동화 가이드 등은 매우 잘 합니다. <a href="#abilities">할 수 있는 일 →</a> 또는 <a href="#use-cases">활용 사례 →</a> 참고.</p>
        </div>

        <div className="limit-redirect">
          <div className="limit-redirect__icon">🤖</div>
          <div className="limit-redirect__body">
            <h3 className="limit-redirect__title">단순 질문·답변만 필요하시다면 — Lease Bot 대신 다른 AI를 추천합니다</h3>
            <p className="limit-redirect__desc">
              "그냥 궁금한 걸 물어보고 답을 얻는" 용도라면 무료~월 2~3만원으로 직접 사용 가능한 AI 챗봇이 더 경제적입니다.
            </p>
            <ul className="limit-redirect__list">
              <li><strong>ChatGPT</strong> (chat.openai.com) — 무료 / Plus $20/월</li>
              <li><strong>Claude</strong> (claude.ai) — 무료 / Pro $20/월</li>
              <li><strong>Gemini</strong> (gemini.google.com) — 무료 / Advanced ₩29,000/월</li>
              <li><strong>네이버 큐(CUE:)</strong>, <strong>뤼튼</strong> — 한국어 특화 무료</li>
            </ul>
            <p className="limit-redirect__pitch">
              <strong>Lease Bot은 단순 챗봇이 아닙니다.</strong> 봇 세팅·텔레그램 통합·운영 관리·자동 모델 전환·사용량 한도 자동화·CS 응대까지 — <strong>"AI를 업무에 적용해야 하는데 직접 세팅·관리할 시간/지식이 없는 분"</strong>께 적합합니다. 직접 ChatGPT를 쓸 수 있다면 그게 더 좋은 선택일 수 있습니다.
            </p>
          </div>
        </div>
      </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주(5일 보장 서비스), 부가세 포함</span>
            </div>
            <ul className="price-card__list">
              <li><CheckIcon/> <strong>7일 사용 · 5일 보장 + 2일 정비 버퍼</strong></li>
              <li><CheckIcon/> 정비일에도 문제 없으면 계속 사용 가능</li>
              <li><CheckIcon/> <strong>주 2,000건 자동 전환 (Sonnet 750 + Haiku 1,250)</strong></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">/ 월(20일 보장 서비스), 부가세 포함</span>
            </div>
            <ul className="price-card__list">
              <li><CheckIcon/> <strong>한 달 사용 · 20일 보장 + 10일 정비 버퍼</strong></li>
              <li><CheckIcon/> 정비일에도 문제 없으면 계속 사용 가능</li>
              <li><CheckIcon/> <strong>월 8,000건 (1일 약 270건) · 자동 모델 전환</strong></li>
              <li><CheckIcon/> 1단계 Sonnet 4.6 풀 품질 (월 3,000건)</li>
              <li><CheckIcon/> 2단계 Haiku 4.5 자동 전환 (추가 5,000건)</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: "어떤 AI 모델을 사용하나요? 한도 초과되면 멈추나요?", a: "월 구독형(₩220,000) 기준 — 1단계로 Anthropic Sonnet 4.6(월 3,000건, 1일 약 100건)을 풀 품질로 사용하며, 한도 도달 시 자동으로 Haiku 4.5로 전환되어 추가 5,000건(누적 8,000건, 1일 약 270건)을 끊김 없이 사용할 수 있습니다. 8,000건도 초과 시 응답 지연 안내 + 추가팩(별도 안내) 또는 다음달 1일 자동 리셋입니다. 1주 체험형은 비례 적용(Sonnet 750 + Haiku 1,250 = 2,000건/주)." },
    { q: "추가팩은 얼마인가요?", a: "표준 추가팩은 ₩30,000으로 Sonnet 1,000건 또는 Haiku 5,000건을 즉시 충전할 수 있습니다(월 한도와 별개). 자세한 사항은 도입 상담에서 안내드립니다." },
    { q: "결제 방법은 무엇이 가능한가요?", a: "토스페이먼츠를 통해 ① 💳 신용/체크카드 (즉시 결제), ② 🏦 가상계좌 (입금 확인 후 봇 활성화 — 사업자 거래·세금계산서 발행 적합), ③ ↔️ 실시간 계좌이체, ④ 💛 카카오페이, ⑤ 💚 네이버페이, ⑥ 💙 토스페이를 지원합니다. 월 구독은 신용카드 자동 결제 권장 (가상계좌는 매월 수동 입금 필요)." },
    { q: "세금계산서 발행되나요?", a: "네, 모든 결제에 대해 사업자 정보 기재 시 토스페이먼츠를 통해 자동 세금계산서가 발행됩니다. 가상계좌·계좌이체 결제 시 더 편리합니다." },
    { q: "사이트에서 봇에게 직접 질문할 수 있나요?", a: "네, 우측 하단 채팅 버튼을 통해 Lease Bot에게 직접 질문하실 수 있습니다. 무료로 사용 가능하며 매주 자동 갱신됩니다. 가격·기능·도입 절차 등 Lease Bot 서비스에 대한 질문에 답변해드립니다. 실제 업무 자동화(사이트 제작·문서 작성 등)는 정식 도입 후 전용 봇으로 진행됩니다." },
    { 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>
  );
}

/* ------------------------- Telegram Download Guide ------------------------- */
function TelegramDownloadSection() {
  return (
    <section className="section section--soft" id="telegram-download">
      <div className="container">
        <SectionHead
          eyebrow="텔레그램 설치·사용 가이드"
          title={<>텔레그램이 처음이세요?<br/><span style={{color:"var(--c-primary)"}}>1분 설치 + 5분 사용법 마스터.</span></>}
          sub="Lease Bot의 모든 문의·서비스는 텔레그램으로 진행됩니다. 카카오톡과 사용법이 거의 같아 누구나 쉽게 사용할 수 있습니다."
        />

        {/* 4개 플랫폼 다운로드 */}
        <h3 className="tg-dl-section-title">📥 1단계: 본인 기기에 맞는 텔레그램 설치</h3>
        <div className="tg-dl-grid">
          <a className="tg-dl-card" href="https://apps.apple.com/app/telegram-messenger/id686449807" target="_blank" rel="noopener">
            <div className="tg-dl-card__icon">📱</div>
            <h3 className="tg-dl-card__title">iPhone / iPad</h3>
            <p className="tg-dl-card__sub">App Store</p>
            <span className="tg-dl-card__cta">설치하기 →</span>
          </a>
          <a className="tg-dl-card" href="https://play.google.com/store/apps/details?id=org.telegram.messenger" target="_blank" rel="noopener">
            <div className="tg-dl-card__icon">📱</div>
            <h3 className="tg-dl-card__title">Android</h3>
            <p className="tg-dl-card__sub">Play Store</p>
            <span className="tg-dl-card__cta">설치하기 →</span>
          </a>
          <a className="tg-dl-card" href="https://desktop.telegram.org/" target="_blank" rel="noopener">
            <div className="tg-dl-card__icon">💻</div>
            <h3 className="tg-dl-card__title">Mac / Windows</h3>
            <p className="tg-dl-card__sub">Desktop 앱</p>
            <span className="tg-dl-card__cta">다운로드 →</span>
          </a>
          <a className="tg-dl-card" href="https://web.telegram.org/" target="_blank" rel="noopener">
            <div className="tg-dl-card__icon">🌐</div>
            <h3 className="tg-dl-card__title">웹 브라우저</h3>
            <p className="tg-dl-card__sub">설치 없이 사용</p>
            <span className="tg-dl-card__cta">바로 사용 →</span>
          </a>
        </div>

        {/* 가입·계정 설정 단계 */}
        <h3 className="tg-dl-section-title" style={{marginTop:"40px"}}>🔐 2단계: 가입·계정 설정 (1분)</h3>
        <div className="tg-dl-steps">
          <ol className="tg-dl-steps__list">
            <li><strong>① 앱 실행</strong> → "Start Messaging" 또는 "메시지 시작" 버튼 클릭</li>
            <li><strong>② 전화번호 입력</strong> → 국가: 대한민국 (+82) 선택 → 휴대폰 번호 입력 (예: 010-1234-5678)</li>
            <li><strong>③ SMS 인증 코드</strong> 입력 → 휴대폰으로 받은 5자리 숫자 입력</li>
            <li><strong>④ 이름·프로필 사진</strong> 설정 → First Name (이름)·Last Name (성, 선택)·프로필 사진 (선택)</li>
            <li><strong>⑤ 한국어 설정</strong> → Settings(설정) → Language → 한국어 선택</li>
          </ol>
        </div>

        {/* Lease Bot 시작 단계 */}
        <h3 className="tg-dl-section-title" style={{marginTop:"40px"}}>🤖 3단계: Lease Bot과 대화 시작 (30초)</h3>
        <div className="tg-dl-steps">
          <ol className="tg-dl-steps__list">
            <li><strong>① 텔레그램 상단 검색창</strong> 클릭 (돋보기 모양 🔍)</li>
            <li><strong>② "@leasebot_official"</strong> 입력 → 검색 결과에서 Lease Bot 클릭</li>
            <li><strong>③ "/start"</strong> 입력 또는 "시작하기" 버튼 클릭 → 봇과 대화 시작</li>
            <li><strong>④ 원하는 업무 요청</strong> → 자연스러운 한국어로 메시지 입력 (예: "오늘 일정 정리해줘", "고객 응대 초안 작성")</li>
            <li><strong>⑤ 봇 응답·작업 결과 확인</strong> → 평균 2~3초 내 응답</li>
          </ol>
        </div>

        {/* 자주 묻는 질문 */}
        <h3 className="tg-dl-section-title" style={{marginTop:"40px"}}>❓ 자주 묻는 질문</h3>
        <div className="tg-dl-faq">
          <details>
            <summary>📌 텔레그램이 카카오톡과 다른 점은?</summary>
            <p>둘 다 무료 메신저이며 사용법은 거의 같습니다 (메시지·사진·파일 전송, 그룹방, 음성통화 등). 텔레그램은 글로벌 사용자가 많고 봇 기능이 강력해 Lease Bot 같은 비즈니스 자동화에 최적입니다. 카카오톡과 동시 사용해도 됩니다.</p>
          </details>
          <details>
            <summary>📌 텔레그램 사용이 안전한가요?</summary>
            <p>텔레그램은 종단간 암호화를 지원하는 글로벌 메신저로, 전 세계 7억 명 이상이 사용합니다. 한국에서도 정부·기업·전문가가 보안 메신저로 활용합니다. 비밀 채팅(Secret Chat)은 메시지 자동 삭제도 가능합니다.</p>
          </details>
          <details>
            <summary>📌 한국어 지원되나요?</summary>
            <p>네, 한국어 인터페이스를 완전히 지원합니다. 설치 후 Settings(설정) → Language → 한국어 선택. 메시지 입력·전송 모두 한국어로 가능합니다.</p>
          </details>
          <details>
            <summary>📌 데이터·메시지는 어떻게 보관되나요?</summary>
            <p>일반 채팅은 텔레그램 서버에 저장되어 여러 기기에서 동기화됩니다. Lease Bot과의 대화는 운영상 필요한 범위 내에서만 보관되며, 고객 요청 시 즉시 삭제됩니다. 자세한 안내는 도입 상담 시 드립니다.</p>
          </details>
          <details>
            <summary>📌 봇과 어떻게 대화하면 좋나요?</summary>
            <p>일상적인 한국어로 자연스럽게 요청하면 됩니다. 예시:<br/>
            • "고객 환불 문의 답변 초안 작성해줘"<br/>
            • "오늘 매출 알림 켜놔"<br/>
            • "이 PDF 한국어로 요약해줘"<br/>
            구체적으로 요청할수록 더 정확한 결과를 받습니다.</p>
          </details>
          <details>
            <summary>📌 음성·사진·파일도 보낼 수 있나요?</summary>
            <p>네. 텔레그램에서 사진·문서·음성 메시지·동영상 모두 전송 가능합니다. Lease Bot은 보낸 파일을 분석하거나 (예: 이미지 OCR, 문서 요약) 첨부 자료로 활용할 수 있습니다.</p>
          </details>
          <details>
            <summary>📌 알림이 너무 많이 오면 어떻게 하나요?</summary>
            <p>채팅방에서 상단의 알림 아이콘 → "음소거" 또는 "알림 끄기" 선택. Lease Bot에게 직접 "알림 시간 설정해줘" (예: 평일 9~18시만)라고 요청해도 봇이 자동으로 시간 외 알림 차단합니다.</p>
          </details>
        </div>

        {/* 시작 권유 박스 */}
        <div className="tg-dl-cta-box">
          <div className="tg-dl-cta-text">
            <strong>지금 바로 시작하기</strong>
            <p>설치는 1분, 사용법은 5분이면 충분합니다. 카카오톡 쓸 줄 안다면 텔레그램도 바로 쓸 수 있습니다.</p>
          </div>
          <a href="#" onClick={(e) => { e.preventDefault(); document.querySelector('.chat-fab')?.click(); }} className="btn btn--primary btn--lg">
            먼저 봇에게 질문해 보기 →
          </a>
        </div>
      </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 Telegram contact
      window.open("https://t.me/leasebot_official", "_blank");
      alert("폼 전송에 실패했습니다. 텔레그램으로 직접 문의 부탁드립니다.");
    } 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주 체험형 · 5일 보장 (₩77,000)</option>
                <option value="monthly">1개월 구독 · 20일 보장 (₩220,000)</option>
                <option value="undecided">아직 결정 못함</option>
              </select>
              <select name="payment" required defaultValue="" className="input">
                <option value="" disabled>결제 방법 선택 *</option>
                <option value="card">💳 신용/체크카드 (즉시 결제)</option>
                <option value="virtual">🏦 가상계좌 (입금 확인 후 시작)</option>
                <option value="transfer">↔️ 실시간 계좌이체</option>
                <option value="kakao">💛 카카오페이</option>
                <option value="naver">💚 네이버페이</option>
                <option value="toss">💙 토스페이</option>
              </select>
              <div aria-hidden="true" style={{position:"absolute",left:"-10000px",top:"auto",width:"1px",height:"1px",overflow:"hidden"}}>
                <input type="text" name="website" tabIndex={-1} autoComplete="off" defaultValue="" />
              </div>
              <textarea name="message" rows={3} placeholder="원하시는 업무·자동화 내용 (선택)" className="input" />
              <label style={{fontSize:"13px",color:"#64748B",display:"flex",gap:"8px",alignItems:"flex-start"}}>
                <input type="checkbox" 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="#" onClick={(e) => { e.preventDefault(); document.querySelector('.chat-fab')?.click(); }} className="btn btn--text">또는 Lease Bot에게 먼저 질문해 보기 →</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">
            모든 문의는 텔레그램으로:&nbsp;
            <a href="https://t.me/leasebot_official" target="_blank" rel="noopener">@leasebot_official</a>
          </p>
          <p className="footer__contact">
            이메일:&nbsp;<a href="mailto:help@leasebot.co.kr">help@leasebot.co.kr</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>
            <a href="/blog">전체 글 →</a>
            <a href="/blog/harness-engineering-intro">하네스 엔지니어링 입문</a>
            <a href="/blog/serverless-bot-hosting">CF Workers로 봇 운영</a>
            <a href="/blog/auto-model-switching">모델 자동 전환</a>
          </div>
          <div className="footer__col">
            <h4>회사</h4>
            <a href="#contact">도입 상담</a>
            <a href="/privacy">개인정보처리방침</a>
            <a href="/terms">이용약관</a>
          </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 className="container" style={{fontSize:"12.5px",lineHeight:1.7,color:"rgba(255,255,255,0.55)",paddingTop:"10px"}}>
          주식회사 리스봇 (Lease Bot Co., Ltd.) · 대표 이원중 · 사업자등록번호 638-87-03875<br/>
          서울특별시 중구 퇴계로 324, 3층(광희동2가, 성우빌딩) · 이메일 <a href="mailto:help@leasebot.co.kr" style={{color:"inherit"}}>help@leasebot.co.kr</a>
        </div>
      </div>
    </footer>
  );
}

/* ------------------------- Chat Widget (Lease Bot 질문 봇) ------------------------- */
function ChatWidget() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([
    { role: "assistant", content: "안녕하세요! Lease Bot 안내봇입니다.\n\n무료로 사용 가능하며 매주 자동 갱신됩니다. Lease Bot 서비스 (가격·기능·도입 절차·자동화 가능 업무 등)에 대해 무엇이든 물어보세요.\n\n※ 본 채팅은 일시적 체험용이며, 답변은 외부 AI 제공사(Anthropic 등)의 서비스로 생성됩니다. 응답에 대한 책임은 면책됩니다." }
  ]);
  const [input, setInput] = useState("");
  const [sending, setSending] = useState(false);
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, sending]);

  const send = async () => {
    const text = input.trim();
    if (!text || sending) return;
    const newMsgs = [...messages, { role: "user", content: text }];
    setMessages(newMsgs);
    setInput("");
    setSending(true);
    try {
      const res = await fetch("/api/chat", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ messages: newMsgs })
      });
      const data = await res.json();
      const reply = data.reply || "죄송합니다, 답변을 받지 못했습니다. 잠시 후 다시 시도해 주세요.";
      setMessages([...newMsgs, { role: "assistant", content: reply }]);
    } catch (e) {
      setMessages([...newMsgs, { role: "assistant", content: "네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요." }]);
    } finally {
      setSending(false);
    }
  };

  const onKey = (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      send();
    }
  };

  return (
    <>
      <button
        className="chat-fab"
        onClick={() => setOpen(!open)}
        aria-label={open ? "질문 닫기" : "봇에게 질문하기"}
      >
        {open ? (
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
            <path d="M6 6L18 18M18 6L6 18"/>
          </svg>
        ) : (
          <>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
            </svg>
            <span className="chat-fab__pulse" />
          </>
        )}
      </button>

      {open && (
        <div className="chat-panel" role="dialog" aria-label="Lease Bot에게 질문하기">
          <header className="chat-panel__head">
            <div className="chat-panel__avatar">
              <svg width="20" height="20" viewBox="0 0 28 28" fill="none">
                <rect x="1" y="1" width="26" height="26" rx="7" fill="white" opacity="0.2"/>
                <path d="M8 18.5l5-2 5 2-1-6.5L20 8l-6.5 1L7 8l1.5 4-0.5 6.5z" fill="white"/>
              </svg>
            </div>
            <div className="chat-panel__meta">
              <div className="chat-panel__name">Lease Bot에게 질문하기</div>
              <div className="chat-panel__status"><span className="dot dot--live"/> 온라인 · 평균 2초 응답</div>
            </div>
            <button className="chat-panel__close" onClick={() => setOpen(false)} aria-label="닫기">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M6 6L18 18M18 6L6 18"/>
              </svg>
            </button>
          </header>

          <div className="chat-panel__body" ref={bodyRef}>
            {messages.map((m, i) => (
              <div key={i} className={"chat-msg chat-msg--" + m.role}>
                <div className="chat-msg__bubble">
                  {String(m.content).split("\n").map((line, j) => (
                    <div key={j} className={line === "" ? "chat-msg__br" : ""}>{line || " "}</div>
                  ))}
                </div>
              </div>
            ))}
            {sending && (
              <div className="chat-msg chat-msg--assistant">
                <div className="chat-msg__bubble chat-msg__typing">
                  <span/><span/><span/>
                </div>
              </div>
            )}
          </div>

          <div className="chat-panel__suggestions">
            {["가격이 어떻게 돼요?", "어떤 업무를 자동화할 수 있나요?", "도입 절차 알려주세요"].map((s, i) => (
              <button key={i} className="chat-suggestion" onClick={() => { setInput(s); setTimeout(send, 50); }} disabled={sending}>{s}</button>
            ))}
          </div>

          <div className="chat-panel__input">
            <textarea
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={onKey}
              placeholder="Lease Bot에 대해 물어보세요…"
              rows={1}
              disabled={sending}
            />
            <button onClick={send} disabled={sending || !input.trim()} aria-label="전송">
              <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>
            </button>
          </div>

          <div className="chat-panel__foot">
            ⚠️ <strong>일시 체험용 · 외부 AI 중개</strong> · 개인정보 입력 금지 · 응답 책임 면책. <a href="#contact" onClick={() => setOpen(false)}>도입 상담 →</a>
          </div>
        </div>
      )}
    </>
  );
}

/* ------------------------- 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 />);