import { Metadata } from 'next';
import { Container } from '@/components/ui/Container';
import { Button } from '@/components/ui/Button';
import { Card, CardHeader, CardBody, CardFooter } from '@/components/ui/Card';
import { Grid, GridItem } from '@/components/ui/Grid';
import { Badge } from '@/components/ui/Badge';

export const metadata: Metadata = {
  title: 'Layout Example | KLZ Cables',
  description: 'Example page demonstrating the new layout components',
};

export default function ExamplePage() {
  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16 rounded-xl">
        <Container maxWidth="4xl" padding="lg" className="text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            Layout Components Demo
          </h1>
          <p className="text-xl text-blue-100 mb-6">
            Showcasing the new Header, Footer, Layout, and MobileMenu components
          </p>
          <div className="flex gap-3 justify-center flex-wrap">
            <Button variant="primary" size="lg">
              Primary Action
            </Button>
            <Button variant="outline" size="lg">
              Secondary Action
            </Button>
          </div>
        </Container>
      </section>

      {/* Feature Cards */}
      <section>
        <Container maxWidth="6xl" padding="md">
          <h2 className="text-3xl font-bold mb-6 text-center">Key Features</h2>
          <Grid cols={3} gap="lg">
            <GridItem>
              <Card variant="elevated">
                <CardHeader>
                  <div className="flex items-center gap-2 mb-2">
                    <Badge variant="primary">New</Badge>
                    <h3 className="text-xl font-semibold">Responsive Header</h3>
                  </div>
                </CardHeader>
                <CardBody>
                  <p className="text-gray-600">
                    Sticky header with mobile hamburger menu, locale switcher, and contact CTA.
                    Fully responsive with smooth animations.
                  </p>
                </CardBody>
                <CardFooter>
                  <Button variant="ghost" size="sm">Learn More</Button>
                </CardFooter>
              </Card>
            </GridItem>

            <GridItem>
              <Card variant="elevated">
                <CardHeader>
                  <div className="flex items-center gap-2 mb-2">
                    <Badge variant="secondary">Updated</Badge>
                    <h3 className="text-xl font-semibold">Smart Footer</h3>
                  </div>
                </CardHeader>
                <CardBody>
                  <p className="text-gray-600">
                    4-column responsive layout with company info, quick links, 
                    product categories, and contact details.
                  </p>
                </CardBody>
                <CardFooter>
                  <Button variant="ghost" size="sm">View Details</Button>
                </CardFooter>
              </Card>
            </GridItem>

            <GridItem>
              <Card variant="elevated">
                <CardHeader>
                  <div className="flex items-center gap-2 mb-2">
                    <Badge variant="success">Enhanced</Badge>
                    <h3 className="text-xl font-semibold">Mobile Menu</h3>
                  </div>
                </CardHeader>
                <CardBody>
                  <p className="text-gray-600">
                    Slide-out drawer with smooth animations, full navigation, 
                    language switcher, and contact information.
                  </p>
                </CardBody>
                <CardFooter>
                  <Button variant="ghost" size="sm">Try It</Button>
                </CardFooter>
              </Card>
            </GridItem>
          </Grid>
        </Container>
      </section>

      {/* Component Showcase */}
      <section className="bg-gray-50 py-12">
        <Container maxWidth="6xl" padding="md">
          <h2 className="text-3xl font-bold mb-6 text-center">UI Components</h2>
          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <h3 className="text-xl font-semibold">Buttons</h3>
                </CardHeader>
                <CardBody>
                  <div className="flex flex-wrap gap-2">
                    <Button variant="primary">Primary</Button>
                    <Button variant="secondary">Secondary</Button>
                    <Button variant="outline">Outline</Button>
                    <Button variant="ghost">Ghost</Button>
                  </div>
                  <div className="flex flex-wrap gap-2 mt-3">
                    <Button variant="primary" size="sm">Small</Button>
                    <Button variant="primary" size="md">Medium</Button>
                    <Button variant="primary" size="lg">Large</Button>
                  </div>
                </CardBody>
              </Card>

              <Card>
                <CardHeader>
                  <h3 className="text-xl font-semibold">Badges</h3>
                </CardHeader>
                <CardBody>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="primary">Primary</Badge>
                    <Badge variant="secondary">Secondary</Badge>
                    <Badge variant="success">Success</Badge>
                    <Badge variant="warning">Warning</Badge>
                    <Badge variant="error">Error</Badge>
                  </div>
                </CardBody>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <h3 className="text-xl font-semibold">Container & Grid</h3>
              </CardHeader>
              <CardBody>
                <p className="text-gray-600 mb-4">
                  The Container component provides responsive max-width and padding,
                  while Grid offers flexible column layouts.
                </p>
                <Grid cols={4} gap="md">
                  <div className="bg-blue-100 p-4 rounded text-center">1</div>
                  <div className="bg-blue-100 p-4 rounded text-center">2</div>
                  <div className="bg-blue-100 p-4 rounded text-center">3</div>
                  <div className="bg-blue-100 p-4 rounded text-center">4</div>
                </Grid>
              </CardBody>
            </Card>
          </div>
        </Container>
      </section>

      {/* Integration Example */}
      <section>
        <Container maxWidth="6xl" padding="md">
          <h2 className="text-3xl font-bold mb-6 text-center">Integration Example</h2>
          <Card variant="elevated">
            <CardHeader>
              <h3 className="text-xl font-semibold">How to Use in Your Pages</h3>
            </CardHeader>
            <CardBody>
              <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
                <code>{`// app/[locale]/my-page/page.tsx
import { Metadata } from 'next';
import { Container } from '@/components/ui/Container';
import { Layout } from '@/components/layout/Layout';

export const metadata: Metadata = {
  title: 'My Page | KLZ Cables',
  description: 'My custom page description',
};

export default function MyPage({ params: { locale } }: { params: { locale: string } }) {
  return (
    <Layout locale={locale} siteName="KLZ Cables">
      <Container maxWidth="6xl" padding="md">
        <h1>My Page Content</h1>
        {/* Your content here */}
      </Container>
    </Layout>
  );
}`}</code>
              </pre>
            </CardBody>
          </Card>
        </Container>
      </section>

      {/* Breadcrumb Demo */}
      <section className="bg-gray-50 py-8">
        <Container maxWidth="6xl" padding="md">
          <h2 className="text-2xl font-bold mb-4">Breadcrumb Support</h2>
          <p className="text-gray-600 mb-4">
            The Layout component supports optional breadcrumbs. Check the URL bar 
            and try navigating to see the breadcrumb in action.
          </p>
          <a href="/en/example/subpage">
            <Button>Go to Example Subpage (with Breadcrumb)</Button>
          </a>
        </Container>
      </section>
    </div>
  );
}