"use client";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Heart } from "lucide-react";
import React from "react";
import ReactMarkdown, { Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import { useRouter } from "next/navigation";
const ReadmePage = () => {
const router = useRouter();
const readmeContent = `
## Attune Heart Therapy
Welcome to your Attune Heart Therapy platform! This documentation provides everything you need to understand and navigate the complete system, including the landing page, booking system, user/client dashboard, and admin dashboard.
---
## 📂 What's Included
Your Attune Heart Therapy platform includes a comprehensive system for managing therapy appointments and client interactions:
| Section | Description |
| --------------------- | ------------------------------------------------------------------------------------------------------- |
| Landing Page | Public-facing homepage with navigation, services overview, and booking access |
| Booking System | User-friendly appointment booking flow where clients can request therapy sessions |
| User Dashboard | Client portal to view appointments, manage profile, and track booking status |
| Admin Dashboard | Administrative interface to manage appointments, view statistics, and schedule sessions |
---
## 🔐 Admin Dashboard Access
### Step 1: Navigate to Login
1. Go to your website's homepage
2. Click on the **"Admin Panel"** link in the footer (under Quick Links)
3. Or navigate directly to: \`https://attunehearttherapy.com/login\`
### Step 2: Login Credentials
**Email Address:** \`admin@attunehearttherapy.com\`
### Step 3: Access Dashboard
1. Enter your admin email address
2. Enter your password
3. Click **"Sign In"**
4. You will be automatically redirected to the Admin Dashboard
---
## 🎥 Telehealth Sessions Guide
This section provides step-by-step guidance on how to access and manage telehealth therapy sessions through the Admin Dashboard of the Attune Heart Therapy platform.
### Accessing the Admin Dashboard
**Email Notification:** When a user requests an appointment, you (the admin) will receive an email notification. The image below shows an example of this email notification.
1. Navigate to: \`https://attunehearttherapy.com/login\`
2. Enter your admin email address: \`admin@attunehearttherapy.com\`
3. Enter your password
4. Click **"Sign In"**
5. You will be automatically redirected to the **Admin Dashboard**
6. Click on **"Bookings"** in the navigation menu to view all appointments
### Viewing Appointment Details
1. From the Bookings page, click on any appointment
2. View complete client information, preferred dates, and time slots
3. Check appointment status and review all details
### Scheduling an Appointment
1. From the appointment details page, click **"Schedule Appointment"**
2. Select the date and time for the session
3. Choose the duration (15, 30, 45, 60, or 120 minutes)
4. Click **"Schedule"** to confirm
5. The system will automatically create a Jitsi video meeting room and send a confirmation email to the client
**Confirmation Email:** After you schedule an appointment, the client receives a confirmation email with their appointment details. The image below shows an example of the confirmation email that clients receive.
### Joining a Video Meeting
1. Meetings become available **10 minutes before** the scheduled start time
2. Navigate to any scheduled appointment's details page
3. In the sidebar, find the **"Join Meeting"** button
4. Click **"Join Meeting"** when it becomes active (10 minutes before scheduled time)
### 🔗 Quick Access Links
[Visit Attune Heart Therapy](https://attunehearttherapy.com/) - Official website
[Access Admin Dashboard](https://attunehearttherapy.com/login) - Login to manage your practice
[Book an Appointment](https://attunehearttherapy.com/book-now) - Client booking page
---
## 📞 Support & Contact
For technical assistance, questions, or issues:
**Email:** [info@BlackBusinessLabs.com](mailto:info@BlackBusinessLabs.com)
**Phone:** [(646) 895-4856](tel:+16468954856) - *CEO Tray Bailey's direct mobile*
---
*For questions or additional support, please contact Black Business Labs at the information provided above.*`;
const components: Components = {
h1: ({ node, ...props }) => (
),
h2: ({ node, children, ...props }) => {
// Extract text content from children
const extractText = (child: any): string => {
if (typeof child === 'string') return child;
if (typeof child === 'number') return String(child);
if (React.isValidElement(child)) {
const childProps = child.props as any;
if (childProps?.children) {
return React.Children.toArray(childProps.children).map(extractText).join('');
}
}
return '';
};
const textContent = React.Children.toArray(children).map(extractText).join('');
// Check if this is the title heading
if (textContent.includes('Attune Heart Therapy - System Overview')) {
return (
),
code: (props) => {
// Using `props: any` and casting to bypass TypeScript error with `inline` prop.
const {
node,
inline: isInline,
className,
children,
// Destructure known non-HTML props from react-markdown to prevent them from being spread onto the tag
index,
siblingCount,
ordered,
checked,
style: _style, // if style is passed in props, avoid conflict with style object below
...htmlProps // Spread remaining props, assuming they are valid HTML attributes for
} = props as any;
const codeStyleBase = {
fontFamily:
'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
};
if (isInline) {
return (
{children}
);
}
// For block code (inside
)
return (
wrapper
// However, ensure no extra padding/margin if pre handles it
padding: 0,
backgroundColor: "transparent", // Pre has the background
}}
{...htmlProps}
>
{children}
);
},
img: ({ node, ...props }: any) => (
),
};
return (