import React from 'react';
import { Metadata } from 'next';

// Components
import CaseStudyBanner from '@/app/(portfolio)/case-study/components/CaseStudyBanner';
import ApplicationPortfolioList from '@/app/(portfolio)/application-portfolio/components/PortfolioList';
import WebsitePortfolioList from '@/app/(portfolio)/website-portfolio/components/PortfolioList';

// Import both CSS files
import "@/app/(portfolio)/application-portfolio/style.css";
import "@/app/(portfolio)/website-portfolio/style.css";

export const metadata: Metadata = {
  title: "Case Studies | Web & App Development Success Stories",
  description: "Explore Fruxinfo’s case studies showcasing successful web and mobile app development projects that delivered measurable business growth.",
  alternates: { canonical: "https://www.fruxinfo.com/case-study" },
};

export default function page() {
  return (
    <div>
      {/* Case Study Banner */}
      <CaseStudyBanner />

      {/* Application Portfolio Section */}
      <section className="bg-[#f9f9f9] py-16">
        <h2 className="text-center text-[30px] md:text-[40px] font-bold text-[#333] mb-10">
          App Development
        </h2>
        <ApplicationPortfolioList />
      </section>

      {/* Website Portfolio Section */}
      <section className="bg-white py-16">
        <h2 className="text-center text-[30px] md:text-[40px] font-bold text-[#333] mb-10">
          Web Design
        </h2>
        <WebsitePortfolioList />
      </section>
    </div>
  );
}