# Devine Echoes Group — World-Class Website Design Prompt

## Project Brief

Design and build a **fully fledged, world-class, modern professional website** for **Devine Echoes Group** — a gospel choir and ministry initiative based in the kaGwebu Area, Shiselweni Region, Eswatini. The website must serve as a digital ministry profile, sponsorship presentation platform, and community outreach channel, reflecting the group's values of reverence, excellence, and genuine Christian character.

The website is NOT a generic music band page. It is a **ministry platform** — purposeful, dignified, and compelling to churches, sponsors, donors, and community partners.

---

## Brand Identity (Strictly Derived from Official Logo)

| Token | Value |
|---|---|
| Primary Purple | `#3B0D6E` (deep royal purple) |
| Gold / Amber | `#C9A227` (rich metallic gold) |
| Light Gold | `#E8C96A` (hover/accent variant) |
| Off-White / Cream | `#F5F2EC` (background, sections) |
| Near-Black | `#1A1020` (body text, deep dark) |
| White | `#FFFFFF` (cards, modals) |
| Gradient | `linear-gradient(135deg, #3B0D6E 0%, #6A1FA8 60%, #C9A227 100%)` |

**Logo:** Cross fused with a musical note, sound waves emanating — symbolising the gospel proclaimed through music.

**Tagline:** *Raising Voices. Reflecting His Glory.*

**Tone:** Reverent · Dignified · Purposeful · Warm · Professional · Faith-First

**Typography System:**
- Display / Script headings: `Cormorant Garamond` or `Playfair Display` (for "Devine" script feel)
- Section headings: `EB Garamond` or `Libre Baskerville` — elegant serif
- Body text: `Inter` or `DM Sans` — clean, modern, readable
- Accent / caps labels: `Montserrat` — small-caps, tracked wide
- All from Google Fonts (free, fast-loading)

---

## Tech Stack

### Frontend

| Layer | Choice | Reason |
|---|---|---|
| Framework | **Next.js 14 (App Router)** | SEO, performance, ISR, image optimization |
| Styling | **Tailwind CSS v3 + custom CSS vars** | Rapid, consistent, responsive-first |
| Animations | **Framer Motion** | Scroll reveals, entrance animations, parallax |
| Icons | **Lucide React** + custom SVGs | Lightweight, consistent |
| Fonts | **Google Fonts** via `next/font` | Zero layout shift |
| Images | **Next.js `<Image />`** | Optimized, lazy-loaded |
| Forms | **React Hook Form + Zod** | Client-side validation before PHP submission |
| CMS (optional later) | **Sanity.io or Contentful** | For news/events updates by non-devs |

### Backend

| Layer | Choice | Reason |
|---|---|---|
| Server Language | **PHP 8.x** | Hosting environment at softenlightened.com; required for PHPMailer |
| Database | **MySQL** (via `softenli_div_echoes`) | Contact/booking form submissions, partnership enquiries |
| Email Library | **PHPMailer** | SMTP-authenticated transactional email over softenlightened.com mail server |
| Form Handler | `api/send-mail.php` + `api/save-enquiry.php` | Receives POST from frontend forms, validates, emails, stores to DB |
| Hosting | **softenlightened.com** (cPanel shared hosting) | PHP/MySQL environment; domain and mail server already configured |

---

## Site Architecture

```
/                    → Home (Hero + summary sections)
/about               → Who We Are + Story + Team
/ministry            → What We Offer (services grid)
/charitable-work     → Charitable commitment & outreach
/partner             → Sponsorship & Partnership opportunities
/contact             → Contact form + booking request
```

**Navigation:** Sticky top navbar, transparent over hero → solid on scroll. Logo left, links centre/right, CTA button ("Partner With Us") rightmost.

**Footer:** Full-width purple gradient footer with logo, tagline, navigation links, social placeholders, location (Eswatini), copyright.

---

## Page-by-Page Design Specification

---

### PAGE 1 — Home (`/`)

#### Section 1.1 — Hero (Full-Screen, Cinematic)

**Layout:** Full-viewport-height section with layered depth.

**Background:** Deep purple-to-black gradient overlaid on a subtle full-bleed texture (abstract sound waves / musical staff lines at very low opacity). On desktop, a large soft-glow golden cross silhouette fades in as a background element.

**Content (centred, vertically middle):**
- Logo image (official_logo.jpeg) — white-shadow treatment, 180px width
- H1 headline (display font, gold gradient text):
  > `Raising Voices.`  
  > `Reflecting His Glory.`
- Subheading (white, 18px, light weight):
  > *A gospel choir and ministry initiative from kaGwebu, Eswatini — built for worship, service, and the glory of God.*
- Two CTA buttons:
  - Primary (gold filled): **"Explore Our Ministry"** → `/about`
  - Secondary (ghost/outline white): **"Become a Partner"** → `/partner`

**Animation:** Logo fades and scales in. H1 words stagger-enter from below. Buttons fade in 0.8s delay. Subtle golden particle shimmer or floating music notes in background (CSS-only or lightweight canvas).

**Scroll indicator:** Animated downward chevron arrow in gold.

---

#### Section 1.2 — Identity Strip (3-column statement cards)

**Layout:** 3 equal cards, dark purple background, gold accent borders on top.

| Card 1 | Card 2 | Card 3 |
|---|---|---|
| 🎵 *Worship* | ✝ *Service* | 🤝 *Outreach* |
| We minister in churches, revivals, and conferences with reverence and full vocal commitment. | We serve the Church and community with excellence, humility, and consistent Christian character. | We act on the gospel with practical compassion — food, relief, and pastoral care for the vulnerable. |

**Style:** Gold icon (Lucide), white heading, grey-200 body text. On hover: card lifts with a soft gold box-shadow glow.

---

#### Section 1.3 — About Preview (Split Layout)

**Layout:** 50/50 split. Left: large styled quote block. Right: text content.

**Left (purple bg):**
> *"We are not a performance group seeking recognition. We are a ministry in formation — building carefully from a sincere foundation."*

Gold quotation marks, italic white text, attribution: — Devine Echoes Group

**Right (cream bg):**
- Section label: `WHO WE ARE` (Montserrat small caps, gold)
- H2: *A Ministry Built on Calling, Not Ambition*
- Body: 2–3 sentences from the "Who We Are" section of the booklet
- Link: "Read Our Full Story →" in gold

---

#### Section 1.4 — Ministry Services Preview

**Layout:** Full-width section, cream background.

**Header:**  
- Label: `WHAT WE OFFER`
- H2: *Ministry for Every Setting*

**Grid:** 3×2 responsive card grid (collapses to 1-col on mobile).

| Service | Icon |
|---|---|
| Church Worship Services & Revivals | Church icon |
| Conferences & Ministry Gatherings | Mic icon |
| Weddings & Memorial Services | Heart icon |
| Community Outreach Events | Users icon |
| Youth & School Events | Star icon |
| Recorded & Live-Session Support | Music icon |

Each card: white background, purple top border, gold icon, service title, 1-sentence description. Hover: subtle scale-up + gold shadow.

**CTA below grid:** "View All Ministry Offerings →" → `/ministry`

---

#### Section 1.5 — Vision & Mission Statement (Full-Width Feature)

**Layout:** Full-width dark section (near-black), centred content, max-width 800px.

**Gold divider line** above and below.

**Vision:**
> *"To raise voices that glorify God, proclaim the gospel of Jesus Christ, strengthen the worship life of the Church, and bring hope to communities through compassionate service."*

**Mission:**
> *"To build a disciplined gospel choir that ministers with reverence, serves churches and communities with excellence and humility, and channels available support toward meaningful charitable impact."*

**Style:** Vision in large display italic gold text. Mission in smaller white regular text below. Label badges (`VISION` / `MISSION`) in Montserrat small-caps, gold border.

---

#### Section 1.6 — Meet the Founding Team (Teaser)

**Layout:** Cream background, horizontal scroll or 4-up grid (top 4 members shown).

**Each member card:**
- Avatar placeholder (stylised initials in purple circle with gold border)
- Name (bold, dark purple)
- Role (Montserrat, small, gold)

**CTA:** "Meet the Full Team →" → `/about#team`

---

#### Section 1.7 — Partnership Call-to-Action (Full-Width Banner)

**Layout:** Full-width, purple-to-gold gradient background.

**Content:**
- H2 (white, large): *"Partner With a Ministry That Sings and Serves"*
- Body (white, 16px): *"Your support builds more than a choir. It builds a ministry that reaches churches, serves the vulnerable, and carries the gospel into communities that need to hear it."*
- CTA Button (gold, large): **"Explore Partnership Opportunities"** → `/partner`

---

#### Section 1.8 — Location & Community Context

**Layout:** 2-column. Left: styled map placeholder or illustrated Eswatini region card. Right: text.

**Content:**
- Label: `WHERE WE ARE`
- H3: *Rooted in kaGwebu, Shiselweni Region, Eswatini*
- Short paragraph on the community context
- Subtle Eswatini flag color accent (blue, yellow, red used sparingly as decorative elements, not overriding brand)

---

### PAGE 2 — About (`/about`)

**Hero:** Half-screen hero. Purple gradient background, no image. Logo centred. H1: *"Who We Are"*. Breadcrumb below.

#### Sections:
1. **Full "Who We Are" text** — styled editorial layout, pull-quote in gold sidebar
2. **Our Story** — timeline-style vertical layout: "Born from conviction… One keyboard player… Building with purpose." Each milestone is a timeline node with a gold dot and connector line.
3. **Vision & Mission** — Two elegant cards side-by-side (purple card for Vision, cream card for Mission), each with icon, label, and full statement.
4. **Our Founding Team** — Full 8-member grid. Each card: initials avatar (purple/gold), full name, ministry role. Clean, professional — no casual bios, consistent with the group's tone.
5. **Our Values** — 3-column: Worship · Character · Stewardship. Each with a short paragraph.

---

### PAGE 3 — Ministry (`/ministry`)

**Hero:** H1: *"Ministry for Every Setting"*. Tagline beneath.

#### Sections:
1. **Services Grid** — Full 6-service grid with expanded descriptions (from booklet), icons, and a "Request This Service" button on each card linking to `/contact`.
2. **Ministry Standards** — Elegant checklist section. "When we accept an invitation, we take it seriously." 5 standards listed with gold checkmarks, styled as a covenant statement, not a generic feature list.
3. **What to Expect When You Host Us** — 3-step numbered visual guide: (1) Initial Contact → (2) Preparation & Coordination → (3) Ministry Day
4. **Booking CTA** — Purple banner: *"Invite Devine Echoes Group to Minister"* + booking form link.

---

### PAGE 4 — Charitable Work (`/charitable-work`)

**Hero:** Deep purple, H1: *"Ministry That Sings and Serves"*. Body: *"The gospel is not only heard — it is acted on."*

#### Sections:
1. **Our Charitable Commitment** — Full editorial section. Left: styled paragraph from booklet ("Ministry and compassion belong together…"). Right: illustrated icons for each focus area.
2. **Focus Areas Grid** — 4 cards:
   - Food support for vulnerable households
   - School assistance for children in need
   - Pastoral encouragement visits
   - Emergency relief in hardship cases
3. **Accountability Commitment** — *"We report to our supporters. We document what is built. We acknowledge what is given."* — Styled blockquote in gold on dark background.
4. **Support Our Outreach** — CTA to `/partner`.

---

### PAGE 5 — Partner (`/partner`)

**Hero:** Gold gradient top-to-bottom fade. H1 in purple: *"Invest in a Ministry That Builds and Serves"*. Subtext: *"Partnership with Devine Echoes Group is not a financial transaction. It is a ministry investment."*

#### Sections:
1. **Partnership Intro** — From booklet: "Devine Echoes Group is at a critical formation stage. Timely support will make the difference…"
2. **Partnership Opportunities Table** — Full styled table (responsive cards on mobile):

   | Area of Support | What It Enables |
   |---|---|
   | Choir Uniforms | Professional visual identity across all ministry appearances |
   | Sound Equipment | Wider reach into church and community settings |
   | Musical Instruments | Stronger live band, greater ministry quality |
   | Transport Support | Reliable access to more churches and communities |
   | Recording & Media | Sponsor-facing documentation and ministry visibility |
   | Charitable Outreach Reserve | Practical compassion alongside gospel ministry |
   | General Operational Support | Rehearsals, administration, printing, coordination |

3. **Why Partner With Us** — 3 reasons styled as feature cards: (1) Verified character and governance, (2) Transparent stewardship, (3) Dual-impact: ministry + charitable service
4. **Partnership Tiers (suggested)** — Friend · Supporter · Founding Partner (optional visual tier system)
5. **Partnership CTA Form** — Name, Organisation/Church, Email, Phone, Area of Interest (dropdown), Message. Submit button in gold.

---

### PAGE 6 — Contact (`/contact`)

**Layout:** 2-column. Left: contact info + location. Right: contact form.

**Contact details:**
- Organisation: Devine Echoes Group
- Founder: Sitwayinkhosi Gwebu
- Location: kaGwebu Area, Shiselweni Region, Eswatini
- Email: *(placeholder — to be updated)*
- Phone: *(placeholder — to be updated)*
- Social: *(search "Devine Echoes Group")*

**Form fields:** Full Name · Email · Phone (optional) · Subject (dropdown: Ministry Booking / Partnership Enquiry / Donation / General) · Message · Submit (gold button).

---

## Global Design System

### Spacing Scale
Use Tailwind's default spacing scale. Key rules:
- Section padding: `py-20 md:py-28`
- Card padding: `p-6 md:p-8`
- Container max-width: `max-w-6xl mx-auto px-4 md:px-8`

### Component Library (build these as reusable components)

| Component | Description |
|---|---|
| `<SectionLabel>` | Montserrat, small-caps, gold, tracked, uppercase — used above every H2 |
| `<GoldDivider>` | Thin 2px gold horizontal rule, 80px wide, centred |
| `<MinistryCard>` | Service card with icon, title, description, optional CTA |
| `<TeamMemberCard>` | Avatar, name, role — clean and professional |
| `<PartnershipRow>` | Table row or card for sponsorship areas |
| `<BlockQuote>` | Large gold quotation marks, italic, pull-quote styled |
| `<CTABanner>` | Full-width gradient banner with H2, body, and button |
| `<HeroSection>` | Full-screen or half-screen hero with layered content |
| `<Navbar>` | Sticky, scroll-aware, transparent → solid transition |
| `<Footer>` | Full-width purple gradient, 3-column layout |

### Animation Guidelines (Framer Motion)

- **Scroll reveal:** `fadeInUp` — every section heading and paragraph (stagger children 0.1s)
- **Cards:** `fadeIn` with slight Y offset — stagger 0.08s per card
- **Hero:** Logo: `scale 0.8→1.0` + `opacity 0→1`, 0.6s ease-out. H1: word-by-word stagger.
- **Navbar:** `background-color` transitions on scroll via `useScroll` hook
- **Hover states:** Cards lift with `whileHover={{ y: -4, boxShadow: "0 12px 40px rgba(201,162,39,0.25)" }}`
- **No excessive animation** — this is a ministry platform, not a nightclub. Keep all animations dignified and subtle.

### Responsive Breakpoints

| Breakpoint | Behaviour |
|---|---|
| Mobile (`< 640px`) | Single column, stacked layout, hamburger menu |
| Tablet (`640–1024px`) | 2-column grids, compressed hero |
| Desktop (`> 1024px`) | Full layout, sticky sidebar elements |

---

## SEO & Metadata

```jsx
// Default metadata (layout.tsx)
title: "Devine Echoes Group | Raising Voices. Reflecting His Glory."
description: "Devine Echoes Group is a gospel choir and ministry from Eswatini. We minister in churches, serve communities, and welcome partnerships from sponsors, donors, and churches."
keywords: ["gospel choir Eswatini", "Shiselweni choir", "Christian ministry Eswatini", "gospel music ministry", "Devine Echoes"]
openGraph: {
  title: "Devine Echoes Group",
  description: "Raising Voices. Reflecting His Glory.",
  image: "/official_logo.jpeg",
  locale: "en_SZ"
}
```

---

## Accessibility Requirements

- All colour contrast ratios must pass WCAG AA (gold on purple ≥ 4.5:1)
- All images have descriptive `alt` text
- All interactive elements are keyboard-navigable with visible focus rings (gold `outline`)
- Semantic HTML: `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>`, `<h1>`–`<h3>` hierarchy
- Form labels are explicitly associated with inputs
- Skip-to-main-content link at top of page

---

## File & Folder Structure

```
c:\projects\devine_echoes\
├── app/
│   ├── layout.tsx              ← Root layout, Navbar, Footer, fonts
│   ├── page.tsx                ← Home page
│   ├── about/page.tsx
│   ├── ministry/page.tsx
│   ├── charitable-work/page.tsx
│   ├── partner/page.tsx
│   ├── contact/page.tsx
│   └── globals.css             ← Tailwind base + custom CSS vars
├── components/
│   ├── layout/
│   │   ├── Navbar.tsx
│   │   └── Footer.tsx
│   ├── ui/
│   │   ├── SectionLabel.tsx
│   │   ├── GoldDivider.tsx
│   │   ├── CTABanner.tsx
│   │   └── BlockQuote.tsx
│   ├── home/
│   │   ├── HeroSection.tsx
│   │   ├── IdentityStrip.tsx
│   │   ├── AboutPreview.tsx
│   │   ├── ServicesPreview.tsx
│   │   ├── VisionMission.tsx
│   │   ├── TeamPreview.tsx
│   │   └── PartnerCTA.tsx
│   ├── about/
│   │   ├── StoryTimeline.tsx
│   │   └── TeamGrid.tsx
│   ├── ministry/
│   │   ├── ServicesGrid.tsx
│   │   └── MinistryStandards.tsx
│   └── partner/
│       └── PartnershipTable.tsx
├── public/
│   ├── official_logo.jpeg
│   └── favicon.ico
├── tailwind.config.ts
├── next.config.ts
├── .env.local                  ← ⚠ NEVER commit — DB + SMTP secrets
├── .env.example                ← Commit this — keys only, no values
├── .gitignore                  ← Must include .env.local
└── package.json
```

### PHP Backend Files (served alongside Next.js or on subdomain/subfolder)

```
public/api/
├── send-mail.php           ← PHPMailer handler: contact & booking forms
├── save-enquiry.php        ← MySQL handler: stores form submissions
├── db.php                  ← DB connection (reads from .env / config.php)
└── config.php              ← Reads environment variables (never hardcoded)
```

---

## Initialisation Commands

```bash
# In c:\projects\devine_echoes\
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir=no --import-alias="@/*"

# Frontend dependencies
npm install framer-motion lucide-react react-hook-form zod @hookform/resolvers

# Google Fonts loaded via next/font/google — no separate install needed
```

```bash
# PHP backend — install PHPMailer via Composer (run in public/api/ or project root)
composer require phpmailer/phpmailer
```

---

## Key Content Assets

| Asset | Status | Usage |
|---|---|---|
| `official_logo.jpeg` | ✅ Available | Navbar, Hero, Footer, OG image |
| Booklet content | ✅ Extracted | All page copy |
| Team photos | ❌ Not yet available | Use initials avatars as placeholder |
| Ministry event photos | ❌ Not yet available | Use styled placeholder cards |
| Social media links | ❌ TBC | Placeholder icons in footer |
| Email / Phone | ❌ TBC | "To be confirmed" placeholders |

---

## Design Inspiration References

Build at the standard of these reference sites (spiritual gravitas + modern UX):
- **Elevation Church** (elevationchurch.org) — large section rhythm, bold typography
- **Hillsong** (hillsong.com) — full-screen hero, dark aesthetic, music ministry
- **Compassion International** — mission-first emotional storytelling
- **World Vision** — sponsorship tables, clear partnership CTAs

**The distinguishing character of Devine Echoes' site:** It must feel neither overly commercial nor amateurish. It should feel like a **well-prepared ministry document brought to life** — the same care that went into the printed profile booklet, expressed through world-class web design.

---

## Backend, Infrastructure & Environment Configuration

> ⚠ **SECURITY WARNING:** The values below are live production credentials. They must be stored **exclusively** in `.env.local` (local dev) and server-side environment variables (production). They must **never** be hardcoded in source files, committed to version control, or exposed to the browser/client bundle.

---

### Environment Variables (`.env.local`)

```ini
# ── Database ──────────────────────────────────────────────────────
DB_HOST=softenlightened.com
DB_NAME=softenli_div_echoes
DB_USER=softenli_njeb
DB_PASS=76HElives53787#

# ── SMTP / Email ──────────────────────────────────────────────────
SMTP_HOST=mail.softenlightened.com
SMTP_USERNAME=support@softenlightened.com
SMTP_PASSWORD=76HElives53787#
SMTP_PORT=587
SMTP_FROM_EMAIL=support@softenlightened.com
```

### `.env.example` (commit this file — keys only, no values)

```ini
DB_HOST=
DB_NAME=
DB_USER=
DB_PASS=

SMTP_HOST=
SMTP_USERNAME=
SMTP_PASSWORD=
SMTP_PORT=
SMTP_FROM_EMAIL=
```

### `.gitignore` (must include)

```
.env.local
.env*.local
vendor/
```

---

### MySQL Database Schema

Create a `form_enquiries` table to persist all contact/booking/partnership form submissions:

```sql
CREATE TABLE IF NOT EXISTS `form_enquiries` (
  `id`          INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  `full_name`   VARCHAR(120)  NOT NULL,
  `email`       VARCHAR(180)  NOT NULL,
  `phone`       VARCHAR(30)   DEFAULT NULL,
  `subject`     ENUM(
                  'Ministry Booking',
                  'Partnership Enquiry',
                  'Donation',
                  'General'
                ) NOT NULL DEFAULT 'General',
  `message`     TEXT          NOT NULL,
  `ip_address`  VARCHAR(45)   DEFAULT NULL,   -- IPv4 or IPv6
  `submitted_at` DATETIME     NOT NULL DEFAULT CURRENT_TIMESTAMP,
  INDEX `idx_subject` (`subject`),
  INDEX `idx_submitted_at` (`submitted_at`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
```

---

### PHP: `public/api/config.php`

Load credentials from environment variables (set via cPanel → Software → PHP → Environment Variables on production, or `.env.local` values injected by build tooling locally).

```php
<?php
// config.php — NEVER expose this file publicly; keep above webroot if possible
defined('DB_HOST')         || define('DB_HOST',         getenv('DB_HOST'));
defined('DB_NAME')         || define('DB_NAME',         getenv('DB_NAME'));
defined('DB_USER')         || define('DB_USER',         getenv('DB_USER'));
defined('DB_PASS')         || define('DB_PASS',         getenv('DB_PASS'));

defined('SMTP_HOST')       || define('SMTP_HOST',       getenv('SMTP_HOST'));
defined('SMTP_USERNAME')   || define('SMTP_USERNAME',   getenv('SMTP_USERNAME'));
defined('SMTP_PASSWORD')   || define('SMTP_PASSWORD',   getenv('SMTP_PASSWORD'));
defined('SMTP_PORT')       || define('SMTP_PORT', (int) getenv('SMTP_PORT'));
defined('SMTP_FROM_EMAIL') || define('SMTP_FROM_EMAIL', getenv('SMTP_FROM_EMAIL'));
```

---

### PHP: `public/api/db.php`

```php
<?php
require_once __DIR__ . '/config.php';

function get_db(): PDO {
    static $pdo = null;
    if ($pdo === null) {
        $dsn = 'mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=utf8mb4';
        $pdo = new PDO($dsn, DB_USER, DB_PASS, [
            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_EMULATE_PREPARES   => false,
        ]);
    }
    return $pdo;
}
```

---

### PHP: `public/api/send-mail.php` (PHPMailer)

Handles POST submissions from the contact/booking/partnership forms. Validates input, saves to DB, then sends a notification email via PHPMailer over SMTP.

```php
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: https://softenlightened.com'); // restrict to your domain
header('Access-Control-Allow-Methods: POST');

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    exit(json_encode(['success' => false, 'message' => 'Method not allowed']));
}

require_once __DIR__ . '/../../vendor/autoload.php';
require_once __DIR__ . '/config.php';
require_once __DIR__ . '/db.php';

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

// ── 1. Sanitise & validate input ─────────────────────────────────
$allowed_subjects = ['Ministry Booking', 'Partnership Enquiry', 'Donation', 'General'];

$full_name = trim(strip_tags($_POST['full_name'] ?? ''));
$email     = filter_var(trim($_POST['email'] ?? ''), FILTER_VALIDATE_EMAIL);
$phone     = trim(strip_tags($_POST['phone'] ?? ''));
$subject   = in_array($_POST['subject'] ?? '', $allowed_subjects, true)
             ? $_POST['subject'] : 'General';
$message   = trim(strip_tags($_POST['message'] ?? ''));
$ip        = $_SERVER['REMOTE_ADDR'] ?? null;

if (empty($full_name) || !$email || empty($message)) {
    http_response_code(422);
    exit(json_encode(['success' => false, 'message' => 'Required fields missing or invalid.']));
}

// ── 2. Save to database ───────────────────────────────────────────
try {
    $pdo  = get_db();
    $stmt = $pdo->prepare(
        'INSERT INTO form_enquiries (full_name, email, phone, subject, message, ip_address)
         VALUES (:full_name, :email, :phone, :subject, :message, :ip)'
    );
    $stmt->execute([
        ':full_name' => $full_name,
        ':email'     => $email,
        ':phone'     => $phone ?: null,
        ':subject'   => $subject,
        ':message'   => $message,
        ':ip'        => $ip,
    ]);
} catch (\PDOException $e) {
    http_response_code(500);
    exit(json_encode(['success' => false, 'message' => 'Could not save enquiry. Please try again.']));
}

// ── 3. Send notification email via PHPMailer ─────────────────────
try {
    $mail = new PHPMailer(true);
    $mail->isSMTP();
    $mail->Host       = SMTP_HOST;
    $mail->SMTPAuth   = true;
    $mail->Username   = SMTP_USERNAME;
    $mail->Password   = SMTP_PASSWORD;
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // port 587
    $mail->Port       = SMTP_PORT;

    $mail->setFrom(SMTP_FROM_EMAIL, 'Devine Echoes Website');
    $mail->addAddress(SMTP_FROM_EMAIL, 'Devine Echoes Ministry');
    $mail->addReplyTo($email, $full_name);

    $mail->isHTML(true);
    $mail->Subject = "[{$subject}] New enquiry from {$full_name}";
    $mail->Body    = "
        <h2 style='color:#3B0D6E;'>New Website Enquiry</h2>
        <table cellpadding='6' style='font-family:sans-serif;font-size:14px;'>
          <tr><td><strong>Name:</strong></td><td>{$full_name}</td></tr>
          <tr><td><strong>Email:</strong></td><td>{$email}</td></tr>
          <tr><td><strong>Phone:</strong></td><td>" . ($phone ?: '—') . "</td></tr>
          <tr><td><strong>Subject:</strong></td><td>{$subject}</td></tr>
          <tr><td><strong>Message:</strong></td><td>{$message}</td></tr>
        </table>
    ";
    $mail->AltBody = "Name: {$full_name}\nEmail: {$email}\nSubject: {$subject}\n\n{$message}";

    $mail->send();
} catch (Exception $e) {
    // Email failed — but DB record was saved; log the error, don't expose details
    error_log('PHPMailer error: ' . $mail->ErrorInfo);
    // Still return success since data was persisted
}

http_response_code(200);
echo json_encode(['success' => true, 'message' => 'Your message has been received. We will be in touch.']);
```

---

### Frontend Form Submission (Next.js → PHP API)

The React contact form submits via `fetch` to the PHP handler. The PHP endpoint lives on the same hosting domain:

```typescript
// components/contact/ContactForm.tsx  (simplified)
const onSubmit = async (data: FormValues) => {
  const body = new FormData();
  Object.entries(data).forEach(([k, v]) => body.append(k, v as string));

  const res = await fetch('https://softenlightened.com/api/send-mail.php', {
    method: 'POST',
    body,
  });

  const json = await res.json();
  if (json.success) {
    // show success state
  } else {
    // show error state
  }
};
```

---

### Email Notification Template (Branded)

All outgoing emails sent from `support@softenlightened.com` must use the Devine Echoes brand:
- **From name:** `Devine Echoes Group`
- **Subject prefix:** `[Ministry Booking]`, `[Partnership Enquiry]`, `[Donation]`, or `[General]`
- **HTML email background:** `#3B0D6E` header bar, gold `#C9A227` heading, white body
- **Footer text:** *Devine Echoes Group · kaGwebu, Shiselweni, Eswatini · Raising Voices. Reflecting His Glory.*
- **Reply-To:** set to the sender's email address so responses go directly to the enquirer

---

## Summary Aesthetic Direction

> Build a website that feels like walking into a prepared, reverent, and purposeful ministry. The colour palette (purple + gold) signals royalty and sacrifice — the colours of the Church universal. Every section should make a sponsor or church leader feel that Devine Echoes Group is serious, trustworthy, and worthy of their partnership. There is no hype, no clutter, no compromise. Just a ministry that sings for God's glory — presented with the excellence that glory deserves.

---

*Prompt version: 1.0 — May 2026 | Based on Devine_Echoes_Group_Profile_Booklet.docx and official_logo.jpeg*