PrivyDrop/frontend/components/web/HowItWorks.tsx

import React from 'react';
import { Button } from '@/components/ui/button';
import Image from 'next/image'
import type { Messages } from '@/types/messages';

interface PageContentProps {
  messages: Messages;
}

export default function HowItWorks({ messages }: PageContentProps){

  const steps = [
    {
      number: 1,
      title: messages!.text.HowItWorks.step1_title,
      description: messages!.text.HowItWorks.step1_description
    },
    {
      number: 2,
      title: messages!.text.HowItWorks.step2_title,
      description: messages!.text.HowItWorks.step2_description
    },
    {
      number: 3,
      title: messages!.text.HowItWorks.step3_title,
      description: messages!.text.HowItWorks.step3_description
    }
  ];
  
  return (
    <section className="max-w-6xl mx-auto px-4 py-16">
      {/* Header Section */}
      <div className="text-center mb-16">
        <h2 className="text-3xl md:text-4xl font-bold mb-6">{messages.text.HowItWorks.h2}</h2>
        <p className="text-gray-600 mb-8">{messages.text.HowItWorks.h2_P}</p>
        <Button 
          className="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white rounded-full px-8 py-6 text-lg"
        >
          {messages.text.HowItWorks.btn_try}
        </Button>
      </div>

      {/* Steps Container */}
      <div className="flex flex-col md:flex-row justify-between items-start gap-16">
        {/* Left Side - Steps */}
        <div className="w-full md:w-1/2 relative">
          {/* Vertical Line */}
          <div className="absolute left-6 top-8 bottom-8 w-0.5 bg-blue-500"></div>

          {/* Steps List */}
          <div className="space-y-16">
            {steps.map((step) => (
              <div key={step.number} className="flex gap-6 items-start">
                <div className="relative z-10">
                  <div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white 
                                text-xl font-bold shadow-md transition-transform hover:scale-105">
                    {step.number}
                  </div>
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold mb-2">{step.title}</h3>
                  <p className="text-gray-600">{step.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right Side - Demo Animation */}
        <div className="w-full md:w-1/2">
          <div className="bg-white rounded-lg shadow-lg overflow-hidden">
            {/* Next.js 默认的图片优化器不支持 GIF 动画的处理 */}
            <Image src="/HowItWorks.gif" alt="How SecureShare Works" unoptimized width={700} height={921} className="mx-auto mb-6" />
          </div>
        </div>
      </div>
    </section>
  );
};