// Marketing site — kinetic hero with a video showcase panel.
const { Button } = window.TheGangsaDesignSystem_223a82;

// Hero video panel. Drop a cover now; to publish a real video, replace the
// <image-slot> below with:
//   <video src="intro.mp4" controls playsInline poster="cover.jpg"
//          style={{width:"100%",height:"100%",objectFit:"cover"}} />
//   — or a YouTube embed:
//   <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowFullScreen
//           style={{width:"100%",height:"100%",border:0}} />
function HeroMedia() {
  return (
    <div style={{ position: "relative", width: "100%", aspectRatio: "16 / 9", borderRadius: "var(--r-xl)", overflow: "hidden", border: "1px solid var(--line)", boxShadow: "var(--shadow-card)", background: "var(--green-deep)" }}>
      <image-slot id="tg-hero-video" shape="rect" placeholder="소개 영상 커버 — 끌어다 놓기" style={{ display: "block", width: "100%", height: "100%" }}></image-slot>
      <span style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", pointerEvents: "none" }}>
        <span style={{ width: 76, height: 76, borderRadius: 999, background: "rgba(255,255,255,0.94)", display: "grid", placeItems: "center", boxShadow: "0 12px 34px rgba(0,0,0,0.28)" }}>
          <Icon name="play" size={30} style={{ color: "var(--green)", marginLeft: 4 }} />
        </span>
      </span>
      <span style={{ position: "absolute", left: 16, bottom: 14, padding: "7px 13px", borderRadius: 999, background: "rgba(20,18,16,0.6)", color: "#fff", fontSize: 12.5, fontWeight: 700, pointerEvents: "none", backdropFilter: "blur(6px)" }}>소개 영상 자리</span>
    </div>
  );
}

function HeroText({ centered, headSize, onCta, onDemo }) {
  return (
    <div style={{ textAlign: centered ? "center" : "left", display: "flex", flexDirection: "column", alignItems: centered ? "center" : "flex-start" }}>
      <Reveal y={14}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green-bright)", marginBottom: 22 }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--green)" }} /> Creative Marketing Studio
        </span>
      </Reveal>

      <Kinetic lines={["GROW", <span key="g" style={{ color: "var(--green)" }}>YOUR</span>, "STORE."]} style={headSize} />

      <Reveal delay={420} y={20} style={{ maxWidth: 540, marginTop: 28 }}>
        <p style={{ margin: 0, fontSize: "clamp(15px,1.5vw,18px)", lineHeight: 1.6, color: "var(--text-secondary)", wordBreak: "keep-all" }}>
          키워드·플레이스·리뷰·블로그를 한 화면에서 고르고 바로 실행하는 <b style={{ color: "var(--text-primary)" }}>사장님 전용 마케팅 허브</b>. 더장사가 매출이 오르는 다음 한 수를 안내합니다.
        </p>
      </Reveal>

      <Reveal delay={560} y={18} style={{ marginTop: 30 }}>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: centered ? "center" : "flex-start" }}>
          <Button variant="primary" size="lg" onClick={onCta} iconRight={<span>→</span>}>무료로 시작하기</Button>
          <Button variant="outline" size="lg" onClick={onDemo} iconLeft={<Icon name="play" size={16} />}>제품 데모 보기</Button>
        </div>
      </Reveal>

      <Reveal delay={700} y={16} style={{ marginTop: 36 }}>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: centered ? "center" : "flex-start" }}>
          {["조회수 검색", "플레이스 순위", "GEO 리뷰", "블로그 분석"].map((t) => (
            <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "7px 14px", borderRadius: 999, background: "var(--bg-surface)", border: "1px solid var(--line)", fontSize: 13.5, fontWeight: 600, color: "var(--text-secondary)" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--green)" }} />{t}
            </span>
          ))}
        </div>
      </Reveal>
    </div>
  );
}

function Hero({ layout = "left", onCta, onDemo }) {
  const centered = layout === "center";
  const headSize = { fontFamily: "var(--font-display)", fontWeight: 800, lineHeight: 0.9, letterSpacing: "-0.04em", fontSize: centered ? "clamp(52px,12vw,150px)" : "clamp(40px,6.4vw,104px)", color: "var(--text-primary)" };

  return (
    <section style={{ maxWidth: 1280, margin: "0 auto", padding: centered ? "clamp(48px,8vw,104px) clamp(18px,4vw,44px) clamp(36px,5vw,72px)" : "clamp(36px,6vw,88px) clamp(18px,4vw,44px) clamp(32px,5vw,64px)" }}>
      {centered ? (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "clamp(36px,5vw,56px)" }}>
          <HeroText centered headSize={headSize} onCta={onCta} onDemo={onDemo} />
          <Reveal delay={320} style={{ width: "100%", maxWidth: 900 }}><HeroMedia /></Reveal>
        </div>
      ) : (
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: "clamp(32px,5vw,60px)", alignItems: "center" }}>
          <HeroText headSize={headSize} onCta={onCta} onDemo={onDemo} />
          <Reveal delay={320}><HeroMedia /></Reveal>
        </div>
      )}
    </section>
  );
}

Object.assign(window, { Hero });