// Marketing site — content sections (marquee, stats, tools, about, pricing, CTA, footer).
const { useState } = React;
const { Button, Badge } = window.TheGangsaDesignSystem_223a82;

function Band() {
  return (
    <div style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "14px 0", background: "var(--bg-raised)" }}>
      <Marquee items={["KEYWORD", "PLACE", "REVIEW", "BLOG", "BRANDING", "GEO", "SEO", "AEO", "EDUCATION", "MATE", "더장사"]} />
    </div>
  );
}

function Stats() {
  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(56px,8vw,110px) clamp(18px,4vw,44px)" }}>
      <Reveal>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green-bright)" }}>By the numbers</span>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 28, marginTop: 28 }}>
        <Reveal delay={0}><Stat value={12} suffix="+" label="한 화면에 모은 마케팅 도구" accent /></Reveal>
        <Reveal delay={80}><Stat value={200} suffix="+" label="월 키워드 조회 · 비지니스" /></Reveal>
        <Reveal delay={160}><Stat value={5} label="동시 운영 매장 · 다매장" /></Reveal>
        <Reveal delay={240}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(40px,6vw,72px)", fontWeight: 800, lineHeight: 1, letterSpacing: "-0.03em", color: "var(--text-primary)" }}>₩9,900~</span>
            <span style={{ fontSize: 14, color: "var(--text-muted)", fontWeight: 500 }}>월 시작 가격 · 스탠다드</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const TOOLS = [
  { n: "01", icon: "search", title: "조회수 검색", desc: "키워드 여러개를 한 번에 조회하고 PC·모바일 검색량으로 장사 유불리를 판단합니다." },
  { n: "02", icon: "map-pin", title: "플레이스 검색", desc: "내 매장과 경쟁 매장의 플레이스 노출 순위를 한눈에 확인합니다." },
  { n: "03", icon: "crosshair", title: "대표키워드 판별", desc: "TOP10 노출 기준 발현율로 우리 매장의 대표키워드를 가립니다." },
  { n: "04", icon: "trending-up", title: "유입 분석", desc: "어떤 키워드가 실제 매장 유입을 만드는지 추적합니다." },
  { n: "05", icon: "key-round", title: "대표키워드", desc: "대표키워드 후보를 검증하고 관리합니다." },
  { n: "06", icon: "message-square", title: "GEO 리뷰", desc: "지역 기반 리뷰 초안을 만들고 등록 작업으로 바로 이어갑니다." },
  { n: "07", icon: "file-text", title: "블로그 분석", desc: "상위글 제목·본문 키워드를 분석하고 콘텐츠 가이드로 연결합니다." },
  { n: "08", icon: "users", title: "인기블로거", desc: "실제 노출 키워드 근거가 있는 섭외 후보를 빠르게 좁힙니다." },
  { n: "09", icon: "award", title: "블로그 등급", desc: "블로그 지수·등급을 진단합니다." },
  { n: "10", icon: "palette", title: "브랜딩 정리", desc: "브랜드 자료를 정리하고 비밀창고에 안전하게 보관합니다." },
  { n: "11", icon: "tag", title: "저가 유입 전략", desc: "70원 거미줄 등 저비용 유입 전략을 설계합니다." },
  { n: "12", icon: "stethoscope", title: "플레이스 진단", desc: "플레이스 노출 상태를 종합 진단합니다." },
];

function ToolCard({ t, i }) {
  const [h, setH] = useState(false);
  return (
    <Reveal delay={(i % 3) * 80}>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
        position: "relative", padding: "26px 24px 64px", height: "100%", boxSizing: "border-box",
        background: "var(--bg-surface)", border: `1px solid ${h ? "var(--green-line)" : "var(--line)"}`,
        borderRadius: "var(--r-lg)", boxShadow: h ? "var(--shadow-card)" : "var(--shadow-soft)",
        transform: h ? "translateY(-4px)" : "none", transition: `transform .3s ${EASE}, box-shadow .3s ${EASE}, border-color .2s ease`,
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ width: 46, height: 46, borderRadius: 12, background: h ? "var(--green)" : "var(--green-soft)", color: h ? "#fff" : "var(--green)", display: "flex", alignItems: "center", justifyContent: "center", transition: `all .3s ${EASE}` }}>
            <Icon name={t.icon} size={22} />
          </span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 700, color: "var(--text-soft)" }}>{t.n}</span>
        </div>
        <h3 style={{ margin: "20px 0 8px", fontSize: 21, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>{t.title}</h3>
        <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-muted)", wordBreak: "keep-all" }}>{t.desc}</p>
        <span style={{ position: "absolute", left: 24, bottom: 22, display: "inline-flex", alignItems: "center", gap: 7, color: "var(--green-bright)", fontSize: 13.5, fontWeight: 800 }}>
          자세히 <span style={{ transform: h ? "translateX(3px)" : "none", transition: `transform .3s ${EASE}` }}>→</span>
        </span>
      </div>
    </Reveal>
  );
}

function Tools() {
  return (
    <section id="tools" style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(40px,5vw,80px) clamp(18px,4vw,44px)" }}>
      <Reveal>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, flexWrap: "wrap", marginBottom: 36 }}>
          <div>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green-bright)" }}>Capability</span>
            <h2 style={{ margin: "14px 0 0", fontSize: "clamp(30px,4.4vw,56px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.05, color: "var(--text-primary)", wordBreak: "keep-all" }}>매장이 필요한 모든 도구,<br />한 화면에서.</h2>
          </div>
          <p style={{ margin: 0, maxWidth: 320, fontSize: 15, lineHeight: 1.6, color: "var(--text-muted)" }}>탐색은 원형 허브에서, 반복 작업은 바로가기 카드에서. 흩어진 마케팅 작업을 하나의 흐름으로 묶었습니다.</p>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: 18 }}>
        {TOOLS.map((t, i) => <ToolCard key={t.n} t={t} i={i} />)}
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" style={{ background: "var(--bg-raised)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "clamp(64px,9vw,130px) clamp(18px,4vw,44px)" }}>
        <Reveal>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green-bright)" }}>Who we are</span>
        </Reveal>
        <Reveal delay={80}>
          <p style={{ margin: "26px 0 0", fontSize: "clamp(24px,3.4vw,44px)", fontWeight: 700, lineHeight: 1.32, letterSpacing: "-0.02em", color: "var(--text-primary)", wordBreak: "keep-all", textWrap: "balance" }}>
            우리는 사장님이 <span style={{ color: "var(--green)" }}>지금 해야 할 한 수</span>를 매번 안내합니다. 복잡한 마케팅 이론 대신, 데이터로 판단하고 바로 실행하는 가장 쉬운 길을 만듭니다.
          </p>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ margin: "28px 0 0", maxWidth: 620, fontSize: 16, lineHeight: 1.7, color: "var(--text-muted)", wordBreak: "keep-all" }}>
            키워드 검색량부터 플레이스 순위, 리뷰, 블로그까지 — 흩어진 도구를 한 화면에 모아 매장의 매출이 오르는 흐름을 설계합니다.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function PricingTeaser({ onPricing }) {
  const tiers = [
    { name: "스탠다드", price: "₩9,900", meta: "1매장 자영업자" },
    { name: "비지니스", price: "₩24,900", meta: "5매장 다매장", hot: true },
    { name: "프로", price: "₩49,900", meta: "대행사 무제한" },
  ];
  return (
    <section id="pricing" style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(56px,8vw,110px) clamp(18px,4vw,44px)" }}>
      <Reveal>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green-bright)" }}>Pricing</span>
          <h2 style={{ margin: "14px 0 0", fontSize: "clamp(30px,4.4vw,56px)", fontWeight: 800, letterSpacing: "-0.03em", color: "var(--text-primary)" }}>매장 규모에 맞춰 시작하세요</h2>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 18, maxWidth: 880, margin: "0 auto" }}>
        {tiers.map((t, i) => (
          <Reveal key={t.name} delay={i * 80}>
            <div style={{ position: "relative", textAlign: "center", padding: "30px 22px", borderRadius: "var(--r-lg)", background: t.hot ? "var(--green-soft)" : "var(--bg-surface)", border: `1px solid ${t.hot ? "var(--green-line)" : "var(--line)"}`, boxShadow: "var(--shadow-soft)" }}>
              {t.hot && <span style={{ position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)" }}><Badge tone="positive">인기</Badge></span>}
              <div style={{ fontSize: 16, fontWeight: 800, color: "var(--text-primary)" }}>{t.name}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 3 }}>{t.meta}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 28, fontWeight: 800, color: "var(--text-primary)", margin: "14px 0 4px", letterSpacing: "-0.02em" }}>{t.price}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>/ 월</div>
            </div>
          </Reveal>
        ))}
      </div>
      <Reveal delay={260}>
        <div style={{ textAlign: "center", marginTop: 34 }}>
          <Button variant="outline" size="lg" onClick={onPricing} iconRight={<span>→</span>}>전체 요금제 보기</Button>
        </div>
      </Reveal>
    </section>
  );
}

function CTA({ onCta }) {
  return (
    <section style={{ background: "var(--green-deep)", color: "#fff" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(64px,10vw,150px) clamp(18px,4vw,44px)", textAlign: "center" }}>
        <Reveal>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--gold)" }}>Let's grow</span>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ margin: "20px 0 0", fontFamily: "var(--font-display)", fontSize: "clamp(40px,8vw,120px)", fontWeight: 800, lineHeight: 0.95, letterSpacing: "-0.04em" }}>
            GROW YOUR<br /><span style={{ color: "var(--gold)" }}>STORE.</span>
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ margin: "26px auto 0", maxWidth: 520, fontSize: 16.5, lineHeight: 1.6, color: "rgba(255,255,255,0.78)", wordBreak: "keep-all" }}>
            지금 무료로 시작하고, 오늘 바로 실행할 첫 작업을 받아보세요.
          </p>
        </Reveal>
        <Reveal delay={340}>
          <div style={{ marginTop: 34, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="gold" size="lg" onClick={onCta} iconRight={<span>→</span>}>무료로 시작하기</Button>
            <Button variant="outline" size="lg" onClick={onCta} style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>제작 문의하기</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--bg-app)", borderTop: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(40px,5vw,72px) clamp(18px,4vw,44px) 40px", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 32 }} className="site-footer-grid">
        <div>
          <Logo />
          <p style={{ margin: "16px 0 0", maxWidth: 300, fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)" }}>매장 마케팅을 한 화면에서 실행하는 사장님 전용 마케팅 허브.</p>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-soft)", marginBottom: 14 }}>Product</div>
          {["조회수 검색", "플레이스 순위", "GEO 리뷰", "요금제"].map((l) => (
            <a key={l} href="#" style={{ display: "flex", alignItems: "center", minHeight: 40, textDecoration: "none", color: "var(--text-secondary)", fontSize: 14, fontWeight: 500, padding: "10px 0" }}>{l}</a>
          ))}
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-soft)", marginBottom: 14 }}>Contact</div>
          {["eoehdlftla77@gmail.com", "평일 09–18시", "대구 남구"].map((l) => (
            <div key={l} style={{ color: "var(--text-secondary)", fontSize: 14, padding: "5px 0" }}>{l}</div>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 clamp(18px,4vw,44px) 6px", fontSize: 12, lineHeight: 1.7, color: "var(--text-muted)" }}>
        수상한마케팅 · 대표 전승기 · 사업자등록번호 546-01-04381 · 대구광역시 남구 중앙대로47길 22, 2층 306호(대명동, 아트빌)<br/>
        통신판매업 신고: 준비중 · 문의 eoehdlftla77@gmail.com · 결제대행 토스페이먼츠(주)
      </div>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "20px clamp(18px,4vw,44px)", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", fontSize: 12.5, color: "var(--text-muted)" }}>
        <span>© 2024–2026 THE GANGSA</span>
        <span style={{ fontFamily: "var(--font-mono)" }}>Brand the bold. 더장사.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Band, Stats, Tools, About, PricingTeaser, CTA, Footer });