import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Share2, Instagram, Twitter, Facebook, Linkedin, MapPin, BrainCircuit, Captions, Hash, ChartLine, CalendarCheck } from "lucide-react"
import Teams from "@/components/about/Teams"
import Partners from "@/components/about/Partners"

export default function AboutPage() {
    return (
        <div className="min-h-screen bg-white">
            {/* Hero Section */}
            <section className="relative py-20 overflow-hidden bg-gradient-to-b from-blue-50 to-white">
                <div className="container px-4 mx-auto max-w-7xl">
                    <div className="flex flex-col items-center text-center">
                        <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
                            About <span className="text-[#6a47ed]">Planpost AI</span>
                        </h1>
                        <p className="max-w-2xl mt-6 text-xl text-gray-600">
                            Revolutionizing social media content creation with the power of artificial intelligence.
                        </p>
                    </div>
                </div>

                <div className="absolute -bottom-24 left-1/2 transform -translate-x-1/2">
                    <div className="w-64 h-64 bg-blue-100 rounded-full opacity-20"></div>
                </div>
            </section>

            {/* Our Mission */}
            <section className="py-20">
                <div className="container px-4 mx-auto max-w-7xl">
                    <div className="grid grid-cols-1 gap-12 md:grid-cols-2 items-center">
                        <div>
                            <Image
                                src="/assets/images/teams/sahin-vai.jpeg"
                                alt="Our Mission"
                                width={500}
                                height={500}
                                className="rounded-lg shadow-xl"
                            />
                        </div>
                        <div>
                            <h2 className="text-3xl font-bold text-gray-900">Our Mission</h2>
                            <div className="w-20 h-1 mt-2 bg-[#6a47ed]"></div>
                            <p className="mt-6 text-lg text-gray-600">
                                At Planpost AI, we&apos;re on a mission to simplify content creation for businesses and creators. We believe
                                that everyone should have access to powerful AI tools that can help them create engaging social media
                                content without the need for expensive designers or copywriters.
                            </p>
                            <p className="mt-4 text-lg text-gray-600">
                                Our platform is designed to democratize content creation, making it accessible to businesses of all
                                sizes, from solopreneurs to large enterprises.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* What We Offer */}
            <section className="py-20 bg-gray-50">
                <div className="container px-4 mx-auto max-w-7xl">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl font-bold text-gray-900">What We Offer</h2>
                        <div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
                        <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
                            Planpost AI combines cutting-edge artificial intelligence with intuitive design to help you create and
                            distribute social media content effortlessly.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
                        {/* Feature 1 */}
                        <div className="p-6 bg-white rounded-lg shadow-md">
                            <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">

                                <BrainCircuit className="w-6 h-6 text-blue-600" />
                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">AI-Generated Templates</h3>
                            <p className="text-gray-600">
                                Create stunning social media ad templates tailored to your brand with just a few clicks.
                            </p>
                        </div>

                        {/* Feature 2 */}
                        <div className="p-6 bg-white rounded-lg shadow-md">
                            <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
                                <Captions className="w-6 h-6 text-blue-600" />
                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">Engaging Captions</h3>
                            <p className="text-gray-600">
                                Generate compelling captions that resonate with your audience and drive engagement.
                            </p>
                        </div>

                        {/* Feature 3 */}
                        <div className="p-6 bg-white rounded-lg shadow-md">
                            <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
                                <Hash className="w-6 h-6 text-blue-600" />

                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">Smart Hashtags</h3>
                            <p className="text-gray-600">
                                Discover trending and relevant hashtags that increase your content&apos;s visibility.
                            </p>
                        </div>

                        {/* Feature 4 */}
                        <div className="p-6 bg-white rounded-lg shadow-md">
                            <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
                                <Share2 className="w-6 h-6 text-blue-600" />

                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">One-Click Sharing</h3>
                            <p className="text-gray-600">
                                Share your content across multiple social media platforms with a single click.
                            </p>
                        </div>

                        {/* Feature 5 */}
                        <div className="p-6 bg-white rounded-lg shadow-md">
                            <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
                                <ChartLine className="w-6 h-6 text-blue-600" />
                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">Performance Analytics</h3>
                            <p className="text-gray-600">
                                Track your content&apos;s performance and gain insights to optimize your strategy.
                            </p>
                        </div>

                        {/* Feature 6 */}
                        <div className="p-6 bg-white rounded-lg shadow-md">
                            <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
                                <CalendarCheck className="w-6 h-6 text-blue-600" />
                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">Smart Scheduling</h3>
                            <p className="text-gray-600">Schedule your posts for optimal times to maximize engagement and reach.</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* How It Works */}
            <section className="py-20">
                <div className="container px-4 mx-auto max-w-7xl">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl font-bold text-gray-900">How It Works</h2>
                        <div className="w-20 h-1 mt-2 mx-auto bg-[#6a47ed]"></div>
                        <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
                            Creating and sharing content with Planpost AI is simple and intuitive.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
                        {/* Step 1 */}
                        <div className="relative">
                            <div className="flex items-center justify-center w-16 h-16 mb-6 bg-[#6a47ed] rounded-full text-white text-2xl font-bold">
                                1
                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">Generate Content</h3>
                            <p className="text-gray-600">
                                Describe what you need, and our AI will create templates, captions, and hashtags tailored to your brand.
                            </p>
                        </div>

                        {/* Step 2 */}
                        <div className="relative">
                            <div className="flex items-center justify-center w-16 h-16 mb-6 bg-[#6a47ed] rounded-full text-white text-2xl font-bold">
                                2
                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">Customize</h3>
                            <p className="text-gray-600">
                                Fine-tune the generated content to match your exact requirements and brand voice.
                            </p>
                        </div>

                        {/* Step 3 */}
                        <div className="relative">
                            <div className="flex items-center justify-center w-16 h-16 mb-6 bg-[#6a47ed] rounded-full text-white text-2xl font-bold">
                                3
                            </div>
                            <h3 className="mb-3 text-xl font-semibold text-gray-900">Share</h3>
                            <p className="text-gray-600">
                                Share your content across multiple platforms with a single click or schedule it for later.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <Teams />

            {/* CTA Section */}
            <section className="py-20 bg-[#6a47ed]">
                <div className="container px-4 mx-auto max-w-7xl">
                    <div className="text-center">
                        <h2 className="text-3xl font-bold text-white">Ready to Transform Your Social Media Strategy?</h2>
                        <p className="mt-4 text-xl text-blue-100 max-w-3xl mx-auto">
                            Join thousands of businesses and creators who are saving time and creating better content with Planpost
                            AI.
                        </p>
                        <div className="mt-8">
                            <Link
                                href="https://dashboard.planpostai.com/"
                                className="inline-flex items-center px-6 py-3 text-base font-medium text-blue-600 bg-white border border-transparent rounded-md shadow-sm hover:bg-blue-50"
                            >
                                Get Started Free
                                <ArrowRight className="w-5 h-5 ml-2" />
                            </Link>
                            {/* <Link
                                href="/demo"
                                className="inline-flex items-center px-6 py-3 ml-4 text-base font-medium text-white bg-transparent border border-white rounded-md hover:bg-[#6641ef]"
                            >
                                Request Demo
                            </Link> */}
                        </div>
                    </div>
                </div>
            </section>

            {/* Social Proof */}
            <Partners />


            {/* Contact Section */}
            <section className="py-20 bg-gray-50">
                <div className="container px-4 mx-auto max-w-7xl">
                    <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
                        <div>
                            <h2 className="text-3xl font-bold text-gray-900">Get in Touch</h2>
                            <div className="w-20 h-1 mt-2 bg-[#6a47ed]"></div>
                            <p className="mt-6 text-lg text-gray-600">
                                Have questions about Planpost AI? We&apos;re here to help. Reach out to our team for support, partnership
                                opportunities, or just to say hello.
                            </p>

                            <div className="mt-8">
                                <div className="flex items-center mt-4">
                                    <div className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            className="w-5 h-5 text-blue-600"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="ml-4">
                                        <p className="text-sm font-medium text-gray-900">Email</p>
                                        <p className="text-sm text-gray-600"> <a
                                            href="mailto:contact@adspillar.com"
                                            className="hover:underline"
                                        >
                                            shahin@adspillar.com
                                        </a></p>
                                    </div>
                                </div>

                                <div className="flex items-center mt-4">
                                    <div className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            className="w-5 h-5 text-blue-600"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="ml-4">
                                        <p className="text-sm font-medium text-gray-900">Phone</p>
                                        <p className="text-sm text-gray-600"> <a
                                            href="tel:+8801784493232"
                                            className="hover:underline"
                                        >
                                            +880 1784-493232
                                        </a></p>
                                    </div>
                                </div>

                                <div className="flex items-center mt-4">
                                    <div className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            className="w-5 h-5 text-blue-600"
                                            fill="none"
                                            viewBox="0 0 24 24"
                                            stroke="currentColor"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                                            />
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="ml-4">
                                        <p className="text-sm font-medium text-gray-900">Address</p>
                                        <p className="text-sm text-gray-600">Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka 1216)</p>
                                    </div>
                                </div>
                                <div className="flex mt-8 space-x-4">
                                    <a
                                        href="https://www.facebook.com/PlanPostAI/"
                                        className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                                        aria-label="Facebook"
                                    >
                                        <Facebook size={20} />
                                    </a>
                                    <a
                                        href="https://x.com/planpost_ai"
                                        className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                                        aria-label="Twitter"
                                    >
                                        <Twitter size={20} />
                                    </a>
                                    <a
                                        href="https://www.linkedin.com/company/planpost-ai"
                                        className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                                        aria-label="LinkedIn"
                                    >
                                        <Linkedin size={20} />
                                    </a>
                                    <a
                                        href="https://www.instagram.com/planpostai"
                                        className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
                                        aria-label="Instagram"
                                    >
                                        <Instagram size={20} />
                                    </a>
                                </div>

                            </div>
                        </div>

                        <div className="p-6 bg-white rounded-lg shadow-md">
                            <h3 className="mb-4 text-xl font-semibold text-gray-900">Send Us a Message</h3>
                            <form>
                                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                                    <div>
                                        <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
                                            First Name
                                        </label>
                                        <input
                                            type="text"
                                            id="first-name"
                                            className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                        />
                                    </div>
                                    <div>
                                        <label htmlFor="last-name" className="block text-sm font-medium text-gray-700">
                                            Last Name
                                        </label>
                                        <input
                                            type="text"
                                            id="last-name"
                                            className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                        />
                                    </div>
                                </div>
                                <div className="mt-4">
                                    <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                                        Email
                                    </label>
                                    <input
                                        type="email"
                                        id="email"
                                        className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                    />
                                </div>
                                <div className="mt-4">
                                    <label htmlFor="subject" className="block text-sm font-medium text-gray-700">
                                        Subject
                                    </label>
                                    <input
                                        type="text"
                                        id="subject"
                                        className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                    />
                                </div>
                                <div className="mt-4">
                                    <label htmlFor="message" className="block text-sm font-medium text-gray-700">
                                        Message
                                    </label>
                                    <textarea
                                        id="message"
                                        rows={4}
                                        className="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                    ></textarea>
                                </div>
                                <div className="mt-6">
                                    <button
                                        type="submit"
                                        className="w-full px-4 py-2 text-white font-bold bg-pink-500 rounded-md hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500"
                                    >
                                        Send Message
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    {/* Map Section */}
                    <div className="mt-16 space-y-6">
                        <div className="flex items-center space-x-2">
                            <MapPin className="text-pink-500" size={24} />
                            <h2 className="text-2xl font-semibold">Our Location</h2>
                        </div>
                        <p className="text-lg">
                            Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka
                            1216)
                        </p>

                        <div className="w-full h-[400px] rounded-lg overflow-hidden shadow-md">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.7368281727336!2d90.37267777531028!3d23.792384087163313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c5548eab48e1%3A0xdadd813caa2f692a!2sAds%20Pillar%20-!5e0!3m2!1sen!2sbd!4v1740984344459!5m2!1sen!2sbd"
                                width="100%"
                                height="100%"
                                style={{ border: 0 }}
                                allowFullScreen
                                loading="lazy"
                                referrerPolicy="no-referrer-when-downgrade"
                                title="Ads Pillar Location"
                            ></iframe>
                        </div>
                    </div>
                </div>

            </section>

        </div>
    )
}

