### Install Project Dependencies

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/README.md

Run this command to install all necessary packages for the project.

```bash
npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/README.md

Use this command to launch the development server and view the website locally.

```bash
npm run dev
```

--------------------------------

### i18next Setup

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Initializes i18next with English, Kannada, and Malayalam locales, enabling browser language detection and caching in localStorage.

```APIDOC
## i18next Setup with Browser Language Detection

`src/i18n.js` initializes i18next with three locales — English (`en`), Kannada (`kn`), and Malayalam (`ml`) — auto-detected from the browser and cached in `localStorage`.

```javascript
// src/i18n.js
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import enTranslations from './locales/en/translations.json'
import knTranslations from './locales/kn/translations.json'
import mlTranslations from './locales/ml/translations.json'

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslations },
      kn: { translation: knTranslations },
      ml: { translation: mlTranslations },
    },
    fallbackLng: 'en',
    debug: false,
    interpolation: { escapeValue: false },
    detection: {
      order: ['localStorage', 'navigator'], // read from localStorage first
      caches: ['localStorage'],             // persist selected language
    },
  })

export default i18n

// Usage inside any component:
// const { t, i18n } = useTranslation()
// t('nav.home')          → "Home" / "ಮನೆ" / "ഹോം"
// i18n.changeLanguage('ml')   → switches to Malayalam
// i18n.language                → current language code
```
```

--------------------------------

### Development Commands

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Essential npm commands for managing project dependencies, starting the development server, building for production, and previewing the production build.

```bash
# Install dependencies
npm install

# Start dev server (http://localhost:5173)
npm run dev

# Production build
npm run build

# Preview production build locally
npm run preview

```

--------------------------------

### Example Google Maps Embed URL Structure

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/GOOGLE_MAPS_SETUP.md

An example of a fully constructed Google Maps embed URL, demonstrating various parameters that can be appended for customization.

```url
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3887.123!2d75.123!3d12.987!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTLCsDU5JzE1LjYiTiA3NcKwMDcnMjQuNCJF!5e0!3m2!1sen!2sin!4v1234567890!5m2!1sen!2sin
```

--------------------------------

### Client-Side Routing Configuration in React

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

This snippet demonstrates the client-side routing setup using React Router v6 within the App component. It includes the declaration of all twelve page routes and the mounting of global components like Header, Footer, and utility buttons.

```jsx
// src/App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'
import WhatsAppButton from './components/WhatsAppButton'
import ScrollToTop from './components/ScrollToTop'
import ScrollToTopButton from './components/ScrollToTopButton'
import Home from './pages/Home'
// ... other page imports

function App() {
  return (
    <Router>
      <ScrollToTop />                  {/* resets scroll on every route change */}
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow">
          <Routes>
            <Route path="/"                   element={<Home />} />
            <Route path="/about"              element={<About />} />
            <Route path="/our-story"          element={<OurStory />} />
            <Route path="/services"           element={<Services />} />
            <Route path="/sermons"            element={<Sermons />} />
            <Route path="/events"             element={<Events />} />
            <Route path="/prayer-request"     element={<PrayerRequest />} />
            <Route path="/giving"             element={<Giving />} />
            <Route path="/gallery"            element={<Gallery />} />
            <Route path="/contact"            element={<Contact />} />
            <Route path="/ministries"         element={<Ministries />} />
            <Route path="/statement-of-faith" element={<StatementOfFaith />} />
          </Routes>
        </main>
        <Footer />
        <WhatsAppButton />             {/* floating WhatsApp chat widget */}
        <ScrollToTopButton />          {/* visible after 300 px scroll */}
      </div>
    </Router>
  )
}
export default App

```

--------------------------------

### Build and Preview Project Locally

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/HOSTING.md

Run these commands to build your project for production and test it locally before deployment.

```bash
npm run build
# Test locally
npm run preview
```

--------------------------------

### Build Project for Production

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/README.md

Execute this command to create an optimized production build of the website.

```bash
npm run build
```

--------------------------------

### Initialize Git Repository and Push to GitHub

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/HOSTING.md

Commands to initialize a Git repository, add files, commit changes, link to a remote GitHub repository, and push the code.

```bash
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/ipc-hebron.git
git push -u origin main
```

--------------------------------

### React App Entry Point and Root Mounting

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

This snippet shows the main entry point for the React application, where the app is rendered in strict mode and i18n is initialized. Ensure i18n is imported before the App component renders.

```jsx
// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import './i18n' // must be imported before App renders

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

```

--------------------------------

### GitHub Pages Build and Deploy Steps

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/HOSTING.md

Steps to build your site and deploy it to the gh-pages branch for GitHub Pages. This method requires manual build and push.

```bash
Build your site: npm run build
Push dist folder to gh-pages branch
Enable GitHub Pages in repository settings
```

--------------------------------

### Netlify Build Command and Publish Directory

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/HOSTING.md

Specify the build command and publish directory for Netlify deployments. Ensure these match your project's build output.

```bash
Build command: npm run build
Publish directory: dist
```

--------------------------------

### Project Folder Structure

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/ARCHITECTURE.md

Illustrates the standard directory structure for organizing React components, services, utilities, and configuration files.

```tree
src/
├── components/          # Reusable UI components
├── pages/              # Page-level components (routes)
├── services/          # External API integrations
├── utils/             # Utility functions
├── config/             # Configuration files
└── locales/            # Internationalization
```

--------------------------------

### Environment Variables Reference

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Lists essential environment variables for configuring the application, including contact details, EmailJS credentials, Google Calendar API, and YouTube API.

```bash
# .env (all optional — site works with graceful fallbacks)

# Contact
VITE_CONTACT_PHONE=8075029739          # default fallback if not set

# EmailJS
VITE_EMAILJS_SERVICE_ID=service_xxx
VITE_EMAILJS_TEMPLATE_ID=template_xxx      # prayer request template
VITE_EMAILJS_CONTACT_TEMPLATE_ID=template_yyy  # contact form (falls back to TEMPLATE_ID)
VITE_EMAILJS_PUBLIC_KEY=your_public_key

# Google Calendar
VITE_GOOGLE_CALENDAR_API_KEY=AIzaSy...
VITE_GOOGLE_CALENDAR_ID=abc@group.calendar.google.com

# YouTube
VITE_YOUTUBE_CHANNEL_ID=UCxxxxxxxxxxxxxxxxxxxxxxxx
# Note: VITE_GOOGLE_CALENDAR_API_KEY is reused as the YouTube API key
```

--------------------------------

### Initialize i18next with Browser Language Detection

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Sets up i18next for multi-language support, automatically detecting and caching the user's preferred language from the browser. Requires importing translation files for each supported language.

```javascript
// src/i18n.js
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import enTranslations from './locales/en/translations.json'
import knTranslations from './locales/kn/translations.json'
import mlTranslations from './locales/ml/translations.json'

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslations },
      kn: { translation: knTranslations },
      ml: { translation: mlTranslations },
    },
    fallbackLng: 'en',
    debug: false,
    interpolation: { escapeValue: false },
    detection: {
      order: ['localStorage', 'navigator'], // read from localStorage first
      caches: ['localStorage'],             // persist selected language
    },
  })

export default i18n

// Usage inside any component:
// const { t, i18n } = useTranslation()
// t('nav.home')          → "Home" / "ಮನೆ" / "ഹോം"
// i18n.changeLanguage('ml')   → switches to Malayalam
// i18n.language                → current language code

```

--------------------------------

### Add Context/State Management Directory Structure

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/ARCHITECTURE.md

If React Context or other state management solutions are needed, create a 'context' directory to house providers and related logic.

```directory
src/
├── context/
│   ├── AuthContext.jsx
│   └── ThemeContext.jsx
```

--------------------------------

### Load Events with Environment Variable Awareness and Fallback

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Loads events using credentials from `import.meta.env`. Returns an empty array if credentials are not found, allowing the UI to display static fallback data. Includes error handling and periodic refreshing.

```javascript
import { getEvents } from '../services/googleCalendar'

// In a React component:
useEffect(() => {
  const loadEvents = async () => {
    try {
      const events = await getEvents()
      if (events.length > 0) {
        setEvents(events)        // live Google Calendar data
      } else {
        setEvents(fallbackEvents) // static sample data
      }
    } catch (err) {
      setError(err.message)
      setEvents(fallbackEvents)  // always show something
    }
  }

  loadEvents()
  const interval = setInterval(loadEvents, 5 * 60 * 1000) // refresh every 5 min
  return () => clearInterval(interval)
}, [])
```

--------------------------------

### Configure Environment Variables for Google Calendar

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/GOOGLE_CALENDAR_SETUP.md

Set up your API key and Calendar ID in the .env file. Replace placeholders with your actual credentials.

```env
VITE_GOOGLE_CALENDAR_API_KEY=your_api_key_here
VITE_GOOGLE_CALENDAR_ID=your_calendar_id_here
```

--------------------------------

### Configure EmailJS Service

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Sets up EmailJS by reading necessary service IDs, template IDs, and public keys from environment variables. Exposes functions to send emails, throwing an error if configuration is missing.

```javascript
// .env
VITE_EMAILJS_SERVICE_ID=service_xxxxxxx
VITE_EMAILJS_TEMPLATE_ID=template_xxxxxxx          // prayer requests
VITE_EMAILJS_CONTACT_TEMPLATE_ID=template_yyyyyyy  // contact form (optional)
VITE_EMAILJS_PUBLIC_KEY=your_public_key

```

--------------------------------

### Home Page Structure

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

The main landing page component, integrating hero section, daily verse, service schedule, quick links, and testimonials.

```jsx
// Sections rendered by Home:
// 1. Full-screen hero with background image (Home_BackgroundScreen.png), animated title, CTA buttons
// 2. DailyVerse component in a centered card
// 3. Service schedule grid (Sunday 9:30–12:00, Wed 7–8:30 PM, Fri 10:30 AM–12:30 PM, Month-end)
// 4. Quick-links grid (Sermons, Events, Prayer Request, Gallery)
// 5. Testimonials carousel

import { Link } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import DailyVerse from '../components/DailyVerse'
import Testimonials from '../components/Testimonials'
```

--------------------------------

### Add Environment Variables for Production Deployment

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/GOOGLE_CALENDAR_SETUP.md

For production environments like Vercel or Netlify, add your Google Calendar API key and Calendar ID as environment variables in your project settings.

```bash
# Add:
# VITE_GOOGLE_CALENDAR_API_KEY = your API key
# VITE_GOOGLE_CALENDAR_ID = your calendar ID
```

--------------------------------

### Restart Development Server

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/GOOGLE_CALENDAR_SETUP.md

After updating environment variables, restart your development server using npm run dev. This ensures the new configurations are loaded.

```bash
# Stop the current server (Ctrl+C)
# Then restart:
npm run dev
```

--------------------------------

### Header

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A sticky, glassmorphism-style navigation bar that adapts its appearance based on scroll position and language. Includes an 'About' dropdown and responsive navigation elements.

```APIDOC
## Header

### Description
A sticky navigation bar with a glassmorphism effect. Its background changes dynamically as the user scrolls down the page (at 50px). It features an 'About' dropdown menu containing links to 'About Us', 'Our Story', 'Statement of Faith', and 'Ministries'. The layout is responsive and adjusts for different languages, specifically accommodating wider areas for Malayalam and Kannada.

### Props
This component does not require any props as it is intended to be rendered once globally and reads the current language setting internally.

### Usage Example
```jsx
// Typically rendered once in the main App component
import Header from '../components/Header';

<Header />
```

### Features
- **Scroll-aware background**: Changes appearance when scrolling past 50px.
- **Responsive design**: Adapts layout for different screen sizes and languages.
- **'About' dropdown**: Contains nested navigation links.
- **Active route indication**: Links to the current page are visually highlighted.
```

--------------------------------

### Contact Phone Configuration

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Configuration for contact phone number, reading from environment variables and exporting derived values for direct phone links and WhatsApp integration.

```APIDOC
### Contact phone config (`src/config/contact.js`)

Reads the phone number from the `VITE_CONTACT_PHONE` env variable (fallback: `'8075029739'`) and exports three derived values used throughout the app.

```js
// src/config/contact.js
const rawContactPhone = import.meta.env.VITE_CONTACT_PHONE || '8075029739'

export const CONTACT_PHONE         = rawContactPhone.trim()
export const CONTACT_PHONE_LINK    = `tel:${CONTACT_PHONE}`
export const CONTACT_PHONE_WHATSAPP = CONTACT_PHONE.replace(/[^0-9]/g, '')

// Usage in any component:
// import { CONTACT_PHONE, CONTACT_PHONE_LINK, CONTACT_PHONE_WHATSAPP } from '../config/contact'

// <a href={CONTACT_PHONE_LINK}>{CONTACT_PHONE}</a>
// whatsappUrl = `https://wa.me/${CONTACT_PHONE_WHATSAPP}?text=...`
```
```

--------------------------------

### fetchLatestVideos(channelId, apiKey, maxResults?)

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Fetches the latest videos from a YouTube channel by querying the YouTube Data API v3. It derives the uploads playlist ID from the channel ID and returns a structured list of videos.

```APIDOC
## fetchLatestVideos(channelId, apiKey, maxResults?)

### Description
Fetches the latest videos from a YouTube channel by querying the YouTube Data API v3. It derives the uploads playlist ID from the channel ID and returns a structured list of videos.

### Method
(Internal API call, not a direct HTTP endpoint)

### Parameters
#### Path Parameters
- **channelId** (string) - Required - The ID of the YouTube channel (starts with 'UC').
- **apiKey** (string) - Required - The Google API key (can be reused from Google Calendar API key).

#### Query Parameters
- **maxResults** (number) - Optional - The maximum number of videos to retrieve. Defaults to 6.

### Request Example
```javascript
fetchLatestVideos(
  'UCxxxxxxxxxxxxxxxxxxxxxxxx',
  'AIzaSy...',
  6
)
```

### Response
#### Success Response
- **videos** (array) - An array of video objects, each with properties like id, title, description, date, thumbnail, and youtubeUrl.

### Response Example
```json
[
  {
    "id": "dQw4w9WgXcQ",
    "title": "Sunday Sermon — Walking in Faith",
    "description": "Full sermon description...",
    "date": "2025-01-12T08:00:00Z",
    "thumbnail": "https://img.youtube.com/vi/dQw4w9WgXcQ/sddefault.jpg",
    "youtubeUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  }
]
```

### Error Handling
- Handles errors from the YouTube API, such as permission issues (e.g., 403 error).
```

--------------------------------

### Configure Contact Phone Number

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Reads a contact phone number from environment variables with a fallback value. Exports the raw number, a tel link, and a WhatsApp-ready number.

```javascript
// src/config/contact.js
const rawContactPhone = import.meta.env.VITE_CONTACT_PHONE || '8075029739'

export const CONTACT_PHONE         = rawContactPhone.trim()
export const CONTACT_PHONE_LINK    = `tel:${CONTACT_PHONE}`
export const CONTACT_PHONE_WHATSAPP = CONTACT_PHONE.replace(/[^0-9]/g, '')

// Usage in any component:
// import { CONTACT_PHONE, CONTACT_PHONE_LINK, CONTACT_PHONE_WHATSAPP } from '../config/contact'

// <a href={CONTACT_PHONE_LINK}>{CONTACT_PHONE}</a>
// whatsappUrl = `https://wa.me/${CONTACT_PHONE_WHATSAPP}?text=...`

```

--------------------------------

### Project Tech Stack

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Lists the core technologies and their versions used in the project, including React, Vite, Tailwind CSS, and internationalization libraries.

```plaintext
Tech stack:
  React 18.2.0 · Vite 5.0.8 · React Router v6.20.0
  Tailwind CSS 3.3.6 · i18next 25.x · react-i18next 16.x
  @emailjs/browser 4.4.1 · lucide-react 0.294.0

```

--------------------------------

### Load Latest Videos with Error Handling

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Fetches the latest videos using getLatestVideos. Handles successful fetches by setting videos and errors by setting an error message and fallback sermons. This is typically used in a page component like Sermons.

```javascript
import { getLatestVideos } from '../services/youtubeApi'

// In Sermons page:
useEffect(() => {
  getLatestVideos(6)
    .then(videos => {
      setVideos(videos.length > 0 ? videos : fallbackSermons)
    })
    .catch(err => {
      setError(err.message)
      setVideos(fallbackSermons)
    })
}, [])
```

--------------------------------

### Current Architecture Diagram

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/ARCHITECTURE.md

Visual representation of the project's architecture, showing the flow and relationship between Presentation, Service, and Utility layers.

```text
┌─────────────────────────────────────────┐
│         Presentation Layer              │
│  (Components, Pages, UI Components)     │
│                                         │
│  ┌──────────┐  ┌──────────┐          │
│  │  Pages  │  │ Components  │          │
│  └──────────┘  └──────────┘          │
└─────────────────────────────────────────┘
           │              │
           ▼              ▼
┌─────────────────────────────────────────┐
│         Service Layer                    │
│  (API Calls, External Services)         │
│                                         │
│  ┌──────────┐  ┌──────────┐          │
│  │ Services │  │  Config  │          │
│  └──────────┘  └──────────┘          │
└─────────────────────────────────────────┘
           │
           ▼
┌─────────────────────────────────────────┐
│         Utility Layer                   │
│  (Helper Functions, Pure Functions)     │
│                                         │
│  ┌──────────┐                          │
│  │  Utils   │                          │
│  └──────────┘                          │
└─────────────────────────────────────────┘
```

--------------------------------

### EmailJS Configuration

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Configuration for EmailJS, reading necessary environment variables for service ID, template IDs, and public key. It exposes functions for sending emails.

```APIDOC
### EmailJS configuration (`src/config/emailjs.js`)

Reads four environment variables and exposes two async email-sending functions. If any required env var is absent, both functions throw immediately.

```js
// .env
VITE_EMAILJS_SERVICE_ID=service_xxxxxxx
VITE_EMAILJS_TEMPLATE_ID=template_xxxxxxx          // prayer requests
VITE_EMAILJS_CONTACT_TEMPLATE_ID=template_yyyyyyy  // contact form (optional)
VITE_EMAILJS_PUBLIC_KEY=your_public_key
```
```

--------------------------------

### Sermons Page - YouTube Integration

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Displays a grid of YouTube videos, with an inline player that appears on thumbnail click. Fetches latest videos or falls back to hard-coded IDs. Requires YouTube channel ID and Google API key.

```jsx
// Required env vars:
// VITE_YOUTUBE_CHANNEL_ID
// VITE_GOOGLE_CALENDAR_API_KEY  (reused as the Google API key)

// Channel link: https://www.youtube.com/@IPCHebronNeria
// Video card: thumbnail → inline iframe on click, date, relative time, external link
```

--------------------------------

### getEvents()

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

An environment-aware function to load events, with a fallback mechanism. It reads credentials from environment variables and returns an empty array if credentials are not found, allowing for static fallback data display.

```APIDOC
## getEvents()

### Description
An environment-aware function to load events, with a fallback mechanism. It reads credentials from environment variables and returns an empty array if credentials are not found, allowing for static fallback data display.

### Method
(Internal API call, not a direct HTTP endpoint)

### Parameters
None

### Request Example
```javascript
getEvents()
```

### Response
#### Success Response
- **events** (array) - An array of event objects, or an empty array if credentials are not found or an error occurs.

### Response Example
```json
[
  {
    "id": "googleEventId",
    "title": "Youth Conference",
    "date": "2025-02-15",
    "time": "6:00 PM - 8:00 PM",
    "location": "Church Main Hall",
    "description": "Event description...",
    "category": "Youth",
    "googleEventLink": "https://calendar.google.com/...",
    "startDateTime": "2025-02-15T18:00:00.000Z",
    "endDateTime": "2025-02-15T20:00:00.000Z"
  }
]
```

### Error Handling
- Returns an empty array `[]` if environment variables for credentials are not set.
- Catches and handles errors during event loading, ensuring fallback data is displayed.
```

--------------------------------

### getLatestVideos

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Fetches the latest videos from YouTube, with an optional parameter to limit the number of results. Used in the Sermons page to display recent videos.

```APIDOC
## getLatestVideos(maxResults?)

### Description
Fetches the latest videos from YouTube. An optional `maxResults` parameter can be provided to limit the number of videos returned.

### Method Signature
`getLatestVideos(maxResults?: number): Promise<Array<Video>>`

### Parameters
#### Query Parameters
- **maxResults** (number) - Optional - The maximum number of videos to retrieve.

### Usage Example
```javascript
import { getLatestVideos } from '../services/youtubeApi';

getLatestVideos(6)
  .then(videos => {
    // Handle successful retrieval
  })
  .catch(err => {
    // Handle errors
  });
```
```

--------------------------------

### getYouTubeWatchUrl

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Creates the standard YouTube watch URL for a given video ID.

```APIDOC
## getYouTubeWatchUrl(videoId)

### Description
Constructs the standard YouTube watch URL for a given video ID.

### Method Signature
`getYouTubeWatchUrl(videoId: string): string`

### Parameters
#### Path Parameters
- **videoId** (string) - The YouTube video ID.

### Usage Example
```javascript
import { getYouTubeWatchUrl } from '../utils/youtube';

const watchUrl = getYouTubeWatchUrl('dQw4w9WgXcQ');
// → 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
```
```

--------------------------------

### YouTubeEmbed

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A UI component that renders a clickable YouTube video thumbnail. It replaces the thumbnail with a "Watch on YouTube" button upon interaction and supports fallback mechanisms for thumbnails.

```APIDOC
## YouTubeEmbed

### Description
A UI component that displays a clickable 16:9 YouTube video thumbnail. When clicked, it transforms to show a larger thumbnail and a "Watch on YouTube" button. It avoids direct iframe embedding and includes thumbnail fallback logic (maxres to high quality) on image load errors.

### Props
- **videoId** (string) - The YouTube video ID. Can be used as an alternative to `youtubeUrl`.
- **youtubeUrl** (string) - A YouTube URL in any format. Can be used as an alternative to `videoId`.
- **title** (string) - Required - The title of the video, used for accessibility.

### Usage Example
```jsx
import YouTubeEmbed from '../components/YouTubeEmbed';

<YouTubeEmbed
  videoId="dQw4w9WgXcQ"
  title="Sunday Sermon — Walking in Faith"
/>

<YouTubeEmbed
  youtubeUrl="https://youtu.be/dQw4w9WgXcQ"
  title="The Power of Prayer"
/>
```

### Error Handling
If neither `videoId` nor `youtubeUrl` is provided or valid, the component renders an error placeholder.
```

--------------------------------

### Generate YouTube Thumbnail URL

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Creates a URL for a YouTube video thumbnail. Supports various quality levels from 'default' to 'maxres'. Essential for displaying video previews.

```javascript
import { getYouTubeThumbnailUrl } from '../utils/youtube'

// quality: 'default' | 'medium' | 'high' | 'standard' | 'maxres'
getYouTubeThumbnailUrl('dQw4w9WgXcQ', 'maxres')
// → 'https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg'

getYouTubeThumbnailUrl('dQw4w9WgXcQ', 'high')
// → 'https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg'

getYouTubeThumbnailUrl('dQw4w9WgXcQ', 'medium')
// → 'https://img.youtube.com/vi/dQw4w9WgXcQ/mqdefault.jpg'
```

--------------------------------

### Add Types Directory Structure (TypeScript)

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/ARCHITECTURE.md

For TypeScript projects, a 'types' directory is recommended for organizing type definitions, improving code clarity and maintainability.

```directory
src/
├── types/
│   ├── events.ts
│   └── sermon.ts
```

--------------------------------

### Add Constants Directory Structure

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/ARCHITECTURE.md

Centralize application-wide constants, such as route paths or API endpoints, in a 'constants' directory to avoid magic strings and numbers.

```directory
src/
├── constants/
│   ├── routes.js
│   └── api.js
```

--------------------------------

### Header Component Usage

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A sticky glassmorphism navigation bar that adjusts its appearance based on scroll position and language. It includes an 'About' dropdown and a responsive hamburger menu. No props are needed as it manages its state and reads language internally.

```jsx
// Header is rendered once in App.jsx — no props
// It reads i18n.language internally to adjust font/layout for Malayalam/Kannada
<Header />

// Active route detection:
const isActive = (path) => location.pathname === path
// Active links get a glowing underline; dropdown items get a filled indicator dot.
```

--------------------------------

### YouTubeEmbed Component Usage

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Renders a clickable YouTube thumbnail that replaces with a watch button on click. It accepts either a video ID or a full YouTube URL. Handles invalid inputs by showing an error placeholder and falls back thumbnail quality on error.

```jsx
import YouTubeEmbed from '../components/YouTubeEmbed'

// Accept either a direct video ID or any YouTube URL format:
<YouTubeEmbed
  videoId="dQw4w9WgXcQ"
  title="Sunday Sermon — Walking in Faith"
/>

<YouTubeEmbed
  youtubeUrl="https://youtu.be/dQw4w9WgXcQ"
  title="The Power of Prayer"
/>

// If both videoId and youtubeUrl are absent / invalid, renders an error placeholder.
// Thumbnail falls back from maxres → high on image load error.
```

--------------------------------

### Testimonials

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A UI component that displays a carousel of member testimonials with navigation controls.

```APIDOC
## Testimonials

### Description
A carousel component that showcases up to five member testimonials. It includes navigation arrows for moving between testimonials and clickable dot indicators for direct access to specific testimonials.

### Props
This component does not require any props. Testimonials are hard-coded and translatable.

### Usage Example
```jsx
import Testimonials from '../components/Testimonials';

<Testimonials />
```

### Navigation
- **Next/Previous Arrows**: Cycle through testimonials.
- **Dot Indicators**: Allow direct navigation to any testimonial in the sequence.
```

--------------------------------

### Generate YouTube Embed URL

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Constructs a YouTube embed URL for a given video ID. Allows customization of query parameters like autoplay and rel. Returns null if the video ID is null.

```javascript
import { getYouTubeEmbedUrl } from '../utils/youtube'

getYouTubeEmbedUrl('dQw4w9WgXcQ')
// → 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&modestbranding=1&rel=1&showinfo=0'

getYouTubeEmbedUrl('dQw4w9WgXcQ', { autoplay: true, rel: false })
// → 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&modestbranding=1&rel=0&showinfo=0'

getYouTubeEmbedUrl(null)
// → null
```

--------------------------------

### fetchGoogleCalendarEvents(calendarId, apiKey, maxResults?)

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Fetches and formats events from a Google Calendar. It queries the Google Calendar REST API, filters out irrelevant events, and normalizes the remaining events into a consistent internal format. Requires API key and calendar ID.

```APIDOC
## fetchGoogleCalendarEvents(calendarId, apiKey, maxResults?)

### Description
Fetches and formats events from a Google Calendar. It queries the Google Calendar REST API, filters out irrelevant events, and normalizes the remaining events into a consistent internal format. Requires API key and calendar ID.

### Method
GET

### Endpoint
(Internal API call, not a direct HTTP endpoint)

### Parameters
#### Path Parameters
- **calendarId** (string) - Required - The ID of the Google Calendar.
- **apiKey** (string) - Required - The API key for accessing Google Calendar.

#### Query Parameters
- **maxResults** (number) - Optional - The maximum number of events to retrieve. Defaults to 50.

### Request Example
```javascript
fetchGoogleCalendarEvents(
  'abc123@group.calendar.google.com',
  'AIzaSy...',
  20
)
```

### Response
#### Success Response (200)
- **events** (array) - An array of event objects, each with properties like id, title, date, time, location, description, category, googleEventLink, startDateTime, and endDateTime.

### Response Example
```json
[
  {
    "id": "googleEventId",
    "title": "Youth Conference",
    "date": "2025-02-15",
    "time": "6:00 PM - 8:00 PM",
    "location": "Church Main Hall",
    "description": "Event description...",
    "category": "Youth",
    "googleEventLink": "https://calendar.google.com/...",
    "startDateTime": "2025-02-15T18:00:00.000Z",
    "endDateTime": "2025-02-15T20:00:00.000Z"
  }
]
```

### Error Handling
- Handles errors from the Google Calendar API (e.g., 403 Forbidden).
- Handles cases where calendar sharing settings are too restrictive.
```

--------------------------------

### Contact Page - Form and Map Embed

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Provides contact information, a contact form powered by EmailJS, and an embedded Google Map of the church location. Requires EmailJS configuration.

```jsx
// Map embed: IPC Hebron Church, Neria, Karnataka
// iframe src: https://www.google.com/maps/embed?pb=!1m18!...
// Map title: "IPC Hebron Church Location"
```

--------------------------------

### getYouTubeEmbedUrl

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Constructs a YouTube embed URL for a given video ID, with options for playback and display.

```APIDOC
## getYouTubeEmbedUrl(videoId, options?)

### Description
Builds a YouTube embed URL for a specified video ID. Optional `options` can customize playback behavior and display settings.

### Method Signature
`getYouTubeEmbedUrl(videoId: string | null, options?: { autoplay?: boolean, rel?: boolean }): string | null`

### Parameters
#### Path Parameters
- **videoId** (string | null) - The YouTube video ID.
#### Query Parameters
- **options** (object) - Optional - Configuration for the embed URL.
  - **autoplay** (boolean) - Whether the video should autoplay. Defaults to `false`.
  - **rel** (boolean) - Whether to show related videos after playback. Defaults to `true`.

### Usage Example
```javascript
import { getYouTubeEmbedUrl } from '../utils/youtube';

const embedUrl = getYouTubeEmbedUrl('dQw4w9WgXcQ');
// → 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&modestbranding=1&rel=1&showinfo=0'

const customEmbedUrl = getYouTubeEmbedUrl('dQw4w9WgXcQ', { autoplay: true, rel: false });
// → 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&modestbranding=1&rel=0&showinfo=0'

const nullUrl = getYouTubeEmbedUrl(null);
// → null
```
```

--------------------------------

### Generate YouTube Watch URL

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Builds the standard YouTube watch URL for a given video ID. Used for linking users directly to a video on YouTube.

```javascript
import { getYouTubeWatchUrl } from '../utils/youtube'

getYouTubeWatchUrl('dQw4w9WgXcQ')
// → 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
```

--------------------------------

### WhatsAppButton Component

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A floating WhatsApp chat widget that opens a pre-filled chat link. Reads the contact phone number from configuration.

```jsx
import WhatsAppButton from '../components/WhatsAppButton'

// No props — reads CONTACT_PHONE_WHATSAPP from config/contact.js
// Pre-filled message: "Hello, I would like to know more about IPC Hebron."
<WhatsAppButton />
```

--------------------------------

### Add Hooks Directory Structure

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/ARCHITECTURE.md

Organize custom React hooks within a dedicated 'hooks' directory. This structure helps in separating reusable hook logic from components.

```directory
src/
├── hooks/
│   ├── useEvents.js
│   ├── usePrayerRequest.js
│   └── useLanguage.js
```

--------------------------------

### DailyVerse

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A UI component that displays a deterministic Bible verse based on the current day of the year. It supports multiple language pools and automatically updates.

```APIDOC
## DailyVerse

### Description
A UI component that displays a Bible verse. The verse is deterministically selected based on the current day of the year, ensuring consistency for all users on the same day. It supports multiple language verse pools (English/NIV, Kannada, Malayalam) and refreshes periodically to catch midnight transitions.

### Props
This component requires no props as it automatically detects the language from the i18n configuration.

### Usage Example
```jsx
import DailyVerse from '../components/DailyVerse';

<DailyVerse />
```
```

--------------------------------

### Events Page - Google Calendar Integration

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Displays live events from a Google Calendar feed, with fallback data and category-based color mapping. Requires Google Calendar API key and ID environment variables.

```jsx
// Required env vars (both optional — fallback data shown if absent):
// VITE_GOOGLE_CALENDAR_API_KEY
// VITE_GOOGLE_CALENDAR_ID

// Event card displays: date circle, category badge, title, description, time, location
// Date circle colour matches category:
// Youth → blue, Education → green, Outreach → purple,
// Worship → yellow, Holiday → red, Prayer → indigo
```

--------------------------------

### Fetch Latest YouTube Videos

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Fetches the latest videos from a YouTube channel by deriving the uploads playlist ID from the channel ID and querying the YouTube Data API v3 `playlistItems` endpoint. Requires a Google API key (reused from calendar) and the YouTube channel ID from environment variables.

```javascript
import { fetchLatestVideos } from '../services/youtubeApi'

// Requires: VITE_GOOGLE_CALENDAR_API_KEY (reused as Google API key)
//           VITE_YOUTUBE_CHANNEL_ID

try {
  const videos = await fetchLatestVideos(
    'UCxxxxxxxxxxxxxxxxxxxxxxxx', // YouTube channel ID (starts with UC)
    'AIzaSy...',                   // Google API key
    6                              // maxResults (default 6)
  )

  // Each video object shape:
  // {
  //   id: 'dQw4w9WgXcQ',
  //   title: 'Sunday Sermon — Walking in Faith',
  //   description: 'Full sermon description...',
  //   date: '2025-01-12T08:00:00Z',     // ISO publish date
  //   thumbnail: 'https://img.youtube.com/vi/dQw4w9WgXcQ/sddefault.jpg',
  //   youtubeUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
  // }

  videos.forEach(v => console.log(`${v.id}: ${v.title}`))
} catch (error) {
  // "YouTube API error (403): The caller does not have permission"
  console.error(error.message)
}
```

--------------------------------

### Manual Google Maps Embed URL Construction

Source: https://github.com/bbnpm5/ipc-hebron/blob/master/GOOGLE_MAPS_SETUP.md

Construct a Google Maps embed URL manually using either a specific place query or geographic coordinates. Requires an API key for certain features or if not using the standard embed method.

```url
https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=IPC+Hebron,+Periyadka+Road,+Neria+Post,+Belthangady+TQ,+D.K,+Karnataka,+India
```

```url
https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=12.9876,75.1234
```

--------------------------------

### LanguageSwitcher Component

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A component that renders a dropdown for language selection, allowing users to switch between English, Kannada, and Malayalam. It uses `i18n.changeLanguage(code)` to update the current language.

```APIDOC
## LanguageSwitcher component

Renders a dropdown with English, Kannada, and Malayalam options. Calls `i18n.changeLanguage(code)` on selection and closes on outside clicks.

```jsx
// src/components/LanguageSwitcher.jsx — simplified usage
import { useTranslation } from 'react-i18next'

const LanguageSwitcher = () => {
  const { i18n } = useTranslation()

  const languages = [
    { code: 'en', name: 'English',   nativeName: 'English',   flag: '🇬🇧' },
    { code: 'kn', name: 'Kannada',   nativeName: 'ಕನ್ನಡ',     flag: '🇮🇳' },
    { code: 'ml', name: 'Malayalam', nativeName: 'മലയാളം',    flag: '🇮🇳' },
  ]

  return (
    // dropdown UI — calls i18n.changeLanguage(lang.code) on each button click
    <button onClick={() => i18n.changeLanguage('ml')}>
      Switch to Malayalam
    </button>
  )
}
```
```

--------------------------------

### IPCLogo Component

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Renders an inline SVG logo for IPC. Accepts a className prop for custom sizing.

```jsx
import IPCLogo from '../components/IPCLogo'

<IPCLogo className="w-16 h-16" />   // default
<IPCLogo className="w-32 h-32" />   // larger
```

--------------------------------

### DailyVerse Component Usage

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

A deterministic Bible verse widget that selects a verse based on the day of the year and current language. It automatically rechecks for midnight transitions. No props are required as it reads i18n.language internally.

```jsx
import DailyVerse from '../components/DailyVerse'

// No props required — reads i18n.language automatically
<DailyVerse />

// Internal selection logic (simplified):
const dayOfYear = Math.floor((Date.now() - new Date(year, 0, 0)) / 86400000)
const verseIndex = dayOfYear % verses.length   // deterministic, same for all users on same day
setVerse(verses[verseIndex])
```

--------------------------------

### Fetch Google Calendar Events

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Fetches and formats events from the Google Calendar REST API for the next 30 days. It filters out transparent/holiday events and normalizes the data to an internal shape. Requires API key and calendar ID from environment variables, and the calendar must be public with 'See all event details' sharing setting.

```javascript
import { fetchGoogleCalendarEvents } from '../services/googleCalendar'

// Setup: VITE_GOOGLE_CALENDAR_API_KEY and VITE_GOOGLE_CALENDAR_ID in .env
// Calendar must be public and share setting must be "See all event details"

try {
  const events = await fetchGoogleCalendarEvents(
    'abc123@group.calendar.google.com', // calendarId
    'AIzaSy...',                          // API key
    20                                   // maxResults (default 50)
  )

  // Each event object shape:
  // {
  //   id: 'googleEventId',
  //   title: 'Youth Conference',
  //   date: '2025-02-15',           // YYYY-MM-DD
  //   time: '6:00 PM - 8:00 PM',   // or "All Day"
  //   location: 'Church Main Hall',
  //   description: 'Event description...',
  //   category: 'Youth',            // inferred from title keywords or description
  //   googleEventLink: 'https://calendar.google.com/...',
  //   startDateTime: '2025-02-15T18:00:00.000Z',
  //   endDateTime: '2025-02-15T20:00:00.000Z',
  // }

  events.forEach(e => console.log(`${e.date} — ${e.title} [${e.category}]`))
} catch (error) {
  // "Google Calendar API error (403): ..."
  // "Calendar sharing is set to 'free/busy' only. ..."
  console.error(error.message)
}
```

--------------------------------

### getYouTubeThumbnailUrl

Source: https://context7.com/bbnpm5/ipc-hebron/llms.txt

Generates a URL for a YouTube video thumbnail, allowing selection of different quality levels.

```APIDOC
## getYouTubeThumbnailUrl(videoId, quality?)

### Description
Generates a URL for a YouTube video thumbnail. You can specify the desired quality level.

### Method Signature
`getYouTubeThumbnailUrl(videoId: string, quality?: 'default' | 'medium' | 'high' | 'standard' | 'maxres'): string`

### Parameters
#### Path Parameters
- **videoId** (string) - The YouTube video ID.
#### Query Parameters
- **quality** (string) - Optional - The desired thumbnail quality. Options: 'default', 'medium', 'high', 'standard', 'maxres'. Defaults to 'default'.

### Usage Example
```javascript
import { getYouTubeThumbnailUrl } from '../utils/youtube';

const maxresUrl = getYouTubeThumbnailUrl('dQw4w9WgXcQ', 'maxres');
// → 'https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg'

const highUrl = getYouTubeThumbnailUrl('dQw4w9WgXcQ', 'high');
// → 'https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg'
```
```