"use client";
import { CheckCircle, XCircle } from "lucide-react";

export default function Outcomes() {
  return (
    <section className="max-w-5xl mx-auto px-6 py-24">
      <p className="font-mono text-[18px] text-[#3fb950] uppercase tracking-[0.12em] mb-4">
        Outcomes
      </p>
      <h2
        className="font-serif text-white font-normal leading-[1.12] mb-12"
        style={{ fontSize: "clamp(32px, 4vw, 48px)" }}
      >
        What happens to
        <br />
        your ETH?
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <div
          className="rounded-xl p-8 border"
          style={{
            background: "rgba(63,185,80,0.04)",
            borderColor: "rgba(63,185,80,0.2)",
          }}
        >
          <p className="font-mono text-[13px] text-[#3fb950] uppercase tracking-widest mb-5 flex items-center gap-2">
            <CheckCircle size={20} />
            You complete 30 days
          </p>
          {[
            "Full ETH stake returned to your wallet",
            "On-chain badge minted to your address",
            "No fees. No deductions. Yours entirely.",
          ].map((item) => (
            <div key={item} className="flex items-start gap-3 mb-3 text-sm text-[#768390]">
              <span className="mt-0.5 text-[#768390]">→</span>
              <span className="text-[20px]">{item}</span>
            </div>
          ))}
        </div>

        
        <div
          className="rounded-xl p-8 border"
          style={{
            background: "rgba(248,81,73,0.04)",
            borderColor: "rgba(248,81,73,0.2)",
          }}
        >
          <p className="font-mono text-[13px] text-[#f85149] uppercase tracking-widest mb-5 flex items-center gap-2">
            <XCircle size={20} />
            You miss a day
          </p>
          {[
            "ETH locked inside the contract",
            "Streak counter resets to zero",
            "Must restart and complete a new 30-day run to unlock",
          ].map((item) => (
            <div key={item} className="flex items-start gap-3 mb-3 text-sm text-[#768390]">
              <span className="mt-0.5 text-[#768390]">→</span>
              <span className="text-[20px]">{item}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
