Content Block

import { ArrowRight } from 'lucide-react'

export default function ContentSection() {
  return (
    <section className="py-16 sm:py-20 lg:py-24">
      <div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl">
          <h2 className="text-foreground text-3xl font-semibold leading-tight sm:text-4xl">
            Create Content with AI Assistance
          </h2>
          <p className="text-muted-foreground mt-3 text-base sm:text-lg lg:text-xl">
            Our AI assistant helps you create better content faster. Generate ideas, improve your writing, and design layouts with simple prompts.
          </p>
        </div>

        {/* Features */}
        <div className="my-10 grid grid-cols-1 gap-6 sm:my-12 sm:grid-cols-2 lg:grid-cols-3">
          <div className="space-y-2 rounded-xl border p-4 sm:p-5">
            <span className="mb-2 block text-2xl sm:text-3xl" aria-hidden>
              💡
            </span>
            <h3 className="text-lg font-medium sm:text-xl">Generate Ideas</h3>
            <p className="text-muted-foreground">
              Spark creativity with AI-powered content suggestions and inspiration.
            </p>
          </div>

          <div className="space-y-2 rounded-xl border p-4 sm:p-5">
            <span className="mb-2 block text-2xl sm:text-3xl" aria-hidden>
              ✏️
            </span>
            <h3 className="text-lg font-medium sm:text-xl">Improve Writing</h3>
            <p className="text-muted-foreground">
              Enhance your text with smart editing suggestions and style refinements.
            </p>
          </div>

          <div className="space-y-2 rounded-xl border p-4 sm:p-5">
            <span className="mb-2 block text-2xl sm:text-3xl" aria-hidden>
              🎨
            </span>
            <h3 className="text-lg font-medium sm:text-xl">Design Layouts</h3>
            <p className="text-muted-foreground">
              Create visually appealing layouts that capture your audience&apos;s attention.
            </p>
          </div>
        </div>

        {/* Stats */}
        <div className="border-t pt-6 sm:pt-8">
          <ul
            role="list"
            className="grid grid-cols-1 gap-3 text-sm text-muted-foreground sm:grid-cols-2 lg:grid-cols-4"
          >
            {[
              { value: '90+', label: 'Integrations' },
              { value: '56%', label: 'Productivity Boost' },
              { value: '24/7', label: 'Customer Support' },
              { value: '10k+', label: 'Active Users' },
            ].map((stat, index) => (
              <li key={index} className="flex items-center gap-2 rounded-lg">
                <ArrowRight className="size-4 opacity-60" aria-hidden="true" />
                <span className="text-foreground font-medium">{stat.value}</span>
                <span className="truncate">{stat.label}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  )
}