import { useState } from 'react';

type Step = 'initial' | 'confirm1' | 'confirm2' | 'confirm3' | 'confirm4' | 'confirm5' | 'final';

// Floating hearts data
const hearts = [
  { x: '8%', t: '11s' },
  { x: '18%', t: '9s' },
  { x: '30%', t: '13s' },
  { x: '42%', t: '10s' },
  { x: '55%', t: '12s' },
  { x: '66%', t: '9.5s' },
  { x: '78%', t: '12.5s' },
  { x: '90%', t: '10.5s' },
];

// Confirmation step data - 5 steps with increasing urgency
const confirmationSteps = [
  {
    title: "Are you sure? 🥺",
    message: "Like… really sure you want to say \"No\" to this?",
    tip: "Think again... my heart is waiting!",
    yesText: "Okay, YES! 💕",
    noText: "I'm sure",
  },
  {
    title: "Please say yes! 💔",
    message: "You're breaking my heart here... Are you absolutely certain?",
    tip: "The Yes button is right there...",
    yesText: "Fine, YES! 💖",
    noText: "Still no",
  },
  {
    title: "Pretty please? 🙏",
    message: "I promise to make you smile every day. Won't you reconsider?",
    tip: "Just one little click on Yes...",
    yesText: "Okay okay, YES! 💗",
    noText: "Nope",
  },
  {
    title: "Last chance! 😢",
    message: "My heart can only take so much rejection. Please?",
    tip: "The Yes button is getting bigger for a reason!",
    yesText: "YESSS! 💝",
    noText: "No...",
  },
  {
    title: "I won't give up! 💪❤️",
    message: "You've clicked No 5 times but my love is stronger! There's only one right answer now...",
    tip: "You know what to do! 😉",
    yesText: "YES YES YES! 💘",
    noText: "...",
  },
];

// Yes button sizes that increase with each step
const yesSizes = [
  "py-3 px-5 text-base min-w-[150px]",
  "py-3.5 px-6 text-lg min-w-[170px]",
  "py-4 px-8 text-xl min-w-[200px]",
  "py-5 px-10 text-2xl min-w-[240px]",
  "py-6 px-12 text-3xl min-w-[300px]",
];

function FloatingHearts() {
  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
      {hearts.map((heart, i) => (
        <span
          key={i}
          className="absolute bottom-[-40px] w-[18px] h-[18px] bg-white/60 rotate-45 rounded animate-float-up"
          style={{
            left: heart.x,
            animationDuration: heart.t,
            animationDelay: `${i * 0.5}s`,
          }}
        >
          <span className="absolute w-[18px] h-[18px] bg-white/60 rounded-full -left-[9px] top-0" />
          <span className="absolute w-[18px] h-[18px] bg-white/60 rounded-full left-0 -top-[9px]" />
        </span>
      ))}
    </div>
  );
}

function Heart({ className = '' }: { className?: string }) {
  return (
    <div
      className={`w-[86px] h-[86px] mx-auto mb-4 mt-1.5 bg-gradient-to-br from-[#ff2e88] to-[#ff4fa0] rotate-45 rounded-2xl relative shadow-[0_16px_35px_rgba(255,46,136,0.35)] animate-beat ${className}`}
    >
      <span className="absolute w-[86px] h-[86px] bg-gradient-to-br from-[#ff2e88] to-[#ff4fa0] rounded-full -left-[43px] top-0" />
      <span className="absolute w-[86px] h-[86px] bg-gradient-to-br from-[#ff2e88] to-[#ff4fa0] rounded-full left-0 -top-[43px]" />
    </div>
  );
}

function YesButton({ onClick, className = '', children }: { onClick: () => void; className?: string; children: React.ReactNode }) {
  return (
    <button
      onClick={onClick}
      className={`border-0 rounded-full font-extrabold cursor-pointer transition-all duration-200 shadow-[0_10px_20px_rgba(0,0,0,0.08)] hover:-translate-y-1 hover:brightness-[1.05] hover:shadow-[0_15px_30px_rgba(255,46,136,0.35)] active:translate-y-0.5 bg-gradient-to-br from-[#ff2e88] to-[#ff6fb1] text-white ${className}`}
    >
      {children}
    </button>
  );
}

function NoButton({ onClick, children, className = '' }: { onClick: () => void; children: React.ReactNode; className?: string }) {
  return (
    <button
      onClick={onClick}
      className={`border-2 border-[rgba(255,46,136,0.25)] rounded-full py-3 px-[18px] font-extrabold cursor-pointer text-base transition-all duration-150 shadow-[0_10px_20px_rgba(0,0,0,0.08)] hover:-translate-y-0.5 hover:brightness-[1.03] active:translate-y-0.5 bg-white/85 text-[#7a0047] min-w-[100px] ${className}`}
    >
      {children}
    </button>
  );
}

function InitialStep({ onYes, onNo }: { onYes: () => void; onNo: () => void }) {
  return (
    <section className="text-center">
      <Heart />
      <h1 className="m-0 mb-2.5 text-[clamp(28px,4.4vw,44px)] tracking-[0.2px] text-[#4a0030]">
        Jai, will you be my Valentine?
      </h1>
      <p className="mx-auto mb-[18px] text-[17px] leading-[1.45] max-w-[52ch] opacity-90 text-[#4a0030]">
        I have something sweet to ask you today. Choose carefully.
      </p>
      <div className="flex gap-3 justify-center flex-wrap mt-3.5">
        <YesButton onClick={onYes} className="py-3 px-5 text-base min-w-[140px]">Yes</YesButton>
        <NoButton onClick={onNo}>No</NoButton>
      </div>
      <p className="mt-3.5 text-[13px] opacity-80 text-[#4a0030]">
        Tip: This page is made only for Jai.
      </p>
    </section>
  );
}

function ConfirmationStep({ 
  stepIndex, 
  onYes, 
  onNo 
}: { 
  stepIndex: number; 
  onYes: () => void; 
  onNo: () => void;
}) {
  const step = confirmationSteps[stepIndex];
  const yesSize = yesSizes[stepIndex];
  
  return (
    <section className="text-center">
      <Heart />
      <h1 className="m-0 mb-2.5 text-[clamp(28px,4.4vw,44px)] tracking-[0.2px] text-[#4a0030]">
        {step.title}
      </h1>
      <p className="mx-auto mb-[18px] text-[17px] leading-[1.45] max-w-[52ch] opacity-90 text-[#4a0030]">
        {step.message}
      </p>
      <div className="flex gap-4 justify-center items-center flex-wrap mt-5">
        <YesButton onClick={onYes} className={yesSize}>
          {step.yesText}
        </YesButton>
        {stepIndex < 4 && (
          <NoButton onClick={onNo} className="text-sm py-2 px-4 opacity-70 hover:opacity-100">
            {step.noText}
          </NoButton>
        )}
      </div>
      <p className="mt-4 text-[13px] opacity-80 text-[#4a0030]">
        {step.tip}
      </p>
      <div className="mt-3 flex justify-center gap-1">
        {[0, 1, 2, 3, 4].map((i) => (
          <span
            key={i}
            className={`w-2 h-2 rounded-full transition-all ${
              i <= stepIndex ? 'bg-[#ff2e88]' : 'bg-[#ff2e88]/30'
            }`}
          />
        ))}
      </div>
    </section>
  );
}

function FinalStep({ onRestart }: { onRestart: () => void }) {
  return (
    <section className="text-center">
      <Heart />
      <h1 className="m-0 mb-2.5 text-[clamp(28px,4.4vw,44px)] tracking-[0.2px] text-[#4a0030]">
        Yay, Jai! 🎉💕
      </h1>
      <p className="mx-auto mb-[18px] text-[17px] leading-[1.45] max-w-[52ch] opacity-90 text-[#4a0030]">
        You just turned my Valentine's Day into my favorite day!
      </p>
      <div className="text-left max-w-[60ch] mx-auto bg-white/65 border border-white/60 rounded-[18px] p-4">
        <p className="my-2.5 leading-[1.55] text-[#4a0030]">
          Jai, I like you in the quiet moments and in the loud ones.
          In the silly conversations, in the long talks, and even in the comfortable silence.
        </p>
        <p className="my-2.5 leading-[1.55] text-[#4a0030]">
          If love is a choice, then I'm choosing you—today and every day I get the chance.
        </p>
        <p className="my-2.5 leading-[1.55] text-[#4a0030]">
          Happy Valentine's Day, Jai. Let's make this one unforgettable. 💝
        </p>
        <p className="font-extrabold mt-3 text-[#7a0047]">
          With love. ❤️
        </p>
      </div>
      <div className="flex gap-3 justify-center flex-wrap mt-4">
        <YesButton onClick={onRestart} className="py-3 px-5 text-base min-w-[140px]">Replay 🔄</YesButton>
      </div>
    </section>
  );
}

export function App() {
  const [currentStep, setCurrentStep] = useState<Step>('initial');

  const handleNo = () => {
    switch (currentStep) {
      case 'initial':
        setCurrentStep('confirm1');
        break;
      case 'confirm1':
        setCurrentStep('confirm2');
        break;
      case 'confirm2':
        setCurrentStep('confirm3');
        break;
      case 'confirm3':
        setCurrentStep('confirm4');
        break;
      case 'confirm4':
        setCurrentStep('confirm5');
        break;
      default:
        break;
    }
  };

  const handleYes = () => {
    setCurrentStep('final');
  };

  const handleRestart = () => {
    setCurrentStep('initial');
  };

  const getConfirmIndex = (): number => {
    switch (currentStep) {
      case 'confirm1': return 0;
      case 'confirm2': return 1;
      case 'confirm3': return 2;
      case 'confirm4': return 3;
      case 'confirm5': return 4;
      default: return 0;
    }
  };

  return (
    <div className="min-h-screen grid place-items-center p-4 bg-gradient-to-br from-[#ffb6d5] to-[#ff6fb1] relative overflow-hidden">
      {/* Radial gradient overlays */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute w-[1200px] h-[600px] top-[15%] left-[20%] -translate-x-1/2 bg-[radial-gradient(ellipse_at_center,#ffe0ef_0%,transparent_60%)]" />
        <div className="absolute w-[900px] h-[500px] top-[20%] left-[80%] -translate-x-1/2 bg-[radial-gradient(ellipse_at_center,#ffd1e6_0%,transparent_55%)]" />
      </div>

      <FloatingHearts />

      <div className="w-[min(720px,92vw)] relative z-10">
        <div className="bg-white/80 backdrop-blur-lg border border-white/50 rounded-[26px] shadow-[0_18px_50px_rgba(170,0,90,0.25)] py-7 px-5">
          {currentStep === 'initial' && (
            <InitialStep onYes={handleYes} onNo={handleNo} />
          )}
          {(currentStep === 'confirm1' || currentStep === 'confirm2' || currentStep === 'confirm3' || currentStep === 'confirm4' || currentStep === 'confirm5') && (
            <ConfirmationStep 
              stepIndex={getConfirmIndex()} 
              onYes={handleYes} 
              onNo={handleNo} 
            />
          )}
          {currentStep === 'final' && (
            <FinalStep onRestart={handleRestart} />
          )}
        </div>
      </div>
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>