import React from 'react';
import { Link } from 'react-router-dom';
import { featuredSeoLinks } from '../seo/catalog.js';
import { buildUploadPath, trackEvent } from '../../utils/tracking.js';

const intents = featuredSeoLinks.map((item, index) => ({
  ...item,
  intentLabel: item.title.includes('für') ? 'Schnellstart-Suchintent' : 'Dein Profilbild-Fokus',
  expectedOutcome: ['Mehr klare Votes', 'Besseres erstes Bild', 'Schnelleres Matching', 'Mehr Feedback-Klarheit', 'Einfacher Vergleich', 'Professioneller Auftritt'][index % 6]
}));

export const HomeTrafficMagnet = () => {
  const onIntentClick = (slug) => {
    void trackEvent('seo_intent_click', {
      source: 'home',
      surface: 'intent_tile',
      entryPoint: slug,
      meta: { target: slug }
    });
  };

  const onUploadFromIntent = (slug) => {
    void trackEvent('seo_intent_upload_click', {
      source: 'home',
      surface: 'intent_cta',
      entryPoint: `home_${slug}`,
      meta: { target: slug }
    });
  };

  const onQuestionClick = () => {
    void trackEvent('home_faq_click', { source: 'home', surface: 'faq_intro', entryPoint: 'traffic_magnet' });
  };

  return (
    <section className="mt-8">
      <div className="rounded-2xl border bg-base-100 p-4 md:p-6">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <div className="inline-flex rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Traffic-Magnet-Pfad</div>
            <h2 className="mt-3 text-xl font-black">Direkt zu deiner Frage, direkt zur Antwort</h2>
            <p className="mt-2 text-sm text-gray-600 max-w-2xl">
              Klick dich direkt in die Suchintention, die zu dir passt – von „LinkedIn-Profilbild“ bis „Bewerbungsfoto“ – und starte dann sofort den Upload-Flow.
            </p>
          </div>
          <a href="#home-faq" onClick={onQuestionClick} className="btn btn-sm btn-outline" aria-label="FAQ öffnen">FAQ anzeigen</a>
        </div>

        <div className="mt-4 grid gap-3 md:grid-cols-2 lg:grid-cols-4">
          {intents.map((item) => (
            <article key={item.slug} className="rounded-xl border bg-white p-4">
              <p className="text-xs uppercase tracking-wide text-primary font-semibold">{item.intentLabel}</p>
              <h3 className="mt-2 text-base font-bold">{item.title}</h3>
              <p className="mt-1 text-sm text-gray-600">{item.expectedOutcome}</p>
              <div className="mt-3 flex gap-2">
                <Link
                  to={`/${item.slug}/`}
                  className="btn btn-xs btn-outline"
                  onClick={() => onIntentClick(item.slug)}
                >
                  Ratgeber lesen
                </Link>
                <Link
                  to={buildUploadPath(`home_${item.slug.replace(/-/g, '_')}`)}
                  className="btn btn-xs btn-primary"
                  onClick={() => onUploadFromIntent(item.slug)}
                >
                  Direkt testen
                </Link>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};