import React from 'react';
import { motion } from 'motion/react';
import { LogoIcon } from './LogoIcon';
import { Laptop, Smartphone, Wifi, Briefcase, CheckCircle2, QrCode, Globe } from 'lucide-react';

export const FlyerSection: React.FC = () => {
  return (
    <section className="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 bg-[#efe9dc]/50">
      <div className="max-w-4xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="bg-[#f4eee1] rounded-2xl sm:rounded-3xl border-4 border-[#3d9ca8] shadow-2xl overflow-hidden p-4 sm:p-8 md:p-10 relative"
        >
          {/* Outer Gold Inner Border Ring */}
          <div className="border-2 border-dashed border-[#cfa35d] rounded-xl sm:rounded-2xl p-4 sm:p-6 bg-white/80 backdrop-blur-sm">

            {/* Header Banner */}
            <div className="text-center border-b-2 border-[#3d9ca8] pb-6 mb-6">
              <div className="flex items-center justify-center gap-3 sm:gap-6 mb-2">
                <span className="font-montserrat font-black text-2xl sm:text-4xl text-[#1b4247] tracking-wider uppercase">
                  SIMPLY
                </span>
                <LogoIcon className="w-12 h-12 sm:w-16 sm:h-16 shrink-0" />
                <span className="font-montserrat font-black text-2xl sm:text-4xl text-[#1b4247] tracking-wider uppercase">
                  SORTED
                </span>
              </div>
              <p className="font-montserrat font-extrabold text-xs sm:text-sm text-[#3d9ca8] tracking-widest uppercase">
                ACROSS SOUTHWEST CORNWALL
              </p>
            </div>

            {/* Main Headline */}
            <div className="text-center mb-8">
              <h3 className="font-montserrat font-black text-xl sm:text-2xl md:text-3xl text-[#1b4247] uppercase tracking-wide leading-tight">
                TECH DOESN’T HAVE TO BE TRICKY!
              </h3>
              <p className="font-montserrat font-black text-lg sm:text-xl text-[#3d9ca8] uppercase tracking-wider mt-1">
                MOBILE TECH SUPPORT.
              </p>
            </div>

            {/* Quadrant Grid with Center Badge */}
            <div className="relative grid grid-cols-1 md:grid-cols-2 gap-6 my-6">

              {/* Center Services Badge for Desktop */}
              <div className="hidden md:flex absolute inset-0 items-center justify-center pointer-events-none z-10">
                <div className="w-40 h-40 rounded-full bg-[#f4eee1] border-4 border-[#3d9ca8] shadow-xl flex flex-col items-center justify-center text-center p-3">
                  <div className="w-8 h-8 rounded-full bg-[#3d9ca8] text-white flex items-center justify-center mb-1">
                    <LogoIcon className="w-6 h-6" />
                  </div>
                  <span className="font-montserrat font-black text-xs text-[#1b4247] uppercase tracking-tight leading-tight">
                    OUR SERVICES AT A GLANCE
                  </span>
                </div>
              </div>

              {/* 1. Computer & Laptop Help */}
              <div className="bg-[#fcfaf5] rounded-xl border-2 border-[#cfa35d] p-5 shadow-sm hover:shadow-md transition-shadow">
                <div className="flex items-center gap-3 mb-3 border-b border-stone-200 pb-2">
                  <div className="p-2 bg-[#3d9ca8]/15 text-[#3d9ca8] rounded-lg">
                    <Laptop className="w-6 h-6" />
                  </div>
                  <h4 className="font-montserrat font-black text-base sm:text-lg text-[#1b4247] uppercase">
                    1. COMPUTER & LAPTOP HELP
                  </h4>
                </div>
                <ul className="space-y-2 font-inter text-sm text-stone-700">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Windows & Mac Setup</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Software Installs</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Printer Configuration</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Troubleshooting</span>
                  </li>
                </ul>
              </div>

              {/* 2. Smartphone & Tablet Support */}
              <div className="bg-[#fcfaf5] rounded-xl border-2 border-[#cfa35d] p-5 shadow-sm hover:shadow-md transition-shadow">
                <div className="flex items-center gap-3 mb-3 border-b border-stone-200 pb-2">
                  <div className="p-2 bg-[#3d9ca8]/15 text-[#3d9ca8] rounded-lg">
                    <Smartphone className="w-6 h-6" />
                  </div>
                  <h4 className="font-montserrat font-black text-base sm:text-lg text-[#1b4247] uppercase">
                    2. SMARTPHONE & TABLET SUPPORT
                  </h4>
                </div>
                <ul className="space-y-2 font-inter text-sm text-stone-700">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Setup New Devices</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>App Integration</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Data Transfer</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Security Basics</span>
                  </li>
                </ul>
              </div>

              {/* 3. Wi-Fi & Home Network Solution */}
              <div className="bg-[#fcfaf5] rounded-xl border-2 border-[#cfa35d] p-5 shadow-sm hover:shadow-md transition-shadow">
                <div className="flex items-center gap-3 mb-3 border-b border-stone-200 pb-2">
                  <div className="p-2 bg-[#3d9ca8]/15 text-[#3d9ca8] rounded-lg">
                    <Wifi className="w-6 h-6" />
                  </div>
                  <h4 className="font-montserrat font-black text-base sm:text-lg text-[#1b4247] uppercase">
                    3. WI-FI & HOME NETWORK SOLUTION
                  </h4>
                </div>
                <ul className="space-y-2 font-inter text-sm text-stone-700">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Connection & Speed Issues</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Smart TV Setup</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Security Configuration</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Home Network Health</span>
                  </li>
                </ul>
              </div>

              {/* 4. Business & Project Support */}
              <div className="bg-[#fcfaf5] rounded-xl border-2 border-[#cfa35d] p-5 shadow-sm hover:shadow-md transition-shadow">
                <div className="flex items-center gap-3 mb-3 border-b border-stone-200 pb-2">
                  <div className="p-2 bg-[#3d9ca8]/15 text-[#3d9ca8] rounded-lg">
                    <Briefcase className="w-6 h-6" />
                  </div>
                  <h4 className="font-montserrat font-black text-base sm:text-lg text-[#1b4247] uppercase">
                    4. BUSINESS & PROJECT SUPPORT
                  </h4>
                </div>
                <ul className="space-y-2 font-inter text-sm text-stone-700">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Small Business IT Help</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>Data Solutions</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>General Project Consulting</span>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#3d9ca8] shrink-0" />
                    <span>40+ Years Expertise</span>
                  </li>
                </ul>
              </div>

            </div>

            {/* Pill Banner */}
            <div className="my-6 py-3 px-4 bg-[#3d9ca8] text-white rounded-xl text-center font-montserrat font-black text-xs sm:text-sm md:text-base uppercase tracking-wider shadow-md">
              FRIENDLY. PATIENT. RELIABLE. (40+ Yrs Experience!)
            </div>

            {/* Get In Touch Footer Bar */}
            <div className="pt-4 border-t-2 border-[#3d9ca8] flex flex-col sm:flex-row items-center justify-between gap-6 text-center sm:text-left">
              <div>
                <span className="font-montserrat font-black text-xs uppercase tracking-widest text-[#cfa35d] block mb-1">
                  GET IN TOUCH
                </span>
                <a
                  href="https://wa.me/447424244145"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-montserrat font-black text-xl sm:text-2xl text-[#1b4247] hover:text-[#3d9ca8] transition-colors inline-flex items-center gap-2"
                >
                  <i className="fa-brands fa-whatsapp text-2xl text-[#25d366]" />
                  <span>07424 244145</span>
                </a>
                <p className="font-inter text-xs text-stone-600 mt-0.5">
                  Available all over Southwest Cornwall.
                </p>
              </div>

              {/* Right Side: Website & QR */}
              <div className="flex items-center gap-4 bg-[#fcfaf5] p-3 rounded-xl border border-stone-200">
                <div className="text-right">
                  <div className="flex items-center justify-end gap-1 text-[#3d9ca8] font-montserrat font-bold text-xs uppercase">
                    <Globe className="w-3.5 h-3.5" />
                    <span>VISIT SITE</span>
                  </div>
                  <span className="font-montserrat font-black text-xs sm:text-sm text-[#1b4247] tracking-tight">
                    simplysortedtech.ai.studio
                  </span>
                </div>

                {/* QR Code Graphic */}
                <div className="w-14 h-14 bg-white border border-stone-300 rounded-lg p-1 flex items-center justify-center shrink-0 shadow-sm">
                  <QrCode className="w-12 h-12 text-[#1b4247]" />
                </div>
              </div>
            </div>

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