# 🤖 AI Context & Developer Guide

This file is designed to provide AI coding assistants (Cursor, Antigravity, Copilot) with the necessary context to understand, navigate, and modify this project effectively.

## 📌 Project Overview
**Type:** Landing Page Template (v4.0.0)
**Stack:** PHP (Vanilla), SASS (SCSS), JavaScript (Vanilla).
**Goal:** A lightweight, modular landing page structure that requires no build step for HTML/PHP, only for CSS.

## 📂 Architecture & Directory Map

The project distinguishes strictly between **Library** (Components) and **Implementation** (Use).

### 1. `/use` (The Implementation) -> **EDIT CONTENT HERE**
Contains the files currently active and visible on the website.
*   **Rule:** If the user asks to change text, images, links, or page structure, edit files here.
*   **Key Files:**
    *   `use/brand_info.php`: Global variables (`$brand`, `$brandDescription`).
    *   `use/body/*.php`: The actual sections of the page (Navbar, Hero, Footer, etc.).
    *   `use/head/`: Meta tags and `<head>` content.

### 2. `/components` (The Library) -> **EDIT STYLES HERE**
Contains the source code for reusable components.
*   **Structure:** Each component has a folder (e.g., `components/navbar/`) with:
    *   `index.scss`: The styles for that component. **Edit this to change the look.**
    *   `component.php`: The reference HTML structure. **Do not edit** unless refactoring the component globally.
*   **Rule:** Do not edit the PHP files here to change page content. Edit the corresponding file in `/use` instead.

### 3. `/scss` (Global Styles)
*   `_colors.scss`: Global color palette.
*   `_vars.scss`: Typography and global variables.
*   `index.scss`: The main entry point that imports all other SCSS files.

## 🛠 Tech Stack & Conventions

### PHP
*   Used for templating and component inclusion.
*   **Pattern:** `index.php` includes partials from `use/`.
*   **Variables:** Configuration often lives in PHP variables at the top of files or in `brand_info.php`.

### JavaScript
*   **Vanilla JS**: No frameworks (React, Vue, etc.).
*   **Hybrid Files**: Be aware of `.js.php` files (e.g., `form.js.php`). These are PHP files that output a `<script>` block, allowing PHP variables to be injected into JavaScript.
    *   *Caution:* Syntax highlighting may break in some editors. Treat them as PHP files that output JS.

### CSS / SASS
*   **Compilation**: SASS must be compiled to `index.css`.
*   **Command**: `sass --watch index.scss:css/index.css --style compressed`

## ⚡️ Common AI Tasks & Workflows

### 1. "Change the color of X"
*   **Action**: Look for the component's `index.scss` in `components/[name]/` OR check `scss/_colors.scss` if it's a global color.

### 2. "Update the phone number/text"
*   **Action**: Look in `use/body/` (e.g., `navbar.php`, `footer-cols.php`) or `use/brand_info.php`.

### 3. "Add a new section"
1.  Check `components/` to see if a suitable component exists.
2.  Copy the component's PHP code to `use/body/new-section.php`.
3.  Include it in `index.php`.

### 4. "Fix the form logic"
*   **Action**: Check `use/body/form.js.php` (or similar). Note that logic is often mixed with PHP variable injection.

## 🚀 Run Commands
*   **Start Server**: `php -S localhost:8000`
*   **Watch SASS**: `sass --watch index.scss:css/index.css --style compressed`