/* global React */
// Recipeat — Landing page components. Token-sourced from colors_and_type.css

const LC = {
  bg: "#FBF9F7",
  surf1: "#FFFFFF",
  surf2: "#F5F3F1",
  surf3: "#EFEDEC",
  text: "#1B1C1B",
  textVar: "#40493D",
  primary: "#0D631B",
  primaryDeep: "#0B4E15",
  primaryFixed: "#A3F69C",
  onPrimaryContainer: "#CBFFC2",
  secondary: "#964900",
  secondaryFixed: "#FFDCC6",
  tertiaryFixed: "#FFDEAC",
  peach: "#FFDCC6",
  mint: "#A3F69C",
  honey: "#FFDEAC",
  divider: "#E4E2E0",
};
window.LC = LC;

// MaterialIcons "verified" — app과 동일한 인증 배지
function VerifiedBadge({ size = 12, color = LC.primary, style }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={size}
      height={size}
      fill={color}
      aria-hidden="true"
      style={{ verticalAlign: "-2px", flexShrink: 0, ...style }}
    >
      <path d="M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z" />
    </svg>
  );
}
window.VerifiedBadge = VerifiedBadge;

// ─────────────────────────────────────────────────────────────────────────────
// Brand chrome

function NavBar({ variant = "light" }) {
  const onDark = variant === "dark";
  const fg = onDark ? "#FBF9F7" : LC.text;
  const muted = onDark ? "rgba(251,249,247,0.72)" : LC.textVar;
  return (
    <nav
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "20px 32px",
        maxWidth: 1200,
        margin: "0 auto",
        position: "relative",
        zIndex: 10,
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <AppMark color={onDark ? LC.primaryFixed : LC.primary} />
        <span
          style={{
            font: "800 22px/28px var(--font-pretendard)",
            color: fg,
            letterSpacing: "-0.3px",
          }}
        >
          Recipeat
        </span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
        <a
          href="#features"
          style={{
            font: "500 14px/20px var(--font-pretendard)",
            color: muted,
            textDecoration: "none",
          }}
        >
          기능
        </a>
        <a
          href="#how"
          style={{
            font: "500 14px/20px var(--font-pretendard)",
            color: muted,
            textDecoration: "none",
          }}
        >
          사용법
        </a>
        <a
          href="#faq"
          style={{
            font: "500 14px/20px var(--font-pretendard)",
            color: muted,
            textDecoration: "none",
          }}
        >
          FAQ
        </a>
        <a
          href="#download"
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 6,
            padding: "10px 16px",
            borderRadius: 9999,
            background: onDark ? LC.primaryFixed : LC.primary,
            color: onDark ? LC.primaryDeep : "#fff",
            font: "600 13px/16px var(--font-pretendard)",
            textDecoration: "none",
          }}
        >
          다운로드
        </a>
      </div>
    </nav>
  );
}

function AppMark({ size = 28, color = LC.primary }) {
  // 앱 아이콘과 동일한 심볼 (client/assets/icons/symbol.svg).
  // 원본 viewBox 16.7871 × 27.0605 을 32×32 박스 중앙에 배치.
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <g transform="translate(7.6 2.47)" fill={color}>
        <path d="M16.4258 6.92383L16.4258 21.7285C16.4258 23.7793 15.4199 24.7949 13.3984 24.7949L3.02734 24.7949C1.00586 24.7949 0 23.7793 0 21.7285L0 6.92383C0 4.87305 1.00586 3.85742 3.02734 3.85742L3.15663 3.85742C3.1484 3.93681 3.14453 4.01835 3.14453 4.10156L3.14453 5.12695C3.14453 5.23091 3.15067 5.33228 3.16478 5.42969L3.10547 5.42969C2.08984 5.42969 1.57227 5.97656 1.57227 6.94336L1.57227 21.709C1.57227 22.6855 2.08984 23.2227 3.10547 23.2227L13.3203 23.2227C14.3359 23.2227 14.8535 22.6855 14.8535 21.709L14.8535 6.94336C14.8535 5.97656 14.3359 5.42969 13.3203 5.42969L13.261 5.42969C13.2751 5.33228 13.2812 5.23091 13.2812 5.12695L13.2812 4.10156C13.2812 4.01835 13.2774 3.93681 13.2692 3.85742L13.3984 3.85742C15.4199 3.85742 16.4258 4.87305 16.4258 6.92383Z" />
        <path d="M5.19531 6.09375L11.2305 6.09375C11.7969 6.09375 12.1387 5.73242 12.1387 5.12695L12.1387 4.10156C12.1387 3.49609 11.7969 3.13477 11.2305 3.13477L10.332 3.13477C10.2637 2.03125 9.3457 1.13281 8.21289 1.13281C7.08008 1.13281 6.16211 2.03125 6.09375 3.13477L5.19531 3.13477C4.62891 3.13477 4.28711 3.49609 4.28711 4.10156L4.28711 5.12695C4.28711 5.73242 4.62891 6.09375 5.19531 6.09375ZM8.21289 4.0625C7.74414 4.0625 7.36328 3.67188 7.36328 3.21289C7.36328 2.73438 7.74414 2.35352 8.21289 2.35352C8.68164 2.35352 9.0625 2.73438 9.0625 3.21289C9.0625 3.67188 8.68164 4.0625 8.21289 4.0625Z" />
        <path d="M3.90625 16.5137L12.5195 16.5137C12.8613 16.5137 13.1348 16.2402 13.1348 15.8984C13.1348 15.5664 12.8613 15.3027 12.5195 15.3027L3.90625 15.3027C3.56445 15.3027 3.29102 15.5664 3.29102 15.8984C3.29102 16.2402 3.56445 16.5137 3.90625 16.5137ZM3.90625 20.166L8.82812 20.166C9.16016 20.166 9.43359 19.8926 9.43359 19.5605C9.43359 19.2285 9.16992 18.9551 8.82812 18.9551L3.90625 18.9551C3.56445 18.9551 3.29102 19.2285 3.29102 19.5605C3.29102 19.8926 3.57422 20.166 3.90625 20.166ZM6.17188 13.7793C6.28906 13.7793 6.38672 13.7012 6.41602 13.5742C6.57227 12.5781 6.69922 12.0508 7.04102 11.7188C7.37305 11.377 7.91016 11.25 8.89648 11.084C9.02344 11.0645 9.10156 10.9668 9.10156 10.8496C9.10156 10.7324 9.02344 10.6348 8.89648 10.6152C7.91016 10.4492 7.37305 10.3223 7.04102 9.98047C6.69922 9.64844 6.57227 9.12109 6.41602 8.125C6.38672 7.99805 6.28906 7.91992 6.17188 7.91992C6.05469 7.91992 5.95703 7.99805 5.9375 8.125C5.77148 9.12109 5.64453 9.64844 5.30273 9.98047C4.9707 10.3223 4.44336 10.4492 3.44727 10.6152C3.33008 10.6348 3.24219 10.7324 3.24219 10.8496C3.24219 10.9668 3.33008 11.0645 3.44727 11.084C4.44336 11.25 4.9707 11.377 5.30273 11.7188C5.64453 12.0508 5.77148 12.5781 5.9375 13.5742C5.95703 13.7012 6.05469 13.7793 6.17188 13.7793Z" />
      </g>
    </svg>
  );
}

function StoreBadge({ store = "app", variant = "dark", disabled = false }) {
  const isApp = store === "app";
  const dark = variant === "dark";
  const bg = dark ? "#111" : "#FFFFFF";
  const fg = dark ? "#FFFFFF" : "#111";
  const subLabel = isApp
    ? disabled
      ? "Coming soon to"
      : "Download on the"
    : "GET IT ON";
  const mainLabel = isApp ? "App Store" : "Google Play";
  const onClick = disabled ? (e) => e.preventDefault() : undefined;
  return (
    <a
      href="#"
      onClick={onClick}
      aria-disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        background: bg,
        color: fg,
        padding: "10px 20px 10px 16px",
        borderRadius: 12,
        textDecoration: "none",
        minWidth: 156,
        position: "relative",
        opacity: disabled ? 0.45 : 1,
        cursor: disabled ? "not-allowed" : "pointer",
        pointerEvents: disabled ? "auto" : "auto",
      }}
    >
      <div style={{ flexShrink: 0 }}>
        {isApp ? (
          <svg width="24" height="24" viewBox="0 0 24 24" fill={fg}>
            <path d="M17.05 12.04c-.02-2.2 1.8-3.27 1.88-3.32-1.03-1.5-2.63-1.7-3.2-1.73-1.36-.14-2.66.8-3.35.8-.7 0-1.77-.78-2.9-.76-1.5.02-2.88.87-3.65 2.2-1.56 2.7-.4 6.7 1.12 8.9.75 1.07 1.64 2.28 2.8 2.24 1.13-.05 1.56-.73 2.92-.73 1.36 0 1.75.73 2.94.7 1.22-.02 1.98-1.09 2.72-2.17.86-1.24 1.21-2.45 1.23-2.51-.03-.01-2.36-.9-2.38-3.59zm-2.2-6.6c.62-.75 1.04-1.8.92-2.84-.89.03-1.98.6-2.62 1.35-.57.66-1.08 1.72-.94 2.74 1 .08 2.01-.5 2.64-1.25z" />
          </svg>
        ) : (
          <svg width="22" height="24" viewBox="0 0 22 24" fill={fg}>
            <path d="M.9 1.2C.5 1.6.3 2.2.3 3v18c0 .8.2 1.4.6 1.8l.1.1L11 12.5v-.2L.9 1.2zm13.4 11.7L2.9 24.2l13.1-7.4-1.7-3.9zM18.8 11l-3.5 2L12.1 10l3.2-2.8 3.5 2c1.2.7 1.2 1.9 0 1.8zM2.9-.2l11.4 6.5-3.2 2.8L2.9-.2z" />
          </svg>
        )}
      </div>
      <div style={{ lineHeight: 1, textAlign: "left" }}>
        <div
          style={{
            font: "500 9px/11px var(--font-pretendard)",
            opacity: 0.78,
            letterSpacing: 0.4,
            textTransform: isApp ? "none" : "uppercase",
          }}
        >
          {subLabel}
        </div>
        <div
          style={{ font: "700 16px/20px var(--font-pretendard)", marginTop: 2 }}
        >
          {mainLabel}
        </div>
      </div>
      {disabled && (
        <div
          style={{
            position: "absolute",
            top: -8,
            right: -8,
            background: LC.secondaryFixed,
            color: "#5E2C00",
            padding: "3px 8px",
            borderRadius: 9999,
            font: "700 9px/12px var(--font-pretendard)",
            letterSpacing: ".8px",
            textTransform: "uppercase",
            boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
          }}
        >
          출시 예정
        </div>
      )}
    </a>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Phone preview — compact fake of the actual mobile app

function PhoneFrame({ children, style = {} }) {
  return (
    <div
      style={{
        width: 320,
        height: 676,
        borderRadius: 44,
        padding: 6,
        background: "#111",
        boxShadow:
          "0 40px 80px rgba(13,78,21,0.22), 0 0 0 1px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.05)",
        position: "relative",
        ...style,
      }}
    >
      <div
        style={{
          width: "100%",
          height: "100%",
          borderRadius: 38,
          overflow: "hidden",
          background: LC.bg,
          position: "relative",
          display: "flex",
          flexDirection: "column",
        }}
      >
        {/* Dynamic island */}
        <div
          style={{
            position: "absolute",
            top: 10,
            left: "50%",
            transform: "translateX(-50%)",
            width: 96,
            height: 28,
            borderRadius: 20,
            background: "#000",
            zIndex: 30,
          }}
        />
        {/* Status bar */}
        <div
          style={{
            height: 44,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "12px 22px 0",
            font: "600 12px/14px var(--font-pretendard)",
            color: LC.text,
            flexShrink: 0,
          }}
        >
          <span>9:41</span>
          <span
            style={{ display: "inline-flex", gap: 4, alignItems: "center" }}
          >
            <svg width="14" height="9" viewBox="0 0 17 11">
              <rect x="0" y="7" width="3" height="4" rx=".6" fill={LC.text} />
              <rect
                x="4.5"
                y="4.5"
                width="3"
                height="6.5"
                rx=".6"
                fill={LC.text}
              />
              <rect x="9" y="2" width="3" height="9" rx=".6" fill={LC.text} />
              <rect
                x="13.5"
                y="0"
                width="3"
                height="11"
                rx=".6"
                fill={LC.text}
              />
            </svg>
            <svg width="20" height="9" viewBox="0 0 24 11">
              <rect
                x="0.5"
                y="0.5"
                width="20"
                height="10"
                rx="2.5"
                stroke={LC.text}
                strokeOpacity=".35"
                fill="none"
              />
              <rect x="2" y="2" width="17" height="7" rx="1.5" fill={LC.text} />
            </svg>
          </span>
        </div>
        {children}
        {/* Home indicator */}
        <div
          style={{
            position: "absolute",
            bottom: 7,
            left: "50%",
            transform: "translateX(-50%)",
            width: 110,
            height: 4,
            borderRadius: 9999,
            background: "rgba(0,0,0,0.26)",
            zIndex: 30,
          }}
        />
      </div>
    </div>
  );
}

function PhoneHomePreview() {
  return (
    <div style={{ flex: 1, overflow: "hidden", padding: "0 14px" }}>
      {/* Brand header */}
      <div
        style={{
          height: 40,
          display: "flex",
          alignItems: "center",
          paddingTop: 2,
        }}
      >
        <div
          style={{
            font: "800 18px/24px var(--font-pretendard)",
            color: LC.primary,
            letterSpacing: "-0.3px",
          }}
        >
          Recipeat
        </div>
      </div>
      {/* Hero copy */}
      <div style={{ marginTop: 8, marginBottom: 18 }}>
        <div
          style={{
            font: "700 9px/12px var(--font-pretendard)",
            letterSpacing: "1.2px",
            textTransform: "uppercase",
            color: LC.secondary,
          }}
        >
          오늘의 제안
        </div>
        <div
          style={{
            font: "800 26px/30px var(--font-pretendard)",
            letterSpacing: "-0.6px",
            color: LC.text,
            marginTop: 4,
          }}
        >
          오늘은 뭐 먹지?
        </div>
      </div>
      {/* Section header */}
      <div style={{ marginBottom: 10 }}>
        <div
          style={{
            font: "700 9px/12px var(--font-pretendard)",
            letterSpacing: "1.2px",
            textTransform: "uppercase",
            color: LC.secondary,
          }}
        >
          지금 바로
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "baseline",
            gap: 6,
            marginTop: 2,
          }}
        >
          <div
            style={{
              font: "800 20px/24px var(--font-pretendard)",
              letterSpacing: "-0.3px",
              color: LC.text,
            }}
          >
            만들 수 있어요
          </div>
          <div
            style={{
              font: "500 12px/16px var(--font-pretendard)",
              color: LC.textVar,
            }}
          >
            · 3개
          </div>
        </div>
      </div>
      {/* Featured rail */}
      <div
        style={{
          display: "flex",
          gap: 10,
          margin: "0 -14px",
          padding: "2px 14px 12px",
          overflow: "hidden",
        }}
      >
        <MiniFeatured
          title="김치볶음밥"
          creator="Recipeat"
          bg={LC.mint}
          overlay="rgba(13,99,27,0.72)"
          emoji="🍳"
          pct={100}
        />
        <MiniFeatured
          title="계란말이"
          creator="Recipeat"
          bg={LC.honey}
          overlay="rgba(115,78,0,0.66)"
          emoji="🥚"
          pct={100}
        />
      </div>
      {/* Partial section */}
      <div style={{ marginTop: 6, marginBottom: 8 }}>
        <div
          style={{
            font: "700 9px/12px var(--font-pretendard)",
            letterSpacing: "1.2px",
            textTransform: "uppercase",
            color: LC.secondary,
          }}
        >
          조금만
        </div>
        <div
          style={{
            font: "800 20px/24px var(--font-pretendard)",
            letterSpacing: "-0.3px",
            color: LC.text,
            marginTop: 2,
          }}
        >
          사면 돼요
        </div>
      </div>
      <MiniTrendingRow
        title="토마토 크림 파스타"
        creator="쿠킹하루"
        missing="생크림, 파마산"
        pct={83}
        bg={LC.peach}
        emoji="🍝"
      />
    </div>
  );
}

function MiniFeatured({ title, creator, bg, overlay, emoji, pct }) {
  return (
    <div
      style={{
        width: 188,
        flexShrink: 0,
        aspectRatio: "4/3",
        borderRadius: 16,
        overflow: "hidden",
        position: "relative",
        background: bg,
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 64,
          opacity: 0.24,
        }}
      >
        {emoji}
      </div>
      <div
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          height: "58%",
          background: `linear-gradient(to bottom, transparent, ${overlay})`,
        }}
      />
      <div
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          padding: 12,
        }}
      >
        <div
          style={{
            display: "inline-block",
            background: "#2E7D32",
            padding: "2px 7px",
            borderRadius: 9999,
            font: "700 9px/12px var(--font-pretendard)",
            letterSpacing: "1px",
            textTransform: "uppercase",
            color: "#fff",
            marginBottom: 6,
          }}
        >
          {pct}% 매칭
        </div>
        <div
          style={{
            font: "800 16px/20px var(--font-pretendard)",
            letterSpacing: "-0.3px",
            color: "#fff",
          }}
        >
          {title}
        </div>
        <div
          style={{
            font: "500 10px/14px var(--font-pretendard)",
            color: "rgba(255,255,255,.88)",
            marginTop: 2,
            display: "flex",
            alignItems: "center",
            gap: 3,
          }}
        >
          <span>{creator}</span>
          <VerifiedBadge size={11} color={LC.primaryFixed} style={{ verticalAlign: "0" }} />
        </div>
      </div>
    </div>
  );
}

function MiniTrendingRow({ title, creator, missing, pct, bg, emoji }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        padding: 10,
        borderRadius: 12,
        gap: 10,
        background: LC.surf1,
      }}
    >
      <div
        style={{
          width: 42,
          height: 42,
          borderRadius: 10,
          background: bg,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 22,
          flexShrink: 0,
        }}
      >
        {emoji}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            font: "700 13px/16px var(--font-pretendard)",
            color: LC.text,
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
        >
          {title}
        </div>
        <div
          style={{
            font: "500 10px/13px var(--font-pretendard)",
            color: LC.textVar,
            marginTop: 1,
          }}
        >
          {creator}
        </div>
        <div
          style={{
            font: "500 10px/13px var(--font-pretendard)",
            color: LC.secondary,
            marginTop: 2,
          }}
        >
          + {missing}
        </div>
      </div>
      <div
        style={{
          background: LC.secondaryFixed,
          color: "#5E2C00",
          padding: "3px 8px",
          borderRadius: 9999,
          font: "600 11px/14px var(--font-pretendard)",
          fontVariantNumeric: "tabular-nums",
        }}
      >
        {pct}%
      </div>
    </div>
  );
}

function PhoneFridgePreview() {
  return (
    <div style={{ flex: 1, overflow: "hidden", padding: "0 14px" }}>
      <div style={{ marginTop: 10, marginBottom: 14 }}>
        <div
          style={{
            font: "700 9px/12px var(--font-pretendard)",
            letterSpacing: "1.2px",
            textTransform: "uppercase",
            color: LC.secondary,
          }}
        >
          내 재료
        </div>
        <div
          style={{
            font: "800 26px/30px var(--font-pretendard)",
            letterSpacing: "-0.6px",
            color: LC.text,
            marginTop: 4,
          }}
        >
          내 냉장고
        </div>
      </div>
      <div
        style={{
          display: "flex",
          gap: 6,
          padding: 6,
          borderRadius: 16,
          background: LC.surf2,
          marginBottom: 14,
        }}
      >
        <MiniStat l="보유" v={8} c={LC.primary} />
        <MiniStat l="소진" v={2} c={LC.secondary} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {[
          { n: "마늘", e: "🧄", t: "3일 전 추가 · 조미료" },
          { n: "대파", e: "🥬", t: "어제 추가 · 채소" },
          { n: "계란", e: "🥚", t: "오늘 추가 · 기타" },
          { n: "김치", e: "🥬", t: "2일 전 추가 · 채소" },
        ].map((x) => (
          <MiniFridgeRow key={x.n} {...x} />
        ))}
      </div>
    </div>
  );
}

function MiniStat({ l, v, c }) {
  return (
    <div
      style={{ flex: 1, padding: 10, borderRadius: 12, background: LC.surf1 }}
    >
      <div
        style={{
          font: "700 9px/12px var(--font-pretendard)",
          letterSpacing: "1.2px",
          textTransform: "uppercase",
          color: LC.textVar,
        }}
      >
        {l}
      </div>
      <div
        style={{
          font: "800 22px/26px var(--font-pretendard)",
          letterSpacing: "-0.4px",
          color: c,
          fontVariantNumeric: "tabular-nums",
          marginTop: 2,
        }}
      >
        {v}
      </div>
    </div>
  );
}

function MiniFridgeRow({ n, e, t }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        padding: 8,
        borderRadius: 14,
        gap: 10,
        background: LC.surf1,
      }}
    >
      <div
        style={{
          width: 36,
          height: 36,
          borderRadius: 10,
          background: LC.surf3,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 20,
          flexShrink: 0,
        }}
      >
        {e}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            font: "700 13px/16px var(--font-pretendard)",
            color: LC.text,
          }}
        >
          {n}
        </div>
        <div
          style={{
            font: "500 10px/13px var(--font-pretendard)",
            color: LC.textVar,
            marginTop: 1,
          }}
        >
          {t}
        </div>
      </div>
    </div>
  );
}

function PhoneRecipePreview() {
  return (
    <div
      style={{
        flex: 1,
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div
        style={{
          aspectRatio: "4/3",
          background: LC.mint,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 110,
          color: "rgba(27,28,27,0.22)",
          position: "relative",
          flexShrink: 0,
        }}
      >
        🍳
        <div
          style={{
            position: "absolute",
            top: 42,
            left: 12,
            width: 34,
            height: 34,
            borderRadius: 9999,
            background: "rgba(255,255,255,0.88)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path
              d="M15 6l-6 6 6 6"
              stroke={LC.text}
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </div>
      </div>
      <div style={{ padding: "16px 14px" }}>
        <div
          style={{
            display: "inline-flex",
            padding: "4px 10px",
            borderRadius: 9999,
            background: "#E8F5EC",
            color: LC.primary,
            font: "600 11px/14px var(--font-pretendard)",
            fontVariantNumeric: "tabular-nums",
          }}
        >
          100% 매칭 · 모든 재료 있음
        </div>
        <div
          style={{
            font: "800 24px/28px var(--font-pretendard)",
            letterSpacing: "-0.6px",
            color: LC.text,
            marginTop: 10,
          }}
        >
          김치볶음밥
        </div>
        <div
          style={{
            font: "500 12px/16px var(--font-pretendard)",
            color: LC.textVar,
            marginTop: 4,
            display: "flex",
            alignItems: "center",
            gap: 4,
          }}
        >
          <span>Recipeat</span>
          <VerifiedBadge size={13} color={LC.primary} style={{ verticalAlign: "0" }} />
          <span>· 15분 · 1인분</span>
        </div>
        <div style={{ marginTop: 16 }}>
          <div
            style={{
              font: "700 9px/12px var(--font-pretendard)",
              letterSpacing: "1.2px",
              textTransform: "uppercase",
              color: LC.secondary,
            }}
          >
            재료
          </div>
          <div
            style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6 }}
          >
            {["🥬 김치", "🍚 밥", "🥚 계란", "🧄 마늘", "🧂 참기름"].map(
              (x) => (
                <div
                  key={x}
                  style={{
                    padding: "5px 10px",
                    borderRadius: 9999,
                    background: "#E8F5EC",
                    color: LC.primary,
                    font: "600 11px/14px var(--font-pretendard)",
                    whiteSpace: "nowrap",
                  }}
                >
                  {x}
                </div>
              ),
            )}
          </div>
        </div>
        <div style={{ marginTop: 14 }}>
          <div
            style={{
              font: "700 9px/12px var(--font-pretendard)",
              letterSpacing: "1.2px",
              textTransform: "uppercase",
              color: LC.secondary,
            }}
          >
            만드는 법
          </div>
          {[
            "달군 팬에 참기름을 두르고 다진 마늘을 볶아요.",
            "김치를 넣고 2분간 볶다가 밥을 넣어 섞어요.",
          ].map((s, i) => (
            <div
              key={i}
              style={{
                display: "flex",
                gap: 8,
                padding: 10,
                borderRadius: 12,
                background: LC.surf1,
                marginTop: 6,
              }}
            >
              <div
                style={{
                  width: 20,
                  height: 20,
                  borderRadius: 9999,
                  background: LC.primary,
                  color: "#fff",
                  flexShrink: 0,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  font: "800 11px/11px var(--font-pretendard)",
                }}
              >
                {i + 1}
              </div>
              <div
                style={{
                  font: "500 12px/16px var(--font-pretendard)",
                  color: LC.text,
                }}
              >
                {s}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  NavBar,
  AppMark,
  StoreBadge,
  PhoneFrame,
  PhoneHomePreview,
  PhoneFridgePreview,
  PhoneRecipePreview,
});
