import { Shuffle, Map, TrendingDown } from 'lucide-react';

import { cn } from '@/lib/utils';

interface ContentIntelSectionProps {
  className?: string;
}

export function ContentIntelSection({ className }: ContentIntelSectionProps) {
  return (
    <section
      className={cn('border-t border-b bg-muted/50 py-24', className)}
      aria-labelledby="content-intel-heading"
    >
      <div className="container">
        <div className="mx-auto max-w-5xl">
          {/* Section Header */}
          <div className="mb-16 text-center">
            <h2 id="content-intel-heading" className="mb-4 text-3xl font-bold tracking-tight">
              Content intelligence, built in
            </h2>
            <p className="text-lg text-muted-foreground">
              Advanced analysis to find hidden opportunities and prevent costly SEO mistakes.
            </p>
          </div>

          {/* Cards Grid */}
          <div className="grid gap-8 lg:grid-cols-3">
            {/* Card 1: Cannibalization Detection */}
            <div className="rounded-lg border bg-card p-8 shadow-sm transition-shadow hover:shadow-md">
              <div className="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-red-100">
                <Shuffle className="h-6 w-6 text-red-600" aria-hidden="true" />
              </div>

              <h3 className="mb-3 text-xl font-semibold">Cannibalization Detection</h3>
              <p className="mb-6 text-muted-foreground">
                Find pages competing for the same keyword. Consolidate or reposition content to
                stop splitting your traffic.
              </p>

              {/* Mini Visual */}
              <div className="space-y-3 rounded-lg bg-muted p-4">
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <div className="flex-1 rounded-full bg-red-500" style={{ height: '8px' }} />
                    <span className="text-xs font-medium">65%</span>
                  </div>
                  <p className="text-xs text-muted-foreground">/blog/best-coffee-beans</p>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <div
                      className="rounded-full bg-orange-500"
                      style={{ height: '8px', flex: '0.35' }}
                    />
                    <span className="text-xs font-medium">35%</span>
                  </div>
                  <p className="text-xs text-muted-foreground">/guides/coffee-beans-buying</p>
                </div>
              </div>

              <p className="mt-3 text-xs font-medium text-muted-foreground">
                Splitting 65% / 35% of impressions
              </p>
            </div>

            {/* Card 2: Topic Clustering */}
            <div className="rounded-lg border bg-card p-8 shadow-sm transition-shadow hover:shadow-md">
              <div className="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100">
                <Map className="h-6 w-6 text-purple-600" aria-hidden="true" />
              </div>

              <h3 className="mb-3 text-xl font-semibold">Topic Clustering</h3>
              <p className="mb-6 text-muted-foreground">
                Map your content into topic clusters. Identify content gaps, hub potential, and
                expansion opportunities.
              </p>

              {/* Mini Visual */}
              <div className="space-y-3 rounded-lg bg-muted p-4">
                <div className="flex flex-wrap gap-2">
                  <span className="rounded-full border-2 border-blue-500 px-3 py-1 text-xs font-medium text-foreground">
                    Hub
                  </span>
                  <span className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
                    Exists
                  </span>
                  <span className="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
                    Exists
                  </span>
                </div>
                <div className="flex flex-wrap gap-2">
                  <span className="rounded-full border-2 border-dashed border-red-400 px-3 py-1 text-xs font-medium text-foreground">
                    Gap
                  </span>
                  <span className="rounded-full border-2 border-dashed border-red-400 px-3 py-1 text-xs font-medium text-foreground">
                    Gap
                  </span>
                </div>
              </div>

              <p className="mt-3 text-xs font-medium text-muted-foreground">
                2 content gaps detected
              </p>
            </div>

            {/* Card 3: Freshness Analysis */}
            <div className="rounded-lg border bg-card p-8 shadow-sm transition-shadow hover:shadow-md">
              <div className="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-amber-100">
                <TrendingDown className="h-6 w-6 text-amber-600" aria-hidden="true" />
              </div>

              <h3 className="mb-3 text-xl font-semibold">Freshness Analysis</h3>
              <p className="mb-6 text-muted-foreground">
                Detect 7 types of content decay patterns. Get specific recommendations from light
                refreshes to full rewrites.
              </p>

              {/* Mini Visual - Bar Chart */}
              <div className="rounded-lg bg-muted p-4">
                <div className="flex items-end justify-between gap-1" style={{ height: '80px' }}>
                  <div className="flex-1 rounded-t bg-blue-500" style={{ height: '90%' }} />
                  <div className="flex-1 rounded-t bg-blue-500" style={{ height: '75%' }} />
                  <div className="flex-1 rounded-t bg-blue-500" style={{ height: '60%' }} />
                  <div className="flex-1 rounded-t bg-amber-500" style={{ height: '45%' }} />
                  <div className="flex-1 rounded-t bg-amber-500" style={{ height: '35%' }} />
                  <div className="flex-1 rounded-t bg-red-500" style={{ height: '25%' }} />
                  <div className="flex-1 rounded-t bg-red-500" style={{ height: '15%' }} />
                  <div className="flex-1 rounded-t bg-red-500" style={{ height: '8%' }} />
                </div>
              </div>

              <p className="mt-3 text-xs font-medium text-muted-foreground">
                Gradual decay detected — light refresh recommended
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}