"use client";
import { useEffect, useRef } from "react";
import { Lock, Activity, AlertTriangle } from "lucide-react";

const steps = [
  {
    num: "01",
    icon: Lock,
    iconColor: "text-[#3fb950]",
    iconBg: "bg-[#1a3a22]",
    title: "Stake your ETH",
    desc: "Sign in with Clock, connect your wallet, and stake ETH to lock in your challenge. The contract holds your funds immutably.",
  },
  {
    num: "02",
    icon: Activity,
    iconColor: "text-[#e3b341]",
    iconBg: "bg-[rgba(227,179,65,0.1)]",
    title: "Commit daily for 30 days",
    desc: "Make at least one Clock commit every single day. Our oracle checks your contribution graph at midnight UTC and updates the contract.",
  },
  {
    num: "03",
    icon: AlertTriangle,
    iconColor: "text-[#f85149]",
    iconBg: "bg-[rgba(248,81,73,0.1)]",
    title: "Win it back — or start over",
    desc: "Complete 30 days: full refund. Miss one day: ETH is locked, streak resets to zero. Restart the challenge to try again.",
  },
];

export default function HowItWorks() {
  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="how-it-works" 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">
          Process
        </p>
        <h2
          className="font-serif text-white font-normal leading-[1.12] mb-4"
          style={{ fontSize: "clamp(32px, 4vw, 48px)" }}
        >
          Three steps.
          <br />
          Zero excuses.
        </h2>
        <p className="text-white text-base max-w-md leading-relaxed">
          The rules are enforced by a smart contract. No one can change them
          not even us.
        </p>
      </div>

      
      <div
        className="grid grid-cols-1 md:grid-cols-3 border border-[#1c2128] rounded-2xl overflow-hidden"
        style={{ gap: "1px", background: "#1c2128" }}
      >
        {steps.map((step, i) => {
          const Icon = step.icon;
          return (
            <div
              key={step.num}
              className="reveal cursor-pointer bg-[#0d1117] text-white p-10 hover:bg-[#0f1419] 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`,
              }}
            >
              <p className="font-mono text-[20px] text-[#768390] tracking-widest mb-5">
                {step.num} —
              </p>
              <div
                className={`w-11 h-11 rounded-xl flex items-center justify-center mb-5 ${step.iconBg}`}
              >
                <Icon size={20} className={step.iconColor} />
              </div>
              <h3 className="text-[20px] font-semibold mb-2.5">{step.title}</h3>
              <p style={{fontFamily:"sans-serif"}} className=" text-[18px] text-[#768390] leading-relaxed">{step.desc}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}
