/**
 * EXAMPLE: How to Add IndustryJsonLd to Beauty-Wellness Page
 *
 * This file shows the BEFORE and AFTER of adding schema to an industry page.
 * Copy the AFTER version pattern to all 15 industry pages.
 */

// ============================================
// BEFORE (Current beauty-wellness/page.tsx)
// ============================================

import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;

  return {
    title: `${t.beautyWellnessTitle} | ${SITE.brand}`,
    description: t.beautyWellnessHeroSubline,
    openGraph: {
      title: `${t.beautyWellnessTitle} | ${SITE.brand}`,
      description: t.beautyWellnessHeroSubline,
      type: "website",
    },
  };
}

export default function BeautyWellnessPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;

  return (
    <main className="min-h-screen bg-[#FAFAFA]" dir={dir}>
      {/* Page content... */}
    </main>
  );
}

// ============================================
// AFTER (With IndustryJsonLd Component)
// ============================================

import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";
import IndustryJsonLd from "@/components/IndustryJsonLd"; // ✅ ADD THIS IMPORT

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;

  return {
    title: `${t.beautyWellnessTitle} | ${SITE.brand}`,
    description: t.beautyWellnessHeroSubline,
    openGraph: {
      title: `${t.beautyWellnessTitle} | ${SITE.brand}`,
      description: t.beautyWellnessHeroSubline,
      type: "website",
    },
  };
}

export default function BeautyWellnessPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;

  // ✅ DEFINE FAQs FOR SCHEMA (extracted from Section 09 of the page)
  const beautyWellnessFAQs = [
    { question: t.beautyWellnessFAQQ1, answer: t.beautyWellnessFAQA1 },
    { question: t.beautyWellnessFAQQ2, answer: t.beautyWellnessFAQA2 },
    { question: t.beautyWellnessFAQQ3, answer: t.beautyWellnessFAQA3 },
    { question: t.beautyWellnessFAQQ4, answer: t.beautyWellnessFAQA4 },
    { question: t.beautyWellnessFAQQ5, answer: t.beautyWellnessFAQA5 },
  ];

  return (
    <main className="min-h-screen bg-[#FAFAFA]" dir={dir}>
      {/* ✅ ADD SCHEMA COMPONENT EARLY IN THE PAGE */}
      <IndustryJsonLd
        industry="beauty-wellness"
        lang={params.lang}
        faqs={beautyWellnessFAQs}
      />

      {/* Hero Section - Editorial Light Style */}
      <section className="relative bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4] overflow-hidden">
        {/* Rest of page content... */}
      </section>

      {/* Section 09: FAQs - This content now matches the schema */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-4xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                09
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.beautyWellnessFAQTitle}
            </h2>
          </div>

          <div className="space-y-4">
            {beautyWellnessFAQs.map((faq, idx) => (
              <div
                key={faq.question}
                className="bg-white p-6 border border-slate-200"
              >
                <div className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {faq.question}
                    </h3>
                    <p className="text-[#64748B]">{faq.answer}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Rest of sections... */}
    </main>
  );
}

// ============================================
// EXAMPLE FOR HEALTHCARE PAGE (with existing FAQ component)
// ============================================

import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import type { Metadata } from "next";
import dynamic from "next/dynamic";
import IndustryJsonLd from "@/components/IndustryJsonLd"; // ✅ ADD THIS

// Static imports
import HealthcareHero from "./components/HealthcareHero";
import BookingMethodsSection from "./components/BookingMethodsSection";

// Dynamic imports
const HealthcareFAQ = dynamic(() => import("./components/HealthcareFAQ"), {
  loading: () => <SectionSkeleton />,
});

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;

  return {
    title: `${t.healthcareTitle} | ${SITE.brand}`,
    description: t.healthcareHeroSubline,
    openGraph: {
      title: `${t.healthcareTitle} | ${SITE.brand}`,
      description: t.healthcareHeroSubline,
      type: "website",
    },
  };
}

export default function HealthcarePage({ params }: { params: { lang: Lang } }) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;

  // ✅ DEFINE FAQs FOR SCHEMA
  const healthcareFAQs = [
    { question: t.healthcareFAQQ1, answer: t.healthcareFAQA1 },
    { question: t.healthcareFAQQ2, answer: t.healthcareFAQA2 },
    { question: t.healthcareFAQQ3, answer: t.healthcareFAQA3 },
    { question: t.healthcareFAQQ4, answer: t.healthcareFAQA4 },
    { question: t.healthcareFAQQ5, answer: t.healthcareFAQA5 },
  ];

  return (
    <main
      className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800"
      dir={dir}
    >
      {/* ✅ ADD SCHEMA COMPONENT */}
      <IndustryJsonLd
        industry="health-care"
        lang={params.lang}
        faqs={healthcareFAQs}
      />

      {/* Hero Section */}
      <HealthcareHero lang={params.lang} />

      {/* Booking Methods */}
      <BookingMethodsSection lang={params.lang} />

      {/* Other sections... */}

      {/* FAQ Section - FAQs are passed to component and schema */}
      <HealthcareFAQ lang={params.lang} />
    </main>
  );
}

// ============================================
// EXAMPLE FOR SIMPLE PAGE (No FAQs Yet)
// ============================================

import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import type { Metadata } from "next";
import IndustryJsonLd from "@/components/IndustryJsonLd";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;

  return {
    title: `${t.educationTitle} | ${SITE.brand}`,
    description: t.educationHeroSubline,
    openGraph: {
      title: `${t.educationTitle} | ${SITE.brand}`,
      description: t.educationHeroSubline,
      type: "website",
    },
  };
}

export default function EducationPage({ params }: { params: { lang: Lang } }) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;

  // ✅ NO FAQs YET? Just pass empty array or omit faqs prop
  return (
    <main className="min-h-screen" dir={dir}>
      {/* ✅ ADD SCHEMA WITHOUT FAQs */}
      <IndustryJsonLd
        industry="education"
        lang={params.lang}
        // No faqs prop = no FAQPage schema generated
      />

      {/* Page content... */}
    </main>
  );
}

// ============================================
// MIGRATION CHECKLIST FOR ALL 15 INDUSTRIES
// ============================================

/*
CHECKLIST: Apply to all 15 industry pages

☐ health-care
☐ beauty-wellness
☐ education
☐ sports-academies
☐ retail-services
☐ food-leisure
☐ events-venues
☐ property-facilities
☐ hotels-accommodation
☐ home-services-trades
☐ pet-services
☐ public-sector
☐ nonprofit-community
☐ mobility-industry
☐ vehicle-rental-chauffeur

FOR EACH PAGE:
1. ✅ Import IndustryJsonLd component
2. ✅ Extract FAQs from UI[lang].t into array format
3. ✅ Add <IndustryJsonLd> component early in return
4. ✅ Pass correct industry slug
5. ✅ Pass lang={params.lang}
6. ✅ Pass faqs array if page has FAQs
7. ✅ Test with Google Rich Results Test
8. ✅ Validate with Schema.org validator
9. ✅ Test both English and Arabic versions
10. ✅ Monitor Search Console for errors
*/

// ============================================
// TESTING EXAMPLES
// ============================================

/*
1. BROWSER DEVTOOLS TEST:
   Open page in browser, run in console:

   const schemas = Array.from(document.querySelectorAll('script[type="application/ld+json"]'));
   schemas.forEach((s, i) => {
     console.log(`Schema ${i + 1}:`, JSON.parse(s.textContent));
   });

2. GOOGLE RICH RESULTS TEST:
   https://search.google.com/test/rich-results
   - Enter: https://mawidi.com/en/industries/beauty-wellness
   - Check for SoftwareApplication and FAQPage schemas

3. SCHEMA.ORG VALIDATOR:
   https://validator.schema.org/
   - Copy/paste the JSON-LD output
   - Verify no errors

4. SEARCH CONSOLE:
   After deployment, check:
   - Enhancements > FAQ
   - Enhancements > Software Application
   - Look for validation errors or warnings
*/