src/components/homepage/CustomizationSection.tsx

import { Badge, Card } from '@/components/base';
import Image from 'next/image';

export function CustomizationSection() {
  return (
    <section className="container space-y-16 py-24">
      <div className="space-y-4 text-center">
        <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl">Highly Customizable</h2>
        <p className="text-xl text-muted-foreground">Customize Jan to match your needs and preferences.</p>
      </div>

      <div className="grid gap-8 md:grid-cols-2">
        {/* Assistants & Memory Card */}
        <Card className="space-y-4 p-6">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <h3 className="text-2xl font-semibold">Assistants & Memory</h3>
              <Badge variant="secondary" className="bg-blue-100 text-blue-700 hover:bg-blue-100">
                Coming Soon
              </Badge>
            </div>
            <p className="text-muted-foreground">
              Create personalized AI assistants that remember your conversations and execute specific tasks across your
              systems.
            </p>
          </div>

          <Image
            src="https://jan.ai/assets/images/homepage/assistant-light.png"
            alt="App Screenshot Feature"
            width={800}
            height={800}
            className="object-contain"
          />
        </Card>

        {/* Extensions Card */}
        <Card className="space-y-4 p-6">
          <div className="space-y-2">
            <h3 className="text-2xl font-semibold">Extensions</h3>
            <p className="text-muted-foreground">
              Customize Jan with Extensions, that range from Cloud AI connectors, tools, data connectors.
            </p>
          </div>

          <Image
            src="https://jan.ai/assets/images/homepage/extension-light.png"
            alt="App Screenshot Feature"
            width={800}
            height={800}
            className="object-contain"
          />
        </Card>
      </div>
    </section>
  );
}