/**
 * COPY-PASTE TEMPLATE: Add Industry Schema to Any Industry Page
 *
 * Replace placeholders:
 * - INDUSTRY_SLUG: The kebab-case industry name (e.g., "health-care")
 * - INDUSTRY_NAME: PascalCase name (e.g., "Healthcare")
 * - industry-name: lowercase name (e.g., "healthcare")
 */

// ============================================
// STEP 1: Add import at top of page file
// ============================================

import IndustryJsonLd from "@/components/IndustryJsonLd";

// ============================================
// STEP 2A: WITH FAQs - Add this before return
// ============================================

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

  // Define FAQs for schema (match your UI[lang].t FAQ keys)
  const industrynameFAQs = [
    { question: t.industrynameFAQQ1, answer: t.industrynameFAQA1 },
    { question: t.industrynameFAQQ2, answer: t.industrynameFAQA2 },
    { question: t.industrynameFAQQ3, answer: t.industrynameFAQA3 },
    { question: t.industrynameFAQQ4, answer: t.industrynameFAQA4 },
    { question: t.industrynameFAQQ5, answer: t.industrynameFAQA5 },
  ];

  return (
    <main dir={dir}>
      {/* Add schema component */}
      <IndustryJsonLd
        industry="INDUSTRY-SLUG"
        lang={params.lang}
        faqs={industrynameFAQs}
      />

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

// ============================================
// STEP 2B: WITHOUT FAQs - Add this before return
// ============================================

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

  return (
    <main dir={dir}>
      {/* Add schema component (no FAQs) */}
      <IndustryJsonLd industry="INDUSTRY-SLUG" lang={params.lang} />

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

// ============================================
// COMPLETE EXAMPLES FOR ALL 15 INDUSTRIES
// ============================================

/*
// 1. HEALTH-CARE
<IndustryJsonLd industry="health-care" lang={params.lang} faqs={healthcareFAQs} />

// 2. BEAUTY-WELLNESS
<IndustryJsonLd industry="beauty-wellness" lang={params.lang} faqs={beautyWellnessFAQs} />

// 3. EDUCATION
<IndustryJsonLd industry="education" lang={params.lang} faqs={educationFAQs} />

// 4. SPORTS-ACADEMIES
<IndustryJsonLd industry="sports-academies" lang={params.lang} faqs={sportsAcademiesFAQs} />

// 5. RETAIL-SERVICES
<IndustryJsonLd industry="retail-services" lang={params.lang} faqs={retailServicesFAQs} />

// 6. FOOD-LEISURE
<IndustryJsonLd industry="food-leisure" lang={params.lang} faqs={foodLeisureFAQs} />

// 7. EVENTS-VENUES
<IndustryJsonLd industry="events-venues" lang={params.lang} faqs={eventsVenuesFAQs} />

// 8. PROPERTY-FACILITIES
<IndustryJsonLd industry="property-facilities" lang={params.lang} faqs={propertyFacilitiesFAQs} />

// 9. HOTELS-ACCOMMODATION
<IndustryJsonLd industry="hotels-accommodation" lang={params.lang} faqs={hotelsAccommodationFAQs} />

// 10. HOME-SERVICES-TRADES
<IndustryJsonLd industry="home-services-trades" lang={params.lang} faqs={homeServicesTradesFAQs} />

// 11. PET-SERVICES
<IndustryJsonLd industry="pet-services" lang={params.lang} faqs={petServicesFAQs} />

// 12. PUBLIC-SECTOR
<IndustryJsonLd industry="public-sector" lang={params.lang} faqs={publicSectorFAQs} />

// 13. NONPROFIT-COMMUNITY
<IndustryJsonLd industry="nonprofit-community" lang={params.lang} faqs={nonprofitCommunityFAQs} />

// 14. MOBILITY-INDUSTRY
<IndustryJsonLd industry="mobility-industry" lang={params.lang} faqs={mobilityIndustryFAQs} />

// 15. VEHICLE-RENTAL-CHAUFFEUR
<IndustryJsonLd industry="vehicle-rental-chauffeur" lang={params.lang} faqs={vehicleRentalChauffeurFAQs} />
*/

// ============================================
// REAL-WORLD EXAMPLE: Healthcare Page
// ============================================

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

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

const HealthcareFAQ = dynamic(() => import("./components/HealthcareFAQ"));

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;

  // 2. Define FAQs
  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" dir={dir}>
      {/* 3. Add schema component */}
      <IndustryJsonLd
        industry="health-care"
        lang={params.lang}
        faqs={healthcareFAQs}
      />

      {/* 4. Rest of page content */}
      <HealthcareHero lang={params.lang} />
      <BookingMethodsSection lang={params.lang} />
      {/* ... other sections ... */}
      <HealthcareFAQ lang={params.lang} />
    </main>
  );
}

// ============================================
// VERIFICATION CHECKLIST
// ============================================

/*
After adding the component, verify:

1. ✅ Import statement added
2. ✅ Correct industry slug used (kebab-case)
3. ✅ FAQs extracted and defined (if page has FAQs)
4. ✅ Component placed early in JSX return
5. ✅ lang prop passed correctly
6. ✅ Build succeeds: npm run build
7. ✅ No TypeScript errors: npm run type-check
8. ✅ Schema appears in page source (view-source:)
9. ✅ Test EN version works
10. ✅ Test AR version works
11. ✅ Google Rich Results Test passes
12. ✅ Schema.org validator passes

Test URLs:
- EN: http://localhost:9000/en/industries/INDUSTRY-SLUG
- AR: http://localhost:9000/ar/industries/INDUSTRY-SLUG
*/

// ============================================
// COMMON FAQ PATTERNS
// ============================================

// Pattern 1: Standard 5 FAQs
const faqs = [
  { question: t.industryFAQQ1, answer: t.industryFAQA1 },
  { question: t.industryFAQQ2, answer: t.industryFAQA2 },
  { question: t.industryFAQQ3, answer: t.industryFAQA3 },
  { question: t.industryFAQQ4, answer: t.industryFAQA4 },
  { question: t.industryFAQQ5, answer: t.industryFAQA5 },
];

// Pattern 2: Variable number of FAQs
const faqs = [
  { question: t.faqQ1, answer: t.faqA1 },
  { question: t.faqQ2, answer: t.faqA2 },
  { question: t.faqQ3, answer: t.faqA3 },
  // Add more as needed
];

// Pattern 3: From array map (if FAQs in page already)
// If you already have this in your page:
const faqsInPage = [
  { q: t.faqQ1, a: t.faqA1 },
  { q: t.faqQ2, a: t.faqA2 },
];

// Convert to schema format:
const faqsForSchema = faqsInPage.map((faq) => ({
  question: faq.q,
  answer: faq.a,
}));

// ============================================
// TROUBLESHOOTING
// ============================================

// Error: "Type 'string' is not assignable to type 'IndustrySlug'"
// Fix: Make sure you're using one of the exact slugs:
const validSlugs = [
  "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",
];

// Error: Schema not appearing in page
// Fix: Make sure component is in JSX return, not just defined

// Bad:
function Page() {
  const schema = <IndustryJsonLd industry="health-care" lang="en" />;
  return <main>...</main>;
}

// Good:
function Page() {
  return (
    <main>
      <IndustryJsonLd industry="health-care" lang="en" />
      ...
    </main>
  );
}

// Error: FAQs not matching
// Fix: Use exact same text from translations

// Bad (different text):
const faqs = [{ question: "How does it work?", answer: t.faqA1 }];

// Good (matching text):
const faqs = [{ question: t.faqQ1, answer: t.faqA1 }];

// ============================================
// QUICK TEST COMMANDS
// ============================================

// 1. Build test
// npm run build

// 2. Type check
// npm run type-check

// 3. Dev server
// npm run dev
// Visit: http://localhost:9000/en/industries/health-care

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

// 5. Check all industries (bash)
/*
for industry in 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; do
  echo "Testing: $industry"
  curl -s "http://localhost:9000/en/industries/$industry" | grep -c "application/ld+json"
done
*/

// ============================================
// END OF TEMPLATE
// ============================================
