App icon (WaveMark)

"use client";

import { WAVE_MARK_TONES, WaveMark, WaveWordmark } from "@waveinno/ui";

export default function BrandExample() {
  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-end gap-5">
        <WaveMark size="2xl" />
        <WaveMark size="xl" />
        <WaveMark size="lg" />
        <WaveMark />
        <WaveMark size="sm" />
      </div>
      <div className="grid grid-cols-4 gap-4 sm:grid-cols-7">
        {WAVE_MARK_TONES.map((tone) => (
          <figure key={tone} className="flex flex-col items-center gap-2">
            <div className={tone === "glass" ? "rounded-[18px] bg-[linear-gradient(135deg,#1437d3,#7560fd)] p-2" : "p-2"}>
              <WaveMark size="xl" tone={tone} />
            </div>
            <figcaption className="text-[11.5px] text-muted">{tone}</figcaption>
          </figure>
        ))}
      </div>
      <div className="grid grid-cols-4 gap-4 sm:grid-cols-7">
        {WAVE_MARK_TONES.map((tone) => (
          <figure key={tone} className="flex flex-col items-center gap-2">
            <div className={tone === "glass" ? "rounded-full bg-[linear-gradient(135deg,#1437d3,#7560fd)] p-2" : "p-2"}>
              <WaveMark size="xl" tone={tone} shape="round" />
            </div>
            <figcaption className="text-[11.5px] text-muted">{tone} · round</figcaption>
          </figure>
        ))}
      </div>
      <p className="pt-2 text-[12px] font-semibold uppercase tracking-[0.08em] text-muted">3D — for launch screens, store pages, onboarding</p>
      <div className="grid grid-cols-4 gap-4 sm:grid-cols-7">
        {WAVE_MARK_TONES.map((tone) => (
          <figure key={tone} className="flex flex-col items-center gap-2">
            <div className={tone === "glass" ? "rounded-[22px] bg-[linear-gradient(135deg,#1437d3,#7560fd)] p-2.5" : "p-2.5"}>
              <WaveMark size="2xl" tone={tone} effect="3d" />
            </div>
            <figcaption className="text-[11.5px] text-muted">{tone} · 3d</figcaption>
          </figure>
        ))}
      </div>
      <div className="flex flex-wrap items-end gap-5">
        <WaveMark size="2xl" tone="aurora" effect="3d" shape="round" />
        <WaveMark size="xl" tone="brand" effect="3d" shape="round" />
        <WaveMark size="lg" tone="light" effect="3d" shape="round" />
        <WaveMark size="md" tone="midnight" effect="3d" />
      </div>
      <p className="pt-2 text-[12px] font-semibold uppercase tracking-[0.08em] text-muted">Animated — shine · float · pulse · flip</p>
      <div className="flex flex-wrap items-center gap-10 py-3">
        <figure className="flex flex-col items-center gap-3">
          <WaveMark size="2xl" tone="brand" effect="3d" animate="shine" />
          <figcaption className="text-[11.5px] text-muted">shine — splash, sign-in</figcaption>
        </figure>
        <figure className="flex flex-col items-center gap-3">
          <WaveMark size="2xl" tone="aurora" effect="3d" animate="float" />
          <figcaption className="text-[11.5px] text-muted">float — empty states</figcaption>
        </figure>
        <figure className="flex flex-col items-center gap-3">
          <WaveMark size="xl" tone="royal" shape="round" animate="pulse" />
          <figcaption className="text-[11.5px] text-muted">pulse — live, connecting</figcaption>
        </figure>
        <figure className="flex flex-col items-center gap-3">
          <WaveMark size="xl" tone="midnight" effect="3d" animate="flip" />
          <figcaption className="text-[11.5px] text-muted">flip — branded loader</figcaption>
        </figure>
      </div>
      <WaveWordmark suffix="Playground" />
    </div>
  );
}