<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Trusted Carers Network - Spain</title>

<style>

body { font-family: Arial; max-width: 700px; margin: auto; padding: 20px; }

h1 { color: #2a7f62; }

.section { border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; border-radius: 8px; }

button { background: #2a7f62; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; }

input, textarea { width: 100%; margin-bottom: 10px; padding: 8px; }

</style>

</head>

<body>

<h1>Trusted Carers Network - Spain</h1>

<p>Connecting expats with carers who are personally known or recommended by someone in the community.</p>

<!-- CLIENT SECTION -->

<div class="section">

<h2>Clients</h2>

<p>Pay €35 to access the current list of carers.</p>

<a href="YOUR_STRIPE_LINK_CLIENT" target="_blank">

  <button>Pay & Access List</button>

</a>

</div>

<!-- CARER SECTION -->

<div class="section">

<h2>Carers</h2>

<p>Pay €35 to join the network. Must be known by us or by a trusted community connection.</p>

<a href="YOUR_STRIPE_LINK_CARER" target="_blank">

  <button>Join as Carer</button>

</a>

</div>

<!-- PROFILE SUBMISSION FORM -->

<div class="section">

<h2>Submit Your Details</h2>

<p>Clients and carers can submit details to be added to the network.</p>

<select id="type">

<option value="client">Client</option>

<option value="carer">Carer</option>

</select>

<input id="name" placeholder="Your Name">

<input id="email" placeholder="Email">

<input id="location" placeholder="Location (e.g., Mojácar)">

<textarea id="description" placeholder="Short description or recommendation"></textarea>

<textarea id="referrer" placeholder="Known by (your connection or mutual contact)"></textarea>

<button onclick="saveProfile()">Submit Profile</button>

<p id="message"></p>

</div>

<!-- FIREBASE -->

<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js"></script>

<script>

// 🔴 REPLACE WITH YOUR FIREBASE CONFIG

const firebaseConfig = {

  apiKey: "YOUR_API_KEY",

  authDomain: "YOUR_PROJECT.firebaseapp.com",

  projectId: "YOUR_PROJECT_ID",

};

// Initialize Firebase

const app = firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

// Save Profile Function

function saveProfile() {

  const name = document.getElementById("name").value;

  const email = document.getElementById("email").value;

  const location = document.getElementById("location").value;

  const description = document.getElementById("description").value;

  const referrer = document.getElementById("referrer").value;

  const type = document.getElementById("type").value;

  db.collection("profiles").add({

    name: name,

    email: email,

    location: location,

    description: description,

    referrer: referrer,

    type: type,

    created: new Date()

  })

  .then(() => {

    document.getElementById("message").innerText = "Profile submitted successfully!";

    document.getElementById("name").value = "";

    document.getElementById("email").value = "";

    document.getElementById("location").value = "";

    document.getElementById("description").value = "";

    document.getElementById("referrer").value = "";

  })

  .catch((error) => {

    document.getElementById("message").innerText = "Error submitting profile.";

    console.error(error);

  });

}

</script>

</body>

</html>