import { LightbulbIcon, TargetIcon, Sparkles } from "lucide-react";
import { Card } from "@/components/ui/card";
import { useTranslate } from "@/utils/i18n";
import ChrysanthemumFlower from "@/components/ChrysanthemumFlower";

const AboutCuCu = () => {
  const t = useTranslate();

  return (
    <section className="@container w-full max-w-3xl mx-auto min-h-full flex flex-col justify-start items-start gap-6 py-8">
      <header className="w-full flex flex-col gap-2">
        {/* Brand header with chrysanthemum flowers */}
        <div className="flex items-center gap-3 mb-1">
          <ChrysanthemumFlower size={48} animate color="#FFD700" />
          <div className="flex flex-col">
            <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
              <LightbulbIcon className="w-6 h-6 text-primary" />
              <span>CuCu Note là gì?</span>
            </h1>
            <p className="text-xs text-amber-500/80 font-medium italic">
              "Cúc" — hoa cúc vàng, loài hoa tượng trưng cho sự thanh bình và trí nhớ bền vững.
            </p>
          </div>
          <ChrysanthemumFlower size={36} animate color="#FFA500" rotate={45} />
        </div>
        <p className="text-sm text-muted-foreground">
          Sổ nháp số để bạn ghi nhanh suy nghĩ, chia sẻ cho người khác xem và góp ý, trước khi biến chúng thành ghi chú hoàn chỉnh ở bất kỳ đâu.
        </p>
      </header>

      <div className="w-full grid gap-4 md:grid-cols-2">
        <Card className="p-4 flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <TargetIcon className="w-5 h-5 text-primary" />
            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Tầm nhìn</h2>
          </div>
          <p className="text-sm text-foreground">
            CuCu là nơi đầu tiên mọi ý tưởng xuất hiện: một nơi nhẹ, mở ra là gõ được ngay, giúp bạn không bao giờ bỏ lỡ suy nghĩ quan trọng nào trong ngày.
          </p>
        </Card>

        <Card className="p-4 flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <Sparkles className="w-5 h-5 text-primary" />
            <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Sứ mệnh</h2>
          </div>
          <ul className="text-sm text-foreground space-y-1 list-disc list-inside">
            <li>Ghi nhanh – mở là gõ, không cần nghĩ về folder hay cấu trúc.</li>
            <li>Nhóm dễ – dùng <code className="px-1 py-0.5 rounded bg-muted text-xs">#tag</code> ngay trong nội dung, bấm 1 cái là thấy tất cả note cùng chủ đề.</li>
            <li>Chia sẻ gọn – gửi link cho người khác xem và comment, chốt ý tưởng trước khi viết bản hoàn chỉnh.</li>
          </ul>
        </Card>
      </div>

      <Card className="w-full p-4 flex flex-col gap-3">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground flex items-center gap-2">
          <span>Cách sử dụng cơ bản</span>
        </h2>
        <ol className="text-sm text-foreground space-y-2 list-decimal list-inside">
          <li>
            <span className="font-medium">Ghi note:</span> Gõ bất kỳ điều gì bạn đang nghĩ vào ô <code className="px-1 py-0.5 rounded bg-muted text-xs">Any thoughts…</code>. Dùng
            <code className="px-1 py-0.5 rounded bg-muted text-xs mx-1">#tag</code>
            để gắn chủ đề, ví dụ <code className="px-1 py-0.5 rounded bg-muted text-xs">#work</code>,{" "}
            <code className="px-1 py-0.5 rounded bg-muted text-xs">#kafka</code>,{" "}
            <code className="px-1 py-0.5 rounded bg-muted text-xs">#idea/side-project</code>.
          </li>
          <li>
            <span className="font-medium">Tìm lại:</span> Lọc theo ngày ở Home, hoặc mở một note và bấm vào tag để xem toàn bộ ghi chú cùng chủ đề.
          </li>
          <li>
            <span className="font-medium">Chia sẻ & nhận feedback:</span> Sao chép link ghi chú để gửi cho người khác. Họ có thể bình luận công khai hoặc riêng tư để góp ý cho
            ý tưởng của bạn.
          </li>
        </ol>
      </Card>

      <Card className="w-full p-4 flex flex-col gap-3">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground flex items-center gap-2">
          <span>CuCu khác gì so với các ứng dụng khác?</span>
        </h2>
        <ul className="text-sm text-foreground space-y-2 list-disc list-inside">
          <li>
            <span className="font-medium">So với Google Docs / Notion:</span> CuCu không phải nơi viết tài liệu dài và phức tạp, mà là{" "}
            <span className="font-semibold">quyển nháp</span> – mở là gõ, không cần tạo page, database hay template.
          </li>
          <li>
            <span className="font-medium">So với app ghi chú siêu nhẹ (Keep, Apple Notes…):</span> CuCu vẫn có{" "}
            <span className="font-semibold">tag trong nội dung</span>, shortcut lọc nhanh và comment/share, nên dùng được cho việc
            nháp chung với người khác.
          </li>
          <li>
            <span className="font-medium">So với app PKM nặng (Obsidian, Logseq…):</span> CuCu cố ý không có graph, folder, plugin phức tạp –{" "}
            <span className="font-semibold">chỉ giữ lại những thứ giúp ghi & xem lại trong ngày/tuần</span>.
          </li>
          <li>
            <span className="font-medium">AI trong CuCu:</span> chỉ dùng để <span className="font-semibold">tìm lại ghi chú</span> theo ngày/chủ đề, không bịa nội dung mới – đúng
            tinh thần “AI đọc sổ nháp của bạn, không viết thay bạn”.
          </li>
        </ul>
      </Card>
    </section>
  );
};

export default AboutCuCu;