Hero section

/* Minimal: the mesh is the whole screen, and type does the rest. The copy sits in the optical centre; customers hold the bottom edge. */
.hero { isolation: isolate; display: grid; }
.mesh {
  --mesh-base: #f2ede7;
  --mesh-1: #bdd3ec; --mesh-2: #c3c6ff; --mesh-3: #ffd0b0; --mesh-4: #f6bfd6; --mesh-5: #cfe8dc; --mesh-6: #fff3dc;
  z-index: -1;
}
:global(:root[data-theme="dark"]) .mesh {
  --mesh-base: #09090f;
  --mesh-1: #0d3a47; --mesh-2: #2a2f86; --mesh-3: #5a2a3c; --mesh-4: #3a1f5a; --mesh-5: #7a3a22; --mesh-6: #12142c;
}
/* A theme-aware scrim keeps body text above 4.5:1 wherever the mesh drifts. */
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom, transparent 40%, color-mix(in oklab, var(--background) 22%, transparent)); pointer-events: none; }

.inner { display: grid; box-sizing: border-box; width: 100%; max-width: 1320px; grid-template-rows: 1fr auto auto 1fr auto; gap: var(--space-10); margin: 0 auto; padding: clamp(88px, 12svh, 128px) var(--space-10) var(--space-10); }
.title { grid-row: 2; }
.row { grid-row: 3; }
.brands { grid-row: 5; }
.title { max-width: 14ch; font-size: clamp(2.75rem, 1rem + 7cqi, 7rem); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-8) var(--space-16); }
.description { max-width: 520px; color: color-mix(in oklab, var(--foreground) 76%, transparent); }
.cta { display: grid; justify-items: end; gap: var(--space-3); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fine { margin: 0; color: color-mix(in oklab, var(--foreground) 62%, transparent); font-size: var(--text-sm); }

.brands { display: grid; gap: var(--space-5); border-top: 1px solid color-mix(in oklab, var(--foreground) 14%, transparent); padding-top: var(--space-6); }
.brands p { margin: 0; color: color-mix(in oklab, var(--foreground) 62%, transparent); font-size: var(--text-sm); }
.brands ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5) var(--space-8); margin: 0; padding: 0; list-style: none; }
.brands li { display: inline-flex; align-items: center; gap: 9px; color: color-mix(in oklab, var(--foreground) 78%, transparent); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); }
.brands i { width: 22px; height: 22px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }

@container hero (max-width: 800px) {
  .row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cta { justify-items: start; }
  .brands ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container hero (max-width: 560px) {
  .inner { gap: var(--space-6); padding: 80px var(--space-4) var(--space-6); }
  .actions { width: 100%; }
  .actions > * { flex: 1 1 auto; }
  .cta { width: 100%; }
  .brands ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .brands li:nth-child(n + 7) { display: none; }
  .brands li { font-size: var(--text-base); }
  .brands i { width: 18px; height: 18px; }
}

"use client";

import { MotionConfig, motion } from "motion/react";
import { ActionLink } from "./hero-content";
import type { HeroAction } from "./hero-content";
import { HeroMesh } from "./hero-mesh";
import type { HeroMeshPoint } from "./hero-mesh";
import { heroGroup, heroRise } from "./hero-motion";
import shell from "./hero-section.module.css";
import styles from "./hero-cadence.module.css";

export interface HeroCadenceProps {
  primaryAction?: HeroAction;
  secondaryAction?: HeroAction;
  animateIn?: boolean;
  className?: string;
}

/** Six points, authored the way the Gradient mesh editor saves them. Colors live in CSS, one palette per theme. */
const MESH: HeroMeshPoint[] = [
  { x: .1, y: .88, spread: .72 },
  { x: .86, y: .12, spread: .66 },
  { x: .16, y: .14, spread: .56 },
  { x: .62, y: .62, spread: .5 },
  { x: .94, y: .92, spread: .48 },
  { x: .44, y: .3, spread: .34 },
];

/** Sample customers. The marks are the brands' own icons, drawn in the text color. */
const BRANDS = [
  { name: "Linear", logo: "/block-logos/linear.svg" },
  { name: "Vercel", logo: "/block-logos/vercel.svg" },
  { name: "Raycast", logo: "/block-logos/raycast.svg" },
  { name: "Notion", logo: "/block-logos/notion.svg" },
  { name: "Figma", logo: "/block-logos/figma.svg" },
  { name: "Stripe", logo: "/block-logos/stripe.svg" },
  { name: "Loom", logo: "/block-logos/loom.svg" },
];

/** Minimal hero, one full screen: large type over a slowly drifting mesh gradient with grain, and the teams that use the product along the bottom edge. */
export function HeroCadence({ primaryAction = { label: "Mac용 받기", doneLabel: "다운로드를 시작했어요" }, secondaryAction = { label: "웹에서 써 보기", doneLabel: "케이던스를 여는 중이에요" }, animateIn = true, className }: HeroCadenceProps) {
  const item = heroRise;
  // Reduced motion: Motion skips every transform (rise, zoom, tilt entrance); opacity still fades briefly.
  return <MotionConfig reducedMotion="user"><section className={[shell.hero, shell.screen, styles.hero, className].filter(Boolean).join(" ")}>
    <HeroMesh className={styles.mesh} points={MESH} grain={.55} speed={.45} />
    <motion.div className={styles.inner} variants={heroGroup} initial={animateIn ? "hidden" : false} animate="shown">
      <motion.h1 variants={item} className={[shell.title, styles.title].join(" ")}>월요일이 오기 전에 이번 주 계획이 끝나요</motion.h1>
      <div className={styles.row}>
        <motion.p variants={item} className={[shell.description, styles.description].join(" ")}>케이던스가 할 일, 회의, 집중 목표를 읽고 중요한 일에 시간을 잡아 줘요. 계획이 바뀌면 일정도 알아서 옮겨 줘요.</motion.p>
        <motion.div variants={item} className={styles.cta}>
          <div className={styles.actions}>
            <ActionLink action={primaryAction} kind="primary" />
            <ActionLink action={secondaryAction} kind="secondary" />
          </div>
          <p className={styles.fine}>개인은 무료예요. 팀은 한 명당 월 ₩11,000부터예요.</p>
        </motion.div>
      </div>
      <motion.div variants={item} className={styles.brands}>
        <p>이런 회사의 팀들이 케이던스로 계획해요</p>
        <ul aria-label="예시 고객사">
          {BRANDS.map(brand => <li key={brand.name}><i style={{ maskImage: `url(${brand.logo})`, WebkitMaskImage: `url(${brand.logo})` }} aria-hidden="true" />{brand.name}</li>)}
        </ul>
      </motion.div>
    </motion.div>
  </section></MotionConfig>;
}

export default HeroCadence;

.inner { display: grid; max-width: 1200px; margin: 0 auto; padding: var(--space-24) var(--space-10); }
.copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-5); max-width: 760px; margin: 0 auto; text-align: center; }
.title { max-width: 16ch; }
.description { max-width: 560px; }

.announcement { display: inline-flex; max-width: 100%; min-height: 32px; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px var(--space-3); background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.arrow { flex: none; transition: transform var(--duration-fast) var(--ease-standard); }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.action { display: inline-flex; height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-5); font: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
.action:active { transform: scale(.97); }
.primary { background: var(--accent); color: var(--accent-foreground); }
.secondary { border-color: var(--border); background: var(--surface); color: var(--foreground); }
@media (hover: hover) and (pointer: fine) {
  .primary:hover { opacity: .9; }
  .secondary:hover { background: var(--surface-muted); }
  .announcement:hover { border-color: var(--border-strong); color: var(--foreground); }
  :is(.action, .announcement):hover .arrow { transform: translateX(2px); }
}

.install { display: flex; width: min(100%, 440px); height: var(--control-height-md); align-items: center; gap: var(--space-2); margin-top: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-1) 0 var(--space-4); background: var(--surface); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; text-align: left; }
.prompt { color: var(--text-muted); }
.command { flex: 1; overflow: hidden; color: var(--foreground); font: inherit; text-overflow: ellipsis; white-space: nowrap; }

.meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; border-top: 1px solid var(--border-subtle); padding: var(--space-5) 0 0; color: var(--text-muted); font-size: var(--text-sm); list-style: none; }

.media { min-width: 0; }

.split .inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--space-12); }
.split .copy, .minimal .copy { justify-items: start; margin: 0; text-align: left; }
.split .actions, .minimal .actions { justify-content: flex-start; }
.minimal .copy { max-width: 860px; }

@container hero (max-width: 800px) {
  .split .inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
}
@container hero (max-width: 560px) {
  .inner { padding: var(--space-16) var(--space-4); }
  .actions { width: 100%; }
  .action { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .action, .announcement, .arrow { transition: none; }
  .action:active { transform: none; }
}

/* Buttons are Arc buttons; this only keeps them the height of the link actions beside them. */
.button { height: var(--control-height-md); min-height: var(--control-height-md); border-radius: var(--radius-control); font-size: var(--text-sm); }

import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { HeroContent } from "./hero-content";

describe("HeroContent install command", () => {
  const render = (install: Parameters<typeof HeroContent>[0]["install"]) => renderToStaticMarkup(createElement(HeroContent, { layout: "split", title: "Title", install, animateIn: false }));

  it("names the copy button in Korean unless the page says otherwise", () => {
    expect(render([{ label: "pnpm", command: "pnpm add x" }])).toContain("설치 명령어 복사하기");
  });

  it("names the copy button from the command, for a page in another language", () => {
    const html = render([{ label: "pnpm", command: "pnpm add x", copyLabel: "Copy the install command", copiedLabel: "Copied", errorLabel: "Could not copy" }]);
    expect(html).toContain("Copy the install command");
    expect(html).not.toContain("설치 명령어 복사하기");
  });
});

"use client";

import { useEffect, useState } from "react";
import type { ReactNode } from "react";
import { MotionConfig, motion } from "motion/react";
import { HugeiconsIcon } from "@hugeicons/react";
import { ArrowUpRight01Icon } from "@hugeicons/core-free-icons";
import { Button } from "../../button/button";
import { CopyButton } from "../../copy-button/copy-button";
import { heroGroup, heroRise } from "./hero-motion";
import shell from "./hero-section.module.css";
import styles from "./hero-content.module.css";
import { UiIcon } from "../../theme/ui-icon";
import { playUiSound } from "../../sound/play";

export interface HeroAction {
  label: string;
  href?: string;
  onClick?: () => void;
  /** Opens in a new tab and shows an outward arrow. */
  external?: boolean;
  /** Shown in place of the label for a moment after a press, such as "체험을 시작했어요". Buttons only. */
  doneLabel?: string;
}

export interface HeroInstallCommand {
  /** Short label, such as npm or pnpm. The first command is shown. */
  label: string;
  command: string;
  /** Accessible name of the copy button, and the messages after copying. Korean by default; set them for a page in another language. */
  copyLabel?: string;
  copiedLabel?: string;
  errorLabel?: string;
}

export interface HeroContentProps {
  layout: "centered" | "split" | "minimal";
  announcement?: HeroAction | null;
  title: string;
  description?: string;
  primaryAction?: HeroAction | null;
  secondaryAction?: HeroAction | null;
  install?: HeroInstallCommand[] | null;
  media?: ReactNode;
  meta?: string[];
  animateIn?: boolean;
  className?: string;
}

/** A link or button that looks like a Button. Links keep native navigation; a button with `doneLabel` confirms in place. */
export function ActionLink({ action, kind, className }: { action: HeroAction; kind: "primary" | "secondary"; className?: string }) {
  const [done, setDone] = useState(false);
  useEffect(() => {
    if (!done) return;
    const timer = window.setTimeout(() => setDone(false), 2400);
    return () => window.clearTimeout(timer);
  }, [done]);
  const cls = [styles.action, styles[kind], className].filter(Boolean).join(" ");
  const icon = action.external ? <HugeiconsIcon icon={ArrowUpRight01Icon} size={16} strokeWidth={1.75} aria-hidden="true" /> : kind === "primary" ? <UiIcon iconRole="arrow-right" className={styles.arrow} size={16} strokeWidth={1.75} aria-hidden="true" /> : null;
  if (action.href) return <a className={cls} href={action.href} onClick={() => { playUiSound("click"); action.onClick?.(); }} {...(action.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{action.label}{icon}</a>;
  return <Button variant={kind} size="lg" className={[styles.button, className].filter(Boolean).join(" ")} onClick={() => { action.onClick?.(); if (action.doneLabel) setDone(true); }}>
    {done ? <><UiIcon iconRole="check" size={16} strokeWidth={1.75} aria-hidden="true" />{action.doneLabel}</> : <>{action.label}{icon}</>}
  </Button>;
}

/**
 * The hero with your own content: announcement, headline, description, actions, an optional install line, and an
 * optional visual beside the copy. Use it when none of the three designed variants fits the product.
 */
export function HeroContent({ layout, announcement, title, description, primaryAction, secondaryAction, install, media, meta, animateIn = true, className }: HeroContentProps) {
  const item = heroRise;
  const command = install?.[0];
  // Reduced motion: Motion skips every transform (rise, zoom, tilt entrance); opacity still fades briefly.
  return <MotionConfig reducedMotion="user"><section className={[shell.hero, styles.hero, styles[layout], className].filter(Boolean).join(" ")}>
    <div className={styles.inner}>
      <motion.div className={styles.copy} variants={heroGroup} initial={animateIn ? "hidden" : false} animate="shown">
        {announcement && <motion.div variants={item}>
          {announcement.href
            ? <a className={styles.announcement} href={announcement.href} onClick={() => { playUiSound("click"); announcement.onClick?.(); }}>{announcement.label}<UiIcon iconRole="arrow-right" className={styles.arrow} size={14} strokeWidth={1.75} aria-hidden="true" /></a>
            : <button type="button" className={styles.announcement} onClick={() => { playUiSound("click"); announcement.onClick?.(); }}>{announcement.label}<UiIcon iconRole="arrow-right" className={styles.arrow} size={14} strokeWidth={1.75} aria-hidden="true" /></button>}
        </motion.div>}
        <motion.h1 variants={item} className={[shell.title, styles.title].join(" ")}>{title}</motion.h1>
        {description && <motion.p variants={item} className={[shell.description, styles.description].join(" ")}>{description}</motion.p>}
        {(primaryAction || secondaryAction) && <motion.div variants={item} className={styles.actions}>
          {primaryAction && <ActionLink action={primaryAction} kind="primary" />}
          {secondaryAction && <ActionLink action={secondaryAction} kind="secondary" />}
        </motion.div>}
        {command && <motion.div variants={item} className={styles.install}>
          <span className={styles.prompt} aria-hidden="true">$</span>
          <code className={styles.command}>{command.command}</code>
          <CopyButton value={command.command} label={command.copyLabel ?? "설치 명령어 복사하기"} copiedLabel={command.copiedLabel} errorLabel={command.errorLabel} iconOnly variant="plain" />
        </motion.div>}
        {meta && meta.length > 0 && <motion.ul variants={item} className={styles.meta}>{meta.map(entry => <li key={entry}>{entry}</li>)}</motion.ul>}
      </motion.div>
      {media && <motion.div className={styles.media} variants={item} initial={animateIn ? "hidden" : false} animate="shown">{media}</motion.div>}
    </div>
  </section></MotionConfig>;
}

export default HeroContent;

import type { LineChartDatum } from "../../line-chart/line-chart";

/** 매출 분석 제품 루멘의 예시 데이터예요. 금액은 원화로 보여 주고, 내 제품의 숫자로 바꿔 쓰세요. */

export type LumenRange = "30d" | "90d" | "12m";

export const lumenRanges: { value: LumenRange; label: string }[] = [
  { value: "30d", label: "30일" },
  { value: "90d", label: "90일" },
  { value: "12m", label: "12개월" },
];

/** A smooth, deterministic walk: a trend, one slow wave, and a little noise that repeats for the same seed. */
function walk(count: number, start: number, end: number, wave: number, seed: number) {
  let s = seed;
  const rand = () => { s = (s * 16807) % 2147483647; return s / 2147483647 - .5; };
  return Array.from({ length: count }, (_, i) => {
    const t = i / (count - 1);
    return Math.round(start + (end - start) * (t * t * .35 + t * .65) + Math.sin(t * Math.PI * 2.3) * wave + rand() * wave * .6);
  });
}

const months = ["10월", "11월", "12월", "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월"];

function series(range: LumenRange): LineChartDatum[] {
  if (range === "12m") {
    const now = walk(12, 9_800, 36_400, 2_600, 7), before = walk(12, 6_200, 21_900, 2_200, 19);
    return months.map((month, i) => ({ key: `m${i}`, label: `${i < 3 ? 2025 : 2026}년 ${month}`, axisLabel: i % 2 === 0 ? month : undefined, values: { mrr: now[i], last: before[i] } }));
  }
  const days = range === "30d" ? 30 : 13;
  const step = range === "30d" ? 1 : 7;
  const now = walk(days, range === "30d" ? 640 : 4_300, range === "30d" ? 1_960 : 9_800, range === "30d" ? 260 : 900, range === "30d" ? 3 : 11);
  const before = walk(days, range === "30d" ? 520 : 3_600, range === "30d" ? 1_180 : 6_100, range === "30d" ? 220 : 700, 29);
  const end = new Date(Date.UTC(2026, 8, 24));
  return now.map((value, i) => {
    const date = new Date(end.getTime() - (days - 1 - i) * step * 86_400_000);
    const label = date.toLocaleDateString("ko-KR", { month: "long", day: "numeric", timeZone: "Asia/Seoul" });
    const every = range === "30d" ? 7 : 3;
    return { key: date.toISOString().slice(0, 10), label, axisLabel: (days - 1 - i) % every === 0 ? label : undefined, values: { mrr: value, last: before[i] } };
  });
}

export const lumenSeries: Record<LumenRange, LineChartDatum[]> = { "30d": series("30d"), "90d": series("90d"), "12m": series("12m") };

export interface LumenKpi {
  id: string;
  label: string;
  tone: "accent" | "success" | "warning" | "danger";
  byRange: Record<LumenRange, { value: string; change: string; data: number[] }>;
}

export const lumenKpis: LumenKpi[] = [
  { id: "mrr", label: "MRR", tone: "accent", byRange: {
    "30d": { value: "₩6.8억", change: "+8.2%", data: walk(12, 446, 483, 4, 5) },
    "90d": { value: "₩6.8억", change: "+19.9%", data: walk(12, 402, 483, 6, 9) },
    "12m": { value: "₩6.8억", change: "+51.7%", data: walk(12, 318, 483, 8, 13) },
  } },
  { id: "nrr", label: "순 유지율", tone: "success", byRange: {
    "30d": { value: "118%", change: "+3%p", data: walk(12, 112, 118, 1.5, 17) },
    "90d": { value: "116%", change: "+5%p", data: walk(12, 109, 116, 1.8, 21) },
    "12m": { value: "114%", change: "+9%p", data: walk(12, 103, 114, 2.4, 23) },
  } },
  { id: "new", label: "신규 고객", tone: "success", byRange: {
    "30d": { value: "214", change: "+12%", data: walk(12, 5, 9, 2, 31) },
    "90d": { value: "602", change: "+18%", data: walk(12, 38, 56, 6, 37) },
    "12m": { value: "2,140", change: "+34%", data: walk(12, 120, 214, 16, 41) },
  } },
  { id: "churn", label: "이탈 MRR", tone: "success", byRange: {
    "30d": { value: "₩854만", change: "−14%", data: walk(12, 9, 6, 1.2, 43) },
    "90d": { value: "₩2,996만", change: "−9%", data: walk(12, 26, 21, 2, 47) },
    "12m": { value: "₩1.4억", change: "−22%", data: walk(12, 12, 7, 1.4, 53) },
  } },
];

export interface LumenMover {
  name: string;
  logo: string;
  /** Mono marks draw in the text color through a mask; color marks keep their own colors. */
  mono?: boolean;
  change: string;
  amount: number;
}

export const lumenMovers: LumenMover[] = [
  { name: "Linear", logo: "/block-logos/linear-color.svg", change: "엔터프라이즈로 옮겼어요", amount: 4_200 },
  { name: "Raycast", logo: "/block-logos/raycast-color.svg", change: "좌석 120개를 추가했어요", amount: 2_850 },
  { name: "Vercel", logo: "/block-logos/vercel.svg", mono: true, change: "연간 선결제", amount: 1_900 },
  { name: "Loom", logo: "/block-logos/loom-color.svg", change: "좌석 40개를 줄였어요", amount: -1_240 },
  { name: "Supabase", logo: "/block-logos/supabase-color.svg", change: "예측 기능을 추가했어요", amount: 980 },
  { name: "Framer", logo: "/block-logos/framer.svg", mono: true, change: "스케일 요금제로 올렸어요", amount: 760 },
];

export const lumenInsight: Record<LumenRange, { lead: string; rest: string }> = {
  "30d": { lead: "MRR이 이번 달 ₩5,096만 늘었어요.", rest: "62%는 스케일 요금제의 확장 계약 14건에서 나왔고, Linear가 가장 컸어요." },
  "90d": { lead: "MRR이 이번 분기 ₩1.1억 늘었어요.", rest: "3월 이후 처음으로 확장 계약이 신규 계약을 앞질렀어요." },
  "12m": { lead: "MRR이 12개월 동안 ₩2.3억 늘었어요.", rest: "110%가 넘는 순 유지율이 신규 고객보다 더 크게 기여했어요." },
};

/* Centered, one full screen: copy over a drifting mesh, and a product window that rises from the bottom edge and runs off it.
   The hero is exactly one screen tall (never shorter than 600px); the window takes whatever height the copy leaves. */
/* The section is the container, so its children carry the side gutters and the queries below can change them. */
.hero { isolation: isolate; display: flex; height: 100vh; height: 100svh; min-height: 600px; flex-direction: column; padding-top: clamp(88px, 14svh, 144px); text-align: center; }

/* The mesh fills the screen. It is authored per theme: tints a few steps off the page, so it reads as light rather than color. */
.mesh {
  --mesh-base: var(--background);
  --mesh-1: #ffe6d8; --mesh-2: #e3dcff; --mesh-3: #dbe4ff; --mesh-4: #f0e0ff; --mesh-5: #e0eefc;
  z-index: -1;
}
:global(:root[data-theme="dark"]) .mesh { --mesh-1: #2a1822; --mesh-2: #1c1a44; --mesh-3: #141c40; --mesh-4: #231842; --mesh-5: #0e2133; }

.copy { position: relative; display: grid; justify-items: center; gap: var(--space-5); max-width: 900px; margin: 0 auto; padding-inline: var(--space-10); }
.title { max-width: 14ch; font-size: clamp(2.5rem, 1.2rem + 5cqi, var(--text-5xl)); }
.description { max-width: 590px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.fine { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* Stage: fills the rest of the screen and is the visible crop. The window runs past its bottom edge; the mask fades it into the
   mesh, so there is no hard edge. The halo above leaves room for the light behind the window. */
.stage { --halo: 96px; position: relative; flex: 1 1 0; box-sizing: border-box; width: 100%; min-height: 0; max-width: calc(1200px + 2 * var(--space-10)); margin: calc(var(--space-12) - var(--halo)) auto 0; overflow: hidden; padding: var(--halo) var(--space-10) 0; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.glow {
  position: absolute; z-index: -1; top: calc(var(--halo) - 110px); left: 10%; right: 10%; height: 240px;
  background: radial-gradient(50% 50% at 50% 50%, var(--hero-glow), transparent 72%);
  filter: blur(36px);
  --hero-glow: color-mix(in oklab, color-mix(in oklab, var(--accent) 35%, #7d8cff) 36%, transparent);
}
:global(:root[data-theme="dark"]) .glow { --hero-glow: color-mix(in oklab, color-mix(in oklab, var(--accent) 30%, #6e7cff) 58%, transparent); }
.window { position: relative; }
/* A thin light catches the top edge, the way a real display does in a dark room. */
:global(:root[data-theme="dark"]) .window::after { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, transparent, color-mix(in oklab, #b9c2ff 70%, transparent), transparent); pointer-events: none; }
.perspective { display: flex; justify-content: center; perspective: 2200px; perspective-origin: 50% 0%; }
.tilt { position: relative; flex: none; transform-origin: 50% 0%; will-change: transform; }
.scaler { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
/* Reduced motion: the window is already in place; drop the GPU layer kept for the entrance. */
@media (prefers-reduced-motion: reduce) { .tilt { will-change: auto; } }

/* The window. */
.window {
  display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--foreground);
  text-align: left; font-size: var(--text-sm);
  box-shadow: 0 1px 1px rgb(20 24 40 / .04), 0 24px 48px -16px rgb(20 24 40 / .16), 0 60px 120px -40px rgb(40 48 110 / .22);
}
:global(:root[data-theme="dark"]) .window {
  border-color: color-mix(in oklab, var(--foreground) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 9%, transparent), 0 24px 48px -16px rgb(0 0 0 / .6), 0 60px 140px -40px rgb(40 50 140 / .35);
}
.chrome { position: relative; display: flex; height: 40px; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-subtle); background: color-mix(in oklab, var(--surface-muted) 55%, var(--surface)); }
.lights { position: absolute; left: 16px; display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in oklab, var(--foreground) 14%, transparent); }
.url { border-radius: 8px; padding: 3px 14px; background: var(--surface); color: var(--text-muted); font-size: var(--text-xs); box-shadow: inset 0 0 0 1px var(--border-subtle); }

.app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 0; }
.window[data-narrow] .app { grid-template-columns: minmax(0, 1fr); }

.sidebar { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-subtle); padding: 14px 12px; background: color-mix(in oklab, var(--surface-muted) 40%, var(--surface)); }
.workspace { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.wsMark { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; }
.wsName { flex: 1; font-weight: 500; }
.dim { color: var(--text-muted); }
.search { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; border: 1px solid var(--border-subtle); border-radius: 9px; padding: 6px 8px; background: var(--surface); color: var(--text-muted); }
.search kbd { margin-left: auto; font: inherit; font-size: var(--text-xs); }
.nav { display: grid; gap: 1px; }
.navItem { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 6px 8px; color: var(--text-secondary); }
.navItem svg { color: var(--text-muted); }
.navItem[data-active] { background: var(--accent-subtle); color: var(--foreground); font-weight: 500; }
.navItem[data-active] svg { color: var(--accent); }
.groupLabel { margin: 18px 8px 6px; color: var(--text-muted); font-size: var(--text-xs); }
.dot { width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: var(--text-muted); }
.dot[data-tone="accent"] { background: var(--accent); }
.dot[data-tone="danger"] { background: var(--danger); }
.me { display: flex; align-items: center; gap: 10px; margin-top: auto; border-top: 1px solid var(--border-subtle); padding: 12px 6px 2px; }
.me span:not([role]) { display: grid; flex: 1; line-height: 1.3; }
.me strong { font-weight: 500; }
.me small { color: var(--text-muted); font-size: var(--text-xs); }

.main { display: grid; align-content: start; gap: 16px; min-width: 0; padding: 22px 24px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.h2 { margin: 0; font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); }
.sub { margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.range { flex: none; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.window[data-narrow] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px 12px; background: var(--surface); }

.grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.window[data-narrow] .grid { grid-template-columns: minmax(0, 1fr); }
.card { display: grid; align-content: start; gap: 14px; min-width: 0; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 18px; background: var(--surface); }
.cardHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.insight { display: flex; gap: 8px; max-width: 46ch; margin: 0; color: var(--text-secondary); line-height: 1.45; }
.insight strong { color: var(--foreground); font-weight: 500; }
.insightIcon { flex: none; margin-top: 2px; color: var(--accent); }
.legend { display: flex; flex: none; gap: 14px; color: var(--text-muted); font-size: var(--text-xs); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 2px; border-radius: 2px; background: var(--accent); }
.swatch[data-last] { background: repeating-linear-gradient(to right, color-mix(in oklab, var(--foreground) 46%, var(--surface)) 0 4px, transparent 4px 7px); }
.window[data-narrow] .legend { display: none; }

.cardTitle { display: flex; justify-content: space-between; font-weight: 500; }
.cardTitle span { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.movers { display: grid; margin: 0; padding: 0; list-style: none; }
.movers li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border-subtle); padding: 10px 0; }
.movers li:first-child { border-top: 0; padding-top: 2px; }
.logo { flex: none; width: 20px; height: 20px; background: center / contain no-repeat; }
.logo[data-mono] { background: var(--foreground); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.who strong { font-weight: 500; }
.who small { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.amount { color: var(--success); font-variant-numeric: tabular-nums; font-weight: 500; }
.amount[data-down] { color: var(--danger); }

@container hero (max-width: 560px) {
  .hero { padding-top: 84px; }
  .copy { gap: var(--space-4); padding-inline: var(--space-4); }
  .actions { width: 100%; margin-top: var(--space-2); }
  .actions > * { flex: 1 1 auto; }
  .stage { --halo: 56px; margin-top: calc(var(--space-10) - var(--halo)); padding-inline: 0; }
}

/* KPI tiles reuse Arc Sparkline; its caption wraps so the label sits above a larger value. */
.kpi :global(figcaption) { flex-wrap: wrap; row-gap: 4px; }
.kpi :global(figcaption) > :first-child { flex-basis: 100%; font-size: var(--text-xs); color: var(--text-muted); }
.kpi :global(figcaption) strong { margin-left: 0; font-size: var(--text-2xl); letter-spacing: var(--tracking-body); }
.kpi :global(figcaption) small { align-self: center; }

"use client";

import { useLayoutEffect, useRef, useState } from "react";
import { MotionConfig, motion } from "motion/react";
import { useReducedMotion } from "../../lib/use-reduced-motion";
import { HugeiconsIcon } from "@hugeicons/react";
import { BookOpen01Icon, ChartBarLineIcon, ChartLineData01Icon, DashboardSpeed01Icon, Settings01Icon, SparklesIcon, UnfoldMoreIcon, UserGroupIcon } from "@hugeicons/core-free-icons";
import { LineChart } from "../../line-chart/line-chart";
import { Sparkline } from "../../sparkline/sparkline";
import SegmentedControl from "../../segmented-control/segmented-control";
import { Avatar } from "../../avatar/avatar";
import { avatar } from "../../lib/media";
import { motionTokens } from "../../lib/motion-tokens";
import { ActionLink } from "./hero-content";
import type { HeroAction } from "./hero-content";
import { HeroMesh } from "./hero-mesh";
import type { HeroMeshPoint } from "./hero-mesh";
import { heroGroup, heroRise } from "./hero-motion";
import { lumenInsight, lumenKpis, lumenMovers, lumenRanges, lumenSeries } from "./hero-lumen-data";
import type { LumenRange } from "./hero-lumen-data";
import shell from "./hero-section.module.css";
import styles from "./hero-lumen.module.css";
import { UiIcon } from "../../theme/ui-icon";

/** A soft mesh across the whole screen: cool tints at the top, a warm one low behind the window, all a few steps off the page. */
const MESH: HeroMeshPoint[] = [
  { x: .1, y: .92, spread: .7 },
  { x: .92, y: .86, spread: .66 },
  { x: .14, y: .08, spread: .64 },
  { x: .86, y: .04, spread: .6 },
  { x: .5, y: .38, spread: .46 },
];

const NAV = [
  { label: "개요", icon: DashboardSpeed01Icon, active: true },
  { label: "매출", icon: ChartLineData01Icon },
  { label: "고객", icon: UserGroupIcon },
  { label: "코호트", icon: ChartBarLineIcon },
  { label: "예측", icon: SparklesIcon },
  { label: "보고서", icon: BookOpen01Icon },
];
const VIEWS = [{ label: "엔터프라이즈 확장", tone: "accent" }, { label: "이탈 위험", tone: "danger" }, { label: "EU 고객", tone: "neutral" }];

/** 예시 숫자는 달러 기준으로 만들어 두었고, 화면에는 1달러 = 1,400원으로 바꿔 원화로 보여 줘요. */
const WON_PER_DOLLAR = 1400;
const moneyFormat = new Intl.NumberFormat("ko-KR", { style: "currency", currency: "KRW", maximumFractionDigits: 0 });
const compactFormat = new Intl.NumberFormat("ko-KR", { style: "currency", currency: "KRW", notation: "compact", maximumFractionDigits: 1 });
const money = { format: (value: number) => moneyFormat.format(value * WON_PER_DOLLAR) };
const compact = (value: number) => compactFormat.format(value * WON_PER_DOLLAR);

/** Width the dashboard is designed at, wide and narrow. It is drawn at that size and scaled to fit, like a screenshot. */
const WIDE = 1200, NARROW = 600;

export interface HeroLumenProps {
  primaryAction?: HeroAction;
  secondaryAction?: HeroAction;
  animateIn?: boolean;
  className?: string;
}

/**
 * Centered hero, one full screen: a headline over a drifting mesh, and a live revenue dashboard rising from the bottom edge. The
 * window settles from a tilt as it enters and runs off the bottom of the screen into a fade. It is real markup built from the
 * chart components; its range control works.
 */
export function HeroLumen({ primaryAction = { label: "무료로 시작하기", doneLabel: "체험을 시작했어요" }, secondaryAction = { label: "데모 신청하기", doneLabel: "데모를 신청했어요" }, animateIn = true, className }: HeroLumenProps) {
  const calm = !!useReducedMotion();
  const item = heroRise;
  const stage = useRef<HTMLDivElement>(null);
  const [box, setBox] = useState({ width: WIDE, scale: 1 });

  useLayoutEffect(() => {
    const node = stage.current;
    if (!node) return;
    const measure = () => {
      const css = getComputedStyle(node);
      const width = node.clientWidth - parseFloat(css.paddingLeft) - parseFloat(css.paddingRight);
      const design = width < 720 ? NARROW : WIDE;
      // On a phone the window keeps a legible size and crops evenly at both edges instead of shrinking to fit.
      setBox({ width: design, scale: design === NARROW ? Math.max(.6, Math.min(1, width / design)) : Math.min(1, width / design) });
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  const narrow = box.width === NARROW;
  const height = narrow ? 700 : 760;

  // Reduced motion: Motion skips every transform (rise, zoom, tilt entrance); opacity still fades briefly.
  return <MotionConfig reducedMotion="user"><section className={[shell.hero, shell.screen, styles.hero, className].filter(Boolean).join(" ")}>
    <HeroMesh className={styles.mesh} points={MESH} grain={.18} speed={.55} />
    <motion.div className={styles.copy} variants={heroGroup} initial={animateIn ? "hidden" : false} animate="shown">
      <motion.h1 variants={item} className={[shell.title, styles.title].join(" ")}>매출이 움직이는 순간을 모두 확인해요</motion.h1>
      <motion.p variants={item} className={[shell.description, styles.description].join(" ")}>루멘이 Stripe, HubSpot, 데이터 웨어하우스를 연결하고 MRR이 바뀌는 순간 이유를 설명해 줘요. SQL도, 오래된 스프레드시트도 필요 없어요.</motion.p>
      <motion.div variants={item} className={styles.actions}>
        <ActionLink action={primaryAction} kind="primary" />
        <ActionLink action={secondaryAction} kind="secondary" />
      </motion.div>
      <motion.p variants={item} className={styles.fine}>14일 동안 무료예요. 연결은 4분이면 끝나요.</motion.p>
    </motion.div>

    <motion.div
      ref={stage}
      className={styles.stage}
      initial={animateIn ? { opacity: 0, y: 56 } : false}
      animate={{ opacity: 1, y: 0 }}
      transition={calm ? { duration: motionTokens.duration.standard } : { duration: 1.1, ease: [...motionTokens.ease.enter], delay: motionTokens.duration.moderate }}
    >
      <div className={styles.glow} aria-hidden="true" />
      <div className={styles.perspective}>
        <motion.div
          className={styles.tilt}
          style={{ width: box.width * box.scale, height: height * box.scale }}
          initial={animateIn ? { rotateX: 22, scale: .94 } : false}
          animate={{ rotateX: 0, scale: 1 }}
          transition={{ duration: 1.5, ease: [...motionTokens.ease.enter], delay: motionTokens.duration.moderate }}
        >
          {/* The scale is a Motion value rather than a CSS transform, so layout animations inside (the date range highlight)
              are projected through it and slide exactly between options at any screen width. */}
          <motion.div className={styles.scaler} style={{ width: box.width, height, scale: box.scale, originX: 0, originY: 0 }}>
            <LumenDashboard narrow={narrow} />
          </motion.div>
        </motion.div>
      </div>
    </motion.div>
  </section></MotionConfig>;
}

/** The Lumen app window. Everything is content except the range control, which changes the data the whole screen shows. */
function LumenDashboard({ narrow }: { narrow: boolean }) {
  const [range, setRange] = useState<LumenRange>("30d");
  const insight = lumenInsight[range];
  return <div className={styles.window} data-narrow={narrow || undefined} role="group" aria-label="루멘 매출 대시보드, 예시 데이터">
    <div className={styles.chrome} aria-hidden="true">
      <span className={styles.lights}><i /><i /><i /></span>
      <span className={styles.url}>app.lumen.so/acme/overview</span>
    </div>
    <div className={styles.app}>
      {!narrow && <aside className={styles.sidebar}>
        <div className={styles.workspace}>
          <span className={styles.wsMark}>한</span>
          <span className={styles.wsName}>한빛클라우드</span>
          <HugeiconsIcon icon={UnfoldMoreIcon} size={14} strokeWidth={1.75} className={styles.dim} />
        </div>
        <div className={styles.search}><UiIcon iconRole="search" size={14} strokeWidth={1.75} />검색<kbd>⌘K</kbd></div>
        <div className={styles.nav}>
          {NAV.map(({ label, icon, active }) => <div key={label} className={styles.navItem} data-active={active || undefined}><HugeiconsIcon icon={icon} size={15} strokeWidth={1.75} />{label}</div>)}
        </div>
        <div className={styles.groupLabel}>저장한 보기</div>
        <div className={styles.nav}>
          {VIEWS.map(view => <div key={view.label} className={styles.navItem}><i className={styles.dot} data-tone={view.tone} />{view.label}</div>)}
        </div>
        <div className={styles.me}>
          <Avatar name="윤채원" src={avatar("chloe-nguyen")} size="sm" />
          <span><strong>윤채원</strong><small>데이터 분석가</small></span>
          <HugeiconsIcon icon={Settings01Icon} size={15} strokeWidth={1.75} className={styles.dim} />
        </div>
      </aside>}
      <div className={styles.main}>
        <header className={styles.head}>
          <div>
            <h2 className={styles.h2}>매출 개요</h2>
            <p className={styles.sub}>2분 전에 Stripe와 동기화했어요</p>
          </div>
          <SegmentedControl label="기간" options={lumenRanges} value={range} onValueChange={value => setRange(value as LumenRange)} className={styles.range} />
        </header>

        <div className={styles.kpis}>
          {lumenKpis.map(kpi => {
            const now = kpi.byRange[range];
            return <div key={kpi.id} className={styles.kpi}>
              <Sparkline label={kpi.label} value={now.value} change={now.change} data={now.data} tone={kpi.tone} width={220} height={34} interactive={false} />
            </div>;
          })}
        </div>

        <div className={styles.grid}>
          <div className={styles.card}>
            <div className={styles.cardHead}>
              <p className={styles.insight}><HugeiconsIcon icon={SparklesIcon} size={15} strokeWidth={1.75} className={styles.insightIcon} /><span><strong>{insight.lead}</strong> {insight.rest}</span></p>
              <div className={styles.legend} aria-hidden="true"><span><i className={styles.swatch} />이번 기간</span><span><i className={styles.swatch} data-last="" />지난 기간</span></div>
            </div>
            <LineChart
              label="순증 MRR"
              data={lumenSeries[range]}
              series={[{ key: "mrr", label: "이번 기간", area: true }, { key: "last", label: "지난 기간", dashed: true }]}
              height={narrow ? 210 : 232}
              legend={false}
              formatValue={value => money.format(value)}
              formatTick={compact}
            />
          </div>
          {!narrow && <div className={styles.card}>
            <div className={styles.cardTitle}>변동이 큰 고객<span>MRR 변동</span></div>
            <ul className={styles.movers}>
              {lumenMovers.map(mover => <li key={mover.name}>
                <span className={styles.logo} data-mono={mover.mono || undefined} style={mover.mono ? { maskImage: `url(${mover.logo})`, WebkitMaskImage: `url(${mover.logo})` } : { backgroundImage: `url(${mover.logo})` }} />
                <span className={styles.who}><strong>{mover.name}</strong><small>{mover.change}</small></span>
                <span className={styles.amount} data-down={mover.amount < 0 || undefined}>{mover.amount < 0 ? "−" : "+"}{money.format(Math.abs(mover.amount))}</span>
              </li>)}
            </ul>
          </div>}
        </div>
      </div>
    </div>
  </div>;
}

export default HeroLumen;