# IndustryJsonLd Component - Usage Guide

## Overview

The `IndustryJsonLd` component generates industry-specific structured data (schema.org) for SEO optimization. It creates both `SoftwareApplication` and `FAQPage` schemas tailored to each of Mawidi's 15 industries.

## Quick Start

### Basic Usage (Without FAQs)

```tsx
import IndustryJsonLd from "@/components/IndustryJsonLd";

export default function HealthcarePage({ params }: { params: { lang: Lang } }) {
  return (
    <main>
      {/* Add schema in the page head/body */}
      <IndustryJsonLd industry="health-care" lang={params.lang} />

      {/* Rest of your page content */}
      <HealthcareHero lang={params.lang} />
      {/* ... */}
    </main>
  );
}
```

### Advanced Usage (With FAQs)

```tsx
import IndustryJsonLd from "@/components/IndustryJsonLd";
import { UI, type Lang } from "@/lib/config";

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

  // Define FAQs for the page
  const faqs = [
    { question: t.beautyFAQQ1, answer: t.beautyFAQA1 },
    { question: t.beautyFAQQ2, answer: t.beautyFAQA2 },
    { question: t.beautyFAQQ3, answer: t.beautyFAQA3 },
    { question: t.beautyFAQQ4, answer: t.beautyFAQA4 },
  ];

  return (
    <main>
      {/* Schema with FAQs */}
      <IndustryJsonLd
        industry="beauty-wellness"
        lang={params.lang}
        faqs={faqs}
      />

      {/* Page content */}
      <BeautyHero lang={params.lang} />
      {/* ... */}
    </main>
  );
}
```

## Supported Industries

| Industry Slug              | Schema Category              | Target Audience                      |
| -------------------------- | ---------------------------- | ------------------------------------ |
| `health-care`              | HealthApplication            | Clinics, hospitals, medical centers  |
| `beauty-wellness`          | BusinessApplication          | Salons, spas, wellness centers       |
| `education`                | EducationalApplication       | Schools, tutoring centers, academies |
| `sports-academies`         | SportsApplication            | Sports clubs, fitness centers, gyms  |
| `retail-services`          | BusinessApplication          | Retail stores, service centers       |
| `food-leisure`             | FoodEstablishmentReservation | Restaurants, cafes, lounges          |
| `events-venues`            | EventApplication             | Event spaces, conference centers     |
| `property-facilities`      | RealEstateApplication        | Real estate, facility management     |
| `hotels-accommodation`     | LodgingReservation           | Hotels, resorts, vacation rentals    |
| `home-services-trades`     | HomeAndConstructionBusiness  | Plumbers, electricians, maintenance  |
| `pet-services`             | PetStore                     | Veterinary, grooming, boarding       |
| `public-sector`            | GovernmentApplication        | Government offices, public services  |
| `nonprofit-community`      | NonprofitType                | NGOs, community centers              |
| `mobility-industry`        | AutomotiveBusiness           | Auto service, car wash, maintenance  |
| `vehicle-rental-chauffeur` | RentalCarReservation         | Car rental, chauffeur services       |

## Complete Example: Healthcare Page

```tsx
// app/[lang]/industries/health-care/page.tsx
import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import type { Metadata } from "next";
import IndustryJsonLd from "@/components/IndustryJsonLd";
import HealthcareHero from "./components/HealthcareHero";
import HealthcareFAQ from "./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;

  // Healthcare 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}>
      {/* Add structured data schema */}
      <IndustryJsonLd
        industry="health-care"
        lang={params.lang}
        faqs={healthcareFAQs}
      />

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

      {/* Other sections... */}
      <HealthcareFAQ lang={params.lang} />
    </main>
  );
}
```

## Generated Schema Features

### SoftwareApplication Schema Includes:

- Industry-specific name and description
- Appropriate applicationCategory
- Pricing information ($149/month)
- Feature list tailored to industry
- GCC area served (SA, AE, QA, KW, BH, OM)
- Bilingual support (Arabic/English)
- Aggregate rating (4.8/5)
- Sample review
- Publisher and author information

### FAQPage Schema Includes:

- Question and Answer pairs
- Proper schema.org structure
- Industry-specific content

## Migration Guide for Existing Pages

### Step 1: Import the Component

```tsx
import IndustryJsonLd from "@/components/IndustryJsonLd";
```

### Step 2: Extract FAQs from FAQ Component

If you have an FAQ component like `HealthcareFAQ.tsx`:

```tsx
// Before (in FAQ component)
const faqs = [
  { q: t.healthcareFAQQ1, a: t.healthcareFAQA1 },
  { q: t.healthcareFAQQ2, a: t.healthcareFAQA2 },
];

// After (in page component)
const faqsForSchema = [
  { question: t.healthcareFAQQ1, answer: t.healthcareFAQA1 },
  { question: t.healthcareFAQQ2, answer: t.healthcareFAQA2 },
];
```

### Step 3: Add to Page Component

```tsx
export default function IndustryPage({ params }: { params: { lang: Lang } }) {
  return (
    <main>
      <IndustryJsonLd
        industry="your-industry-slug"
        lang={params.lang}
        faqs={faqsForSchema}
      />

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

## SEO Benefits

1. **Rich Snippets**: Google can display app features, pricing, and ratings
2. **FAQ Rich Results**: FAQs may appear directly in search results
3. **Industry Targeting**: Specific schema types help Google understand content
4. **Local SEO**: GCC area served helps with regional searches
5. **Multilingual**: Proper language tags for Arabic/English content

## Testing the Schema

### Google Rich Results Test

1. Visit: https://search.google.com/test/rich-results
2. Enter your page URL or paste the schema
3. Verify SoftwareApplication and FAQPage appear correctly

### Schema Markup Validator

1. Visit: https://validator.schema.org/
2. Paste the generated JSON-LD
3. Check for validation errors

### Browser DevTools

```javascript
// In browser 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));
});
```

## Best Practices

1. **Place schema early**: Add `<IndustryJsonLd>` near the top of your page component
2. **Match FAQs**: Ensure FAQ schema questions match visible FAQ content
3. **Update regularly**: Keep descriptions and features current
4. **Test both languages**: Verify schema works for both Arabic and English pages
5. **Monitor search console**: Check Google Search Console for schema errors

## Troubleshooting

### Schema not appearing in Google

- Wait 1-2 weeks for Google to crawl and index
- Check robots.txt isn't blocking the page
- Verify page is in sitemap.xml
- Use URL Inspection tool in Search Console

### Validation errors

- Ensure all required properties are present
- Check date formats (ISO 8601)
- Verify URLs are absolute, not relative
- Confirm price is a valid number

### FAQ schema not showing

- Ensure visible FAQs match schema FAQs
- Check questions are actual questions (end with ?)
- Verify answers are comprehensive (50+ chars)
- Only one FAQPage schema per page

## Integration Checklist

For each industry page:

- [ ] Import `IndustryJsonLd` component
- [ ] Add component to page with correct industry slug
- [ ] Pass language parameter
- [ ] Extract and format FAQs if page has them
- [ ] Test with Google Rich Results Test
- [ ] Validate with Schema.org validator
- [ ] Check both English and Arabic versions
- [ ] Monitor Search Console for errors
- [ ] Update sitemap if needed
- [ ] Track rankings for target keywords

## Performance Notes

- Component renders only JSON-LD scripts (minimal overhead)
- No client-side JavaScript required
- Static data (no API calls)
- Cached with page revalidation
- Does not affect LCP or CLS metrics