import Image from "next/image";
import React from "react";
import { FadeUp } from "./animations/FadeUp";

const AppleIcon = () => (
  <svg viewBox="0 0 384 512" width="24" height="24" fill="currentColor">
    <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
  </svg>
);

const PlayIcon = () => (
  <svg viewBox="0 0 512 512" width="24" height="24" fill="currentColor">
    <path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z" />
  </svg>
);

export function MobilePromote() {
  return (
    <section className="py-6 bg-white relative">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="bg-[#f8f6ff] rounded-[2rem] p-6 md:p-8 flex flex-col lg:flex-row items-center justify-between relative overflow-hidden shadow-sm border border-purple-50">
          
          {/* Left Column: Text and Buttons */}
          <FadeUp delay={0.1} xOffset={-30} yOffset={0} className="lg:w-1/2 mb-6 lg:mb-0 z-10 text-center lg:text-left">
            <h2 className="text-3xl md:text-[36px] font-bold text-gray-900 leading-tight mb-1">
              Find Jobs on the Go!
            </h2>
            <h2 className="text-3xl md:text-[36px] font-bold text-gray-900 leading-tight mb-3">
              Download the <span className="text-[#FF5722]">Jobvumi</span> App
            </h2>
            <p className="text-gray-800 font-medium text-sm md:text-base mb-5 max-w-md mx-auto lg:mx-0 leading-relaxed">
              Find jobs, track applications, receive alerts and get hired - all from your phone.
            </p>
            
            <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4">
              {/* App Store Button */}
              {/* <button className="bg-black text-white px-5 py-2.5 rounded-lg flex items-center gap-3 hover:bg-gray-800 transition-colors shadow-md">
                <AppleIcon />
                <div className="text-left">
                  <div className="text-[10px] leading-none mb-1 text-gray-300">Download on the</div>
                  <div className="text-sm font-semibold leading-none">App Store</div>
                </div>
              </button> */}
              
              {/* Google Play Button */}
              <button className="bg-black text-white px-5 py-2.5 rounded-lg flex items-center gap-3 hover:bg-gray-800 transition-colors shadow-md">
                <PlayIcon />
                <div className="text-left">
                  <div className="text-[10px] leading-none mb-1 text-gray-300">GET IT ON</div>
                  <div className="text-sm font-semibold leading-none">Google Play</div>
                </div>
              </button>
            </div>
          </FadeUp>

          {/* Middle Column: QR Code */}
          <FadeUp delay={0.2} className="lg:w-1/4 flex flex-col items-center mb-6 lg:mb-0 z-10">
            <div className="bg-white p-2 rounded-2xl shadow-sm mb-2">
              <Image 
                src="/images/qrcode.png" 
                alt="Scan to download Jobvumi app" 
                width={120} 
                height={120}
                className="w-24 h-24 md:w-28 md:h-28 object-contain"
              />
            </div>
            <p className="text-gray-500 font-medium text-sm">Scan to Download</p>
          </FadeUp>

          {/* Right Column: Mobile Phones */}
          <FadeUp delay={0.3} yOffset={100} className="lg:w-1/4 relative h-[200px] md:h-[240px] w-full flex justify-center lg:justify-end items-end z-10 mt-4 lg:mt-0">
             {/* Mobile 1 (Back/Left) */}
             <div className="absolute right-[45%] lg:right-[35%] bottom-[-20px] w-[90px] md:w-[120px] translate-x-1/2 lg:translate-x-0">
               <Image 
                 src="/images/mobile1.png" 
                 alt="Jobvumi App Interface Dark" 
                 width={160} 
                 height={320} 
                 className="w-full h-auto object-contain drop-shadow-xl"
               />
             </div>
             
             {/* Mobile 2 (Front/Right) */}
             <div className="absolute right-[15%] lg:-right-4 bottom-[-20px] w-[150px] md:w-[185px] z-20 translate-x-1/2 lg:translate-x-0">
               <Image 
                 src="/images/mobile2.png" 
                 alt="Jobvumi App Interface Light" 
                 width={250} 
                 height={500} 
                 className="w-full h-auto object-contain drop-shadow-2xl"
               />
             </div>
          </FadeUp>

        </div>
      </div>
    </section>
  );
}