"use client";
import { useEffect, useRef } from "react";
import { Clock, Lock, CheckCircle } from "lucide-react";

const features = [
  {
    icon: Clock,
    iconBg: "bg-[#1a3a22]",
    iconColor: "text-[#3fb950]",
    title: "Midnight UTC Cutoff",
    desc: "The oracle snapshot runs at exactly 00:00 UTC. A commit must exist in any public repository on your account to pass. Timezone excuses don't work here.",
  },
  {
    icon: Clock,
    iconBg: "bg-[#1a3a22]",
    iconColor: "text-[#3fb950]",
    title: "Clock OAuth Verification",
    desc: "Your Clock account is cryptographically tied to your wallet address at stake time. No account switching, no loopholes.",
  },
  {
    icon: Lock,
    iconBg: "bg-[rgba(248,81,73,0.1)]",
    iconColor: "text-[#f85149]",
    title: "ETH Locked on Miss",
    desc: "Miss a single day and your ETH moves to a locked state inside the contract. It stays there until you restart and complete a fresh 30-day challenge.",
  },
  {
    icon: CheckCircle,
    iconBg: "bg-[#1a3a22]",
    iconColor: "text-[#3fb950]",
    title: "Instant Refund on Completion",
    desc: "Day 30 confirmed? The smart contract automatically releases your ETH back to your wallet. No waiting, no manual claims, no trust required.",
  },
];

export default function Rules() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            (e.target as HTMLElement).style.opacity = "1";
            (e.target as HTMLElement).style.transform = "translateY(0)";
          }
        });
      },
      { threshold: 0.1 }
    );
    ref.current?.querySelectorAll(".reveal").forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section id="rules" className="max-w-5xl mx-auto px-6 py-24" ref={ref}>
      <div className="mb-14">
        <p className="font-mono text-[18px] text-[#3fb950] uppercase tracking-[0.12em] mb-4">
          Rules of Engagement
        </p>
        <h2
          className="font-serif text-white font-normal leading-[1.12] mb-4"
          style={{ fontSize: "clamp(32px, 4vw, 48px)" }}
        >
          Designed to be hard
          <br />
          On purpose.
        </h2>
        <p className="text-white text-base max-w-md leading-relaxed">
          GitStake isn't a productivity app. It's a commitment device with real
          financial consequences
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {features.map((f, i) => {
          const Icon = f.icon;
          return (
            <div
              key={f.title}
              className="reveal bg-[#0d1117] border border-[#1c2128] rounded-xl p-8 hover:border-[#2d3748] transition-colors"
              style={{
                opacity: 0,
                transform: "translateY(16px)",
                transition: `opacity 0.5s ease ${i * 0.1}s, transform 0.5s ease ${i * 0.1}s`,
              }}
            >
              <div
                className={`w-10 h-10 rounded-lg flex items-center justify-center mb-4 ${f.iconBg}`}
              >
                <Icon size={18} className={f.iconColor} />
              </div>
              <h3 style={{fontFamily:"sans-serif"}} className="text-base text-[20px] text-white font-semibold mb-2">{f.title}</h3>
              <p className="text-sm text-[#768390] text-[20px] leading-relaxed">{f.desc}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}
