import Link from "next/link";
import { Metadata } from "next";
import {
  FaArrowRight,
  FaDraftingCompass,
  FaHandshake,
  FaHeadset,
  FaLaptopCode, // For Web App Dev, Backend
  FaLightbulb, // For Ideation, Innovation
  FaPuzzlePiece, // For Custom Software Solutions
  FaRocket, // For Product Launch, Scalable Tech
  FaSearch, // For User Research
  FaShieldAlt, // For Security Testing
  FaSyncAlt, // For Agile, Iteration
  FaUserCheck, // For User-Centred Design, Usability Testing
  FaUsersCog, // For Dedicated Teams
  // Additional icons that might be useful for the new content:
  FaMobileAlt, // For Mobile Apps
  FaDesktop, // For Desktop Apps
  FaBrain, // For AI & ML
  FaCubes, // For Blockchain (alternative: FaLink)
  FaNetworkWired, // For IoT (alternative: FaBroadcastTower)
  FaBullseye, // For Market Strategy
  FaChartLine, // For Growth/Scalability
  FaTasks, // For QA
  FaComments, // For Feedback
  FaPhone,
  FaEnvelope,
} from "react-icons/fa";
import { COLORS } from "@/constants";
import ContactForm from "@/components/ContactForm";

// SEO Metadata
export const metadata: Metadata = {
  title: "Product Development Services | Digital Solutions by OMS",
  description:
    "OMS delivers innovative, tailored digital solutions. Explore our end-to-end product development services, from ideation to launch and beyond.",
  keywords: [
    "product development",
    "custom software solutions",
    "user-centred design",
    "agile development",
    "cross-platform solutions",
    "mobile app development",
    "web app development",
    "tech stack",
    "quality assurance",
    "OMS",
    "Owethu Management Services",
  ],
  openGraph: {
    title: "Product Development Services | Digital Solutions by OMS",
    description:
      "Transform your ideas into market-ready products with OMS's comprehensive development expertise.",
    url: "https://www.oms.africa/services/product-development", // Replace with your actual URL
    images: [
      {
        url: "/images/product-dev-og-image.png", // Replace with an appropriate OG image URL
        width: 1200,
        height: 630,
        alt: "OMS Product Development Services",
      },
    ],
    locale: "en_ZA",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Product Development Services | Digital Solutions by OMS",
    description:
      "Build innovative digital products with OMS. We cover the full lifecycle from concept to continuous improvement.",
    // images: ['/images/product-dev-twitter-image.png'], // Replace if needed
  },
};

interface FeatureItem {
  icon?: React.ElementType; // Icon is optional for some lists like tech stack
  title: string;
  description: string;
}

const SectionTitle: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => (
  <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4 text-center">
    {children}
  </h2>
);

const SectionParagraph: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => (
  <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto text-center mb-10 md:mb-12">
    {children}
  </p>
);

const FeatureGrid: React.FC<{ items: FeatureItem[]; iconColor?: string }> = ({
  items,
  iconColor = COLORS.primary,
}) => (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    {items.map((item) => (
      <div
        key={item.title}
        className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"
      >
        {item.icon && (
          <item.icon className="text-3xl mb-3" style={{ color: iconColor }} />
        )}
        <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
          {item.title}
        </h4>
        <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
          {item.description}
        </p>
      </div>
    ))}
  </div>
);

export default function ProductDevelopmentPage() {
  const howOmsDeliversItems: FeatureItem[] = [
    {
      icon: FaPuzzlePiece,
      title: "Custom Software Solutions",
      description:
        "We craft bespoke applications designed to solve your unique business challenges, ensuring alignment with your goals and processes.",
    },
    {
      icon: FaUserCheck,
      title: "User-Centred Design",
      description:
        "We prioritise seamless functionality with an intuitive user experience, creating products that are not only powerful but also easy to use.",
    },
    {
      icon: FaRocket,
      title: "Scalable & Future-Proof Technology",
      description:
        "Our solutions are built with long-term growth in mind, ensuring adaptability to future demands and changes in technology.",
    },
    {
      icon: FaSyncAlt,
      title: "Agile Development Approach",
      description:
        "Through iterative development, we ensure faster time-to-market, with continuous feedback from users driving improvements along the way.",
    },
  ];

  const endToEndItems: FeatureItem[] = [
    {
      icon: FaLightbulb,
      title: "Ideation & Concept Development",
      description:
        "We collaborate with you to transform your ideas into a clear product vision and roadmap.",
    },
    {
      icon: FaDraftingCompass,
      title: "Prototyping & MVP Development",
      description:
        "We build prototypes and minimum viable products to validate concepts early, gather feedback, and ensure alignment with user needs.",
    },
    {
      icon: FaBullseye,
      title: "Product Launch & Market Strategy",
      description:
        "Our team helps with the go-to-market strategy, ensuring a successful product launch with strong market positioning and customer adoption.",
    },
    {
      icon: FaHeadset,
      title: "Post-Launch Support & Continuous Improvement",
      description:
        "We provide ongoing support, monitoring, and iterative enhancements based on user feedback and market trends.",
    },
  ];

  const crossPlatformItems: FeatureItem[] = [
    {
      icon: FaMobileAlt,
      title: "Mobile Application Development",
      description:
        "We create intuitive mobile apps for both iOS and Android, ensuring seamless performance and a high-quality user experience.",
    },
    {
      icon: FaLaptopCode,
      title: "Web Application Development",
      description:
        "Tailored web applications that are scalable, secure, and optimized for the best user interaction.",
    },
    {
      icon: FaDesktop,
      title: "Desktop Applications",
      description:
        "For businesses requiring more complex or resource-heavy solutions, we build powerful desktop applications with smooth integration.",
    },
  ];

  const techStackItems: FeatureItem[] = [
    { title: "Frontend Development", description: "React, Angular, Vue.js" },
    {
      title: "Backend Development",
      description: "Node.js, Python, Java, Ruby on Rails",
    },
    {
      title: "Database Technologies",
      description: "MySQL, PostgreSQL, MongoDB, NoSQL",
    },
    {
      title: "Cloud Services & DevOps",
      description: "AWS, Azure, Google Cloud Platform",
    },
    {
      title: "AI & Machine Learning",
      description: "TensorFlow, PyTorch, Scikit-learn",
    },
  ];

  const qualityAssuranceItems: FeatureItem[] = [
    {
      icon: FaTasks,
      title: "Manual & Automated Testing",
      description:
        "Comprehensive testing to ensure the product meets all requirements and functions seamlessly.",
    },
    {
      icon: FaChartLine, // Or FaTachometerAlt if you add it
      title: "Performance & Load Testing",
      description:
        "We simulate high traffic and performance scenarios to ensure your product can scale and handle user demands.",
    },
    {
      icon: FaShieldAlt,
      title: "Security Testing",
      description:
        "Proactive identification and mitigation of potential security vulnerabilities to safeguard your product and user data.",
    },
  ];

  const collaborativeProcessItems: FeatureItem[] = [
    {
      icon: FaSyncAlt,
      title: "Agile Methodology",
      description:
        "Our flexible and iterative approach ensures that your product evolves based on real-time feedback, reducing risk and accelerating time-to-market.",
    },
    {
      icon: FaHandshake,
      title: "Client Involvement",
      description:
        "Regular check-ins, demos, and sprint reviews keep you involved and aligned with project progress, making sure we are building the product you envisioned.",
    },
    {
      icon: FaUsersCog,
      title: "Dedicated Development Teams",
      description:
        "Our dedicated teams work closely with your business to ensure that every decision aligns with your strategic goals and product vision.",
    },
  ];

  const userCentredApproachItems: FeatureItem[] = [
    {
      icon: FaSearch,
      title: "User Research & Personas",
      description:
        "We conduct thorough user research to understand the needs, behaviours, and challenges of your target audience.",
    },
    {
      icon: FaUserCheck,
      title: "Usability Testing",
      description:
        "Regular usability tests are conducted to ensure that your product is easy to navigate, efficient, and enjoyable to use.",
    },
    {
      icon: FaComments,
      title: "User Feedback & Iteration",
      description:
        "We continuously gather user feedback and iterate on product features to improve usability and customer satisfaction.",
    },
  ];

  const innovationItems: FeatureItem[] = [
    {
      icon: FaBrain,
      title: "Artificial Intelligence & Machine Learning",
      description:
        "We integrate AI and machine learning to create smarter, data-driven products that can adapt and scale as user needs evolve.",
    },
    {
      icon: FaCubes,
      title: "Blockchain Solutions",
      description:
        "We incorporate blockchain for secure, transparent, and decentralized applications.",
    },
    {
      icon: FaNetworkWired,
      title: "Internet of Things (IoT)",
      description:
        "We build IoT-enabled products that connect the physical and digital worlds for enhanced business intelligence and automation.",
    },
  ];

  return (
    <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins">
      {/* 1. Hero Section */}
      <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 text-white py-24 md:py-40">
        <div className="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
        <div className="container mx-auto px-6 text-center relative z-10">
          <h1
            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
            style={{ color: COLORS.primary }}
          >
            Product Development
          </h1>
          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
            At OMS, we don't just create products—we build digital solutions
            that accelerate business growth and transform industries. We
            understand that great products are the result of careful planning,
            technical expertise, and a deep understanding of user needs. From
            concept to launch, our product development services deliver
            innovative, tailored solutions that help businesses enhance
            efficiency, reduce complexity, and unlock new revenue streams.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="#how-we-deliver"
              className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
              style={{ backgroundColor: COLORS.primary }}
            >
              How We Deliver
            </Link>
            <Link
              href="#contact"
              className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300"
              style={{ color: COLORS.primary }}
            >
              Discuss Your Project <FaArrowRight className="ml-2" />
            </Link>
          </div>
        </div>
      </section>

      {/* 2. How OMS Delivers Market-Ready Products Section */}
      <section
        id="how-we-deliver"
        className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800"
      >
        <div className="container mx-auto px-6">
          <SectionTitle>How OMS Delivers Market-Ready Products</SectionTitle>
          {/* No intro paragraph provided for this specific subtitle in the source */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {howOmsDeliversItems.map((item) => (
              <div
                key={item.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex items-start space-x-4"
              >
                {item.icon && (
                  <item.icon
                    className="text-3xl text-gold-500 dark:text-gold-400 mt-1 flex-shrink-0"
                    style={{ color: COLORS.primary }}
                  />
                )}
                <div>
                  <h4 className="text-lg font-semibold mb-1 font-poppins dark:text-white">
                    {item.title}
                  </h4>
                  <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                    {item.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. End-to-End Product Development Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <SectionTitle>End-to-End Product Development</SectionTitle>
          <SectionParagraph>
            We support businesses throughout the entire product lifecycle, from
            ideation to post-launch support. Our comprehensive services cover
            every phase of development, ensuring that your product is not only
            designed and built to meet your current needs, but is also ready for
            future growth and evolution.
          </SectionParagraph>
          <FeatureGrid items={endToEndItems} />
        </div>
      </section>

      {/* 4. Cross-Platform Solutions Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <SectionTitle>Cross-Platform Solutions</SectionTitle>
          <SectionParagraph>
            We deliver cross-platform products that work seamlessly across web,
            mobile, and desktop environments. This ensures your product is
            accessible to a wider audience and provides a consistent user
            experience, regardless of the device or platform.
          </SectionParagraph>
          <FeatureGrid items={crossPlatformItems} />
        </div>
      </section>

      {/* 5. Tech Stack Expertise Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <SectionTitle>Tech Stack Expertise</SectionTitle>
          <SectionParagraph>
            Our product development solutions are powered by a diverse range of
            technologies. Whether you need a high-performance web app, a mobile
            solution, or a complex enterprise application, our team uses the
            latest and most suitable technologies to ensure the product is
            reliable, secure, and future-ready.
          </SectionParagraph>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {techStackItems.map((item) => (
              <div
                key={item.title}
                className="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-sm"
              >
                <h4
                  className="text-lg font-semibold mb-2 font-poppins text-gold-600 dark:text-gold-400"
                  style={{ color: COLORS.primary }}
                >
                  {item.title}
                </h4>
                <p className="text-gray-700 dark:text-gray-300 text-sm">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 6. Quality Assurance & Testing Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <SectionTitle>Quality Assurance & Testing</SectionTitle>
          <SectionParagraph>
            Our product development approach includes robust testing and quality
            assurance to ensure that your product is error-free, secure, and
            optimized for performance. We conduct thorough testing at each stage
            of the development process to deliver a high-quality final product.
          </SectionParagraph>
          <FeatureGrid items={qualityAssuranceItems} />
        </div>
      </section>

      {/* 7. Collaborative Development Process Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <SectionTitle>Collaborative Development Process</SectionTitle>
          <SectionParagraph>
            We believe that collaboration is key to successful product
            development. Our agile and transparent development process ensures
            that you are always in the loop, from initial discussions to final
            delivery.
          </SectionParagraph>
          <FeatureGrid items={collaborativeProcessItems} />
        </div>
      </section>

      {/* 8. User-Centred Approach Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <SectionTitle>User-Centred Approach</SectionTitle>
          <SectionParagraph>
            We design products with the end-user in mind, focusing on creating
            intuitive, engaging, and valuable experiences that delight customers
            and drive retention.
          </SectionParagraph>
          <FeatureGrid items={userCentredApproachItems} />
        </div>
      </section>

      {/* 9. Innovation & Emerging Technologies Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <SectionTitle>Innovation & Emerging Technologies</SectionTitle>
          <SectionParagraph>
            At OMS, we believe in staying ahead of the curve by leveraging the
            latest innovations and emerging technologies to build
            next-generation products. We are constantly exploring new ways to
            incorporate cutting-edge solutions into our product development
            process.
          </SectionParagraph>
          <FeatureGrid items={innovationItems} />
        </div>
      </section>

      {/* 10. Call to Action (CTA) Section */}
      <section
        className="py-16 md:py-24 bg-gold-500 text-gray-900"
        style={{ backgroundColor: COLORS.primary }}
      >
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins">
            Ready to Transform Your Ideas into Reality?
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
            Let&apos;s discuss your product vision and explore how OMS can
            develop innovative digital solutions to drive your business forward.
            Schedule a consultation with our experts today.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="/contact?subject=Product Development Inquiry" // Pre-fill subject
              className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300"
            >
              Request a Consultation
            </Link>
            <Link
              href="#contact" // Link to contact section below
              className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300"
            >
              Contact Us
            </Link>
          </div>
        </div>
      </section>

      {/* 11. Contact Information Section */}
      <section
        id="contact"
        className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
      >
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Get in Touch
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              Have a project in mind or need more information about our product
              development services? Reach out today.
            </p>
          </div>
          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
            {/* Contact Details */}
            <div className="space-y-6">
              <div className="flex items-center space-x-4">
                <FaPhone
                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
                  style={{ color: COLORS.primary }}
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Phone
                  </h3>
                  <a
                    href="tel:+27120513281"
                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    (012) 051 3281
                  </a>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <FaEnvelope
                  className="w-6 h-6 text-gold-500 dark:text-gold-400 flex-shrink-0"
                  style={{ color: COLORS.primary }}
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Email
                  </h3>
                  <a
                    href="mailto:info@oms.africa?subject=Product Development Inquiry"
                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    info@oms.africa
                  </a>
                </div>
              </div>
              <Link
                href="/contact"
                className="inline-flex items-center text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300"
                style={{ color: COLORS.primary }}
              >
                Go to Full Contact Page <FaArrowRight className="ml-2" />
              </Link>
            </div>

            {/* Contact Form */}
            <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
                Send Us Your Inquiry
              </h3>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}