[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" import { fontFamily } from "tailwindcss/defaultTheme" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#FF8C1A", foreground: "#FFFFFF", }, secondary: { DEFAULT: "#3B82F6", foreground: "#FFFFFF", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { Menu, X, User } from "lucide-react" export function Navbar() { const [isOpen, setIsOpen] = useState(false) return (

MEDIK CENTER

{/* Admin Button */} {/* Desktop Navigation */}

Inicio Servicios Profesionales Preguntas Frecuentes Contactar

{/* Mobile Navigation Button */}

{/* Mobile Navigation Menu */} {isOpen && (

Inicio Servicios Profesionales Preguntas Frecuentes Contactar

)}

) } [V0_FILE]typescriptreact:file="components/news-carousel.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { useAppContext } from "@/lib/AppContext" export function NewsCarousel() { const { news } = useAppContext() const [currentSlide, setCurrentSlide] = useState(0) useEffect(() => { const timer = setInterval(() => { setCurrentSlide((current) => (current + 1) % news.length) }, 5000) return () => clearInterval(timer) }, [news.length]) const nextSlide = () => { setCurrentSlide((current) => (current + 1) % news.length) } const prevSlide = () => { setCurrentSlide((current) => (current - 1 + news.length) % news.length) } if (news.length === 0) { return

No hay noticias disponibles.

} return (

{news.map((item) => (

{item.title}

{item.content}

))}

{news.map((_, index) => (

) } [V0_FILE]typescriptreact:file="components/services.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Activity, Heart, Brain, Bone } from "lucide-react" const services = [ { title: "Rehabilitación Física", description: "Tratamientos personalizados para recuperación de lesiones y cirugías.", icon: Activity, }, { title: "Fisioterapia Deportiva", description: "Prevención y tratamiento de lesiones deportivas.", icon: Heart, }, { title: "Neurorehabilitación", description: "Terapias especializadas para condiciones neurológicas.", icon: Brain, }, { title: "Traumatología", description: "Tratamiento de lesiones músculo-esqueléticas.", icon: Bone, }, ] export function Services() { return (

Nuestros Servicios

{services.map((service, index) => ( {service.title}

{service.description}

))}

) } [V0_FILE]typescriptreact:file="components/faq.tsx" isMerged="true" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const faqs = [ { question: "¿Qué debo traer a mi primera sesión?", answer: "Para tu primera sesión, te recomendamos traer ropa cómoda, cualquier informe médico relevante y tus estudios de imagen si los tienes.", }, { question: "¿Cuánto dura cada sesión?", answer: "Las sesiones típicamente duran entre 45-60 minutos, dependiendo del tratamiento específico y tus necesidades.", }, { question: "¿Necesito una derivación médica?", answer: "Aunque no es obligatorio, es recomendable traer una derivación médica para mejor coordinación con tu tratamiento médico.", }, { question: "¿Trabajan con obras sociales?", answer: "Sí, trabajamos con las principales obras sociales. Puedes consultar la lista completa contactándonos.", }, ] export function FAQ() { return (

Preguntas Frecuentes

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Facebook, Instagram, Twitter } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" import { Sidebar } from "@/components/admin/sidebar" export default function AdminLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/admin/sidebar.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { LayoutDashboard, Newspaper, Users, Calendar, Settings, LogOut } from "lucide-react" const menuItems = [ { title: "Dashboard", href: "/admin", icon: LayoutDashboard, }, { title: "Noticias", href: "/admin/news", icon: Newspaper, }, { title: "Profesionales", href: "/admin/professionals", icon: Users, }, { title: "Turnos", href: "/admin/appointments", icon: Calendar, }, { title: "Configuración", href: "/admin/settings", icon: Settings, }, ] export function Sidebar() { const pathname = usePathname() return (

Admin Portal

Salir

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Calendar, CheckCircle, XCircle, RefreshCw, User } from "lucide-react" // Componente para mostrar la disponibilidad de los médicos const DoctorAvailability = ({ doctors }: { doctors: { name: string; available: boolean }[] }) => (

{doctors.map((doctor, index) => (

{doctor.name}

))}

) export default function AdminDashboard() { // Datos ficticios para los indicadores y próximos turnos const indicators = { turnosEfectuados: 150, turnosCancelados: 20, turnosReprogramados: 35, } const proximosTurnos = [ { paciente: "Juan Pérez", tipo: "Fisioterapia", hora: "15:30", fecha: "Hoy" }, { paciente: "María González", tipo: "Rehabilitación", hora: "16:00", fecha: "Mañana" }, { paciente: "Carlos Rodríguez", tipo: "Evaluación", hora: "10:15", fecha: "23/05/2023" }, ] // Datos ficticios para la disponibilidad de los médicos const doctorsAvailability = [ { name: "Dr. Martínez", available: true }, { name: "Dra. López", available: false }, { name: "Dr. Sánchez", available: true }, { name: "Dra. Fernández", available: false }, { name: "Dr. Gómez", available: true }, ] return (

Dashboard

Turnos Efectuados

{indicators.turnosEfectuados}

Turnos Cancelados

{indicators.turnosCancelados}

Turnos Reprogramados

{indicators.turnosReprogramados}

Próximos Turnos

{proximosTurnos.map((turno, i) => (

{turno.paciente}

{turno.tipo}

{turno.hora}

{turno.fecha}

))}

Disponibilidad de Médicos

) } [V0_FILE]typescriptreact:file="app/admin/news/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Plus, Pencil, Trash2 } from "lucide-react" import { NewsForm } from "@/components/admin/news-form" import { useAppContext } from "@/lib/AppContext" export default function NewsManagement() { const { news, setNews } = useAppContext() const [showForm, setShowForm] = useState(false) const [editingNews, setEditingNews] = useState(null) const handleDelete = (id: string) => { setNews(news.filter((item) => item.id !== id)) } return (

Gestión de Noticias

Título Fecha Acciones {news.map((item) => ( {item.title} {new Date(item.date).toLocaleDateString()} ))}

{showForm && ( { setShowForm(false) setEditingNews(null) }} onSave={(updatedNews) => { if (editingNews) { setNews(news.map((item) => (item.id === updatedNews.id ? updatedNews : item))) } else { setNews([...news, { ...updatedNews, id: Date.now().toString() }]) } setShowForm(false) setEditingNews(null) }} /> )}

) } [V0_FILE]typescriptreact:file="components/admin/news-form.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { X } from "lucide-react" interface NewsFormProps { news?: any onClose: () => void onSave: (news: any) => void } export function NewsForm({ news, onClose, onSave }: NewsFormProps) { const [formData, setFormData] = useState({ id: "", title: "", content: "", image: "", date: new Date().toISOString(), }) useEffect(() => { if (news) { setFormData(news) } }, [news]) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSave(formData) } return (

{news ? "Editar Noticia" : "Nueva Noticia"}

Título

Contenido

</div>

<div>
            <label className="block text-sm font-medium mb-1">URL de la Imagen</label>
            <Input
              name="image"
              value={formData.image}
              onChange={handleChange}
              placeholder="Ingrese la URL de la imagen"
              required
            />
          </div>

<div className="flex justify-end gap-4">
            <Button type="button" variant="outline" onClick={onClose}>
              Cancelar
            </Button>
            <Button type="submit">{news ? "Guardar Cambios" : "Crear Noticia"}</Button>
          </div>
        </form>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/appointments/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Calendar } from "@/components/ui/calendar"
import { Plus, Eye, Pencil, Trash2 } from "lucide-react"
import { AppointmentForm } from "@/components/admin/appointment-form"
import { useAppContext } from "@/lib/AppContext"

export default function AppointmentsManagement() {
  const { appointments, fetchAppointments, deleteAppointment } = useAppContext()
  const [showForm, setShowForm] = useState(false)
  const [editingAppointment, setEditingAppointment] = useState<any>(null)
  const [date, setDate] = useState<Date | undefined>(new Date())

const handleDelete = async (id: string) => {
    await deleteAppointment(id)
    await fetchAppointments()
  }

return (
    <div className="space-y-8">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">Gestión de Turnos</h1>
        <Button onClick={() => setShowForm(true)}>
          <Plus className="h-4 w-4 mr-2" />
          Nuevo Turno
        </Button>
      </div>

<div className="bg-white rounded-lg shadow">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Fecha</TableHead>
                <TableHead>Hora</TableHead>
                <TableHead>Paciente</TableHead>
                <TableHead>Profesional</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead className="text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {appointments.map((appointment) => (
                <TableRow key={appointment.id}>
                  <TableCell>{new Date(appointment.fecha).toLocaleDateString()}</TableCell>
                  <TableCell>{appointment.hora}</TableCell>
                  <TableCell className="font-medium">{appointment.paciente}</TableCell>
                  <TableCell>{appointment.profesional}</TableCell>
                  <TableCell>{appointment.tipo}</TableCell>
                  <TableCell className="text-right">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setEditingAppointment(appointment)
                        setShowForm(true)
                      }}
                    >
                      <Pencil className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => handleDelete(appointment.id)}>
                      <Trash2 className="h-4 w-4 text-red-500" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </div>

{showForm && (
        <AppointmentForm
          appointment={editingAppointment}
          onClose={() => {
            setShowForm(false)
            setEditingAppointment(null)
          }}
          onSave={async () => {
            await fetchAppointments()
            setShowForm(false)
            setEditingAppointment(null)
          }}
        />
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/admin/appointment-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { X } from "lucide-react"
import { useAppContext } from "@/lib/AppContext"

interface AppointmentFormProps {
  appointment?: any
  onClose: () => void
  onSave: () => void
}

export function AppointmentForm({ appointment, onClose, onSave }: AppointmentFormProps) {
  const { createAppointment, updateAppointment, professionals } = useAppContext()
  const [formData, setFormData] = useState({
    paciente: "",
    profesional: "",
    fecha: "",
    hora: "",
    tipo: "",
  })

useEffect(() => {
    if (appointment) {
      setFormData(appointment)
    }
  }, [appointment])

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      if (appointment) {
        await updateAppointment(appointment.id, formData)
      } else {
        await createAppointment(formData)
      }
      onSave()
    } catch (error) {
      console.error("Error saving appointment:", error)
    }
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white rounded-lg p-6 w-full max-w-2xl">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold">{appointment ? "Editar Turno" : "Nuevo Turno"}</h2>
          <Button variant="ghost" size="sm" onClick={onClose}>
            <X className="h-4 w-4" />
          </Button>
        </div>

<form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">Paciente</label>
            <Input
              name="paciente"
              value={formData.paciente}
              onChange={handleChange}
              placeholder="Nombre del paciente"
              required
            />
          </div>

<div>
            <label className="block text-sm font-medium mb-1">Profesional</label>
            <Select
              name="profesional"
              value={formData.profesional}
              onValueChange={(value) => setFormData((prev) => ({ ...prev, profesional: value }))}
            >
              <SelectTrigger>
                <SelectValue placeholder="Seleccione un profesional" />
              </SelectTrigger>
              <SelectContent>
                {professionals.map((professional) => (
                  <SelectItem key={professional.id} value={professional.id}>
                    {professional.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">Fecha</label>
              <Input type="date" name="fecha" value={formData.fecha} onChange={handleChange} required />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Hora</label>
              <Input type="time" name="hora" value={formData.hora} onChange={handleChange} required />
            </div>
          </div>

<div>
            <label className="block text-sm font-medium mb-1">Tipo de Consulta</label>
            <Select
              name="tipo"
              value={formData.tipo}
              onValueChange={(value) => setFormData((prev) => ({ ...prev, tipo: value }))}
            >
              <SelectTrigger>
                <SelectValue placeholder="Seleccione el tipo de consulta" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="fisioterapia">Fisioterapia</SelectItem>
                <SelectItem value="rehabilitacion">Rehabilitación</SelectItem>
                <SelectItem value="evaluacion">Evaluación</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="flex justify-end gap-4">
            <Button variant="outline" onClick={onClose}>
              Cancelar
            </Button>
            <Button type="submit">{appointment ? "Guardar Cambios" : "Crear Turno"}</Button>
          </div>
        </form>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import "./globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { AppProvider } from "@/lib/AppContext"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Medik Center",
  description: "Centro de Kinesiología y Rehabilitación",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es">
      <body className={inter.className}>
        <AppProvider>{children}</AppProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/admin/professional-form.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { X } from "lucide-react"
import { useAppContext } from "@/lib/AppContext"

interface ProfessionalFormProps {
  professional?: any
  onClose: () => void
  onSave: () => void
}

export function ProfessionalForm({ professional, onClose, onSave }: ProfessionalFormProps) {
  const { createProfessional, updateProfessional } = useAppContext()
  const [formData, setFormData] = useState({
    nombre: "",
    imagen: null as File | null,
  })
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)

useEffect(() => {
    if (professional) {
      setFormData({
        nombre: professional.nombre,
        imagen: null,
      })
      setPreviewUrl(professional.imagen)
    }
  }, [professional])

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, files } = e.target
    if (name === "imagen" && files && files[0]) {
      setFormData((prev) => ({ ...prev, [name]: files[0] }))
      setPreviewUrl(URL.createObjectURL(files[0]))
    } else {
      setFormData((prev) => ({ ...prev, [name]: value }))
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      if (professional) {
        await updateProfessional(professional.id, formData)
      } else {
        await createProfessional(formData)
      }
      onSave()
    } catch (error) {
      console.error("Error saving professional:", error)
    }
  }

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-white rounded-lg p-6 w-full max-w-2xl">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold">{professional ? "Editar Profesional" : "Nuevo Profesional"}</h2>
          <Button variant="ghost" size="sm" onClick={onClose}>
            <X className="h-4 w-4" />
          </Button>
        </div>

<form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">Nombre</label>
            <Input
              name="nombre"
              value={formData.nombre}
              onChange={handleChange}
              placeholder="Nombre del profesional"
              required
            />
          </div>

<div>
            <label className="block text-sm font-medium mb-1">Imagen</label>
            <Input type="file" name="imagen" onChange={handleChange} accept="image/*" />
          </div>

{previewUrl && (
            <div className="mt-4">
              <img
                src={previewUrl || "/placeholder.svg"}
                alt="Preview"
                className="max-w-full h-auto max-h-48 rounded"
              />
            </div>
          )}

<div className="flex justify-end gap-4">
            <Button variant="outline" onClick={onClose}>
              Cancelar
            </Button>
            <Button type="submit">{professional ? "Guardar Cambios" : "Crear Profesional"}</Button>
          </div>
        </form>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/admin/professionals/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Plus, Pencil, Trash2 } from "lucide-react"
import { ProfessionalForm } from "@/components/admin/professional-form"
import { useAppContext } from "@/lib/AppContext"
import Image from "next/image"

export default function ProfessionalsManagement() {
  const { professionals, fetchProfessionals, deleteProfessional } = useAppContext()
  const [showForm, setShowForm] = useState(false)
  const [editingProfessional, setEditingProfessional] = useState<any>(null)

useEffect(() => {
    fetchProfessionals()
  }, [])

const handleDelete = async (id: string) => {
    await deleteProfessional(id)
    await fetchProfessionals()
  }

return (
    <div>
      <div className="flex justify-between items-center mb-8">
        <h1 className="text-3xl font-bold">Gestión de Profesionales</h1>
        <Button onClick={() => setShowForm(true)}>
          <Plus className="h-4 w-4 mr-2" />
          Nuevo Profesional
        </Button>
      </div>

<div className="bg-white rounded-lg shadow">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Imagen</TableHead>
              <TableHead>Nombre</TableHead>
              <TableHead className="text-right">Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {professionals.map((professional) => (
              <TableRow key={professional.id}>
                <TableCell>
                  <Image
                    src={professional.imagen || "/placeholder.svg"}
                    alt={professional.nombre}
                    width={50}
                    height={50}
                    className="rounded-full object-cover"
                  />
                </TableCell>
                <TableCell className="font-medium">{professional.nombre}</TableCell>
                <TableCell className="text-right">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      setEditingProfessional(professional)
                      setShowForm(true)
                    }}
                  >
                    <Pencil className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="sm" onClick={() => handleDelete(professional.id)}>
                    <Trash2 className="h-4 w-4 text-red-500" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

{showForm && (
        <ProfessionalForm
          professional={editingProfessional}
          onClose={() => {
            setShowForm(false)
            setEditingProfessional(null)
          }}
          onSave={async () => {
            await fetchProfessionals()
            setShowForm(false)
            setEditingProfessional(null)
          }}
        />
      )}
    </div>
  )
}

[V0_FILE]plaintext:file=".env.local" isMerged="true"
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

[V0_FILE]typescriptreact:file="lib/supabase.ts" isDeleted="true" isEdit="true"
...deleted...

[V0_FILE]typescriptreact:file="lib/AppContext.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"
import { createContext, useContext, useState } from "react"

type News = {
  id: string
  title: string
  content: string
  image: string
  date: string
}

type Professional = {
  id: string
  nombre: string
  imagen: string
}

type Appointment = {
  id: string
  paciente: string
  profesional: string
  fecha: string
  hora: string
  tipo: string
}

type AppContextType = {
  news: News[]
  setNews: React.Dispatch<React.SetStateAction<News[]>>
  professionals: Professional[]
  setProfessionals: React.Dispatch<React.SetStateAction<Professional[]>>
  appointments: Appointment[]
  setAppointments: React.Dispatch<React.SetStateAction<Appointment[]>>
  fetchAppointments: () => Promise<void>
  createAppointment: (appointment: Omit<Appointment, "id">) => Promise<void>
  updateAppointment: (id: string, appointment: Partial<Appointment>) => Promise<void>
  deleteAppointment: (id: string) => Promise<void>
  fetchProfessionals: () => Promise<void>
  createProfessional: (professional: { nombre: string; imagen: File | null }) => Promise<void>
  updateProfessional: (id: string, professional: { nombre: string; imagen: File | null }) => Promise<void>
  deleteProfessional: (id: string) => Promise<void>
  error: string | null
}

const AppContext = createContext<AppContextType | undefined>(undefined)

export function AppProvider({ children }: { children: React.ReactNode }) {
  const [news, setNews] = useState<News[]>([])
  const [professionals, setProfessionals] = useState<Professional[]>([])
  const [appointments, setAppointments] = useState<Appointment[]>([])
  const [error, setError] = useState<string | null>(null)

const initialProfessionals: Professional[] = [
    { id: "1", nombre: "Dr. Juan Pérez", imagen: "/placeholder.svg" },
    { id: "2", nombre: "Dra. María González", imagen: "/placeholder.svg" },
  ]

const initialAppointments: Appointment[] = [
    { id: "1", paciente: "Carlos Rodríguez", profesional: "1", fecha: "2023-05-20", hora: "10:00", tipo: "Consulta" },
    { id: "2", paciente: "Ana Martínez", profesional: "2", fecha: "2023-05-21", hora: "11:00", tipo: "Terapia" },
  ]

const fetchAppointments = async () => {
    setAppointments(initialAppointments)
  }

const createAppointment = async (appointment: Omit<Appointment, "id">) => {
    const newAppointment = {
      id: String(appointments.length + 1),
      ...appointment,
    }
    setAppointments([...appointments, newAppointment])
  }

const updateAppointment = async (id: string, appointment: Partial<Appointment>) => {
    setAppointments(appointments.map((app) => (app.id === id ? { ...app, ...appointment } : app)))
  }

const deleteAppointment = async (id: string) => {
    setAppointments(appointments.filter((app) => app.id !== id))
  }

const fetchProfessionals = async () => {
    setProfessionals(initialProfessionals)
  }

const createProfessional = async (professional: { nombre: string; imagen: File | null }) => {
    const newProfessional = {
      id: String(professionals.length + 1),
      nombre: professional.nombre,
      imagen: professional.imagen ? URL.createObjectURL(professional.imagen) : "/placeholder.svg",
    }
    setProfessionals([...professionals, newProfessional])
  }

const updateProfessional = async (id: string, professional: { nombre: string; imagen: File | null }) => {
    setProfessionals(
      professionals.map((prof) =>
        prof.id === id
          ? {
              ...prof,
              nombre: professional.nombre,
              imagen: professional.imagen ? URL.createObjectURL(professional.imagen) : prof.imagen,
            }
          : prof,
      ),
    )
  }

const deleteProfessional = async (id: string) => {
    setProfessionals(professionals.filter((prof) => prof.id !== id))
  }

return (
    <AppContext.Provider
      value={{
        news,
        setNews,
        professionals,
        setProfessionals,
        appointments,
        setAppointments,
        fetchAppointments,
        createAppointment,
        updateAppointment,
        deleteAppointment,
        fetchProfessionals,
        createProfessional,
        updateProfessional,
        deleteProfessional,
        error,
      }}
    >
      {children}
    </AppContext.Provider>
  )
}

export function useAppContext() {
  const context = useContext(AppContext)
  if (context === undefined) {
    throw new Error("useAppContext must be used within an AppProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect } from "react"
import Image from "next/image"
import { Navbar } from "@/components/navbar"
import { NewsCarousel } from "@/components/news-carousel"
import { Services } from "@/components/services"
import { Professionals } from "@/components/professionals"
import { FAQ } from "@/components/faq"
import { Footer } from "@/components/footer"
import { useAppContext } from "@/lib/AppContext"

export default function Home() {
  const { error, fetchProfessionals, fetchAppointments } = useAppContext()

useEffect(() => {
    // No es necesario cargar datos al inicio
  }, [])

if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-red-100 text-red-800 px-4">
        <div className="max-w-md w-full bg-white shadow-lg rounded-lg p-8">
          <h1 className="text-2xl font-bold mb-4">Error</h1>
          <p>{error}</p>
        </div>
      </div>
    )
  }

return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main>
        {/* Hero Section */}
        <section className="relative bg-white overflow-hidden">
          <div className="absolute inset-0">
            <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20" />
            <div className="absolute right-0 top-0 h-full w-1/2">
              <svg
                className="h-full w-full text-primary"
                fill="currentColor"
                viewBox="0 0 100 100"
                preserveAspectRatio="none"
              >
                <polygon points="0,0 100,0 100,100" opacity="0.1" />
              </svg>
            </div>
          </div>
          <div className="relative container mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <div>
                <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 tracking-tight">
                  Centro de <span className="text-primary">Kinesiología</span> y Rehabilitación
                </h1>
                <p className="mt-6 text-xl text-gray-600 max-w-3xl">
                  Nos dedicamos a ayudarte a recuperar el control de tu salud y bienestar a través de nuestro equipo de
                  fisioterapeutas experimentados.
                </p>
                <div className="mt-8 flex gap-4">
                  <a
                    href="#contact"
                    className="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90"
                  >
                    Contactar
                  </a>
                  <a
                    href="#services"
                    className="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-primary/10 hover:bg-primary/20"
                  >
                    Servicios
                  </a>
                </div>
              </div>
              <div className="relative">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-KwcqsEqOs7FZ8tgQnLKsLw5lTduxA6.png"
                  alt="Fisioterapia"
                  width={600}
                  height={400}
                  className="rounded-lg shadow-xl"
                />
              </div>
            </div>
          </div>
        </section>

{/* News Carousel */}
        <section className="py-12 bg-gray-50">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-8">Últimas Noticias</h2>
            <NewsCarousel />
          </div>
        </section>

{/* Services Section */}
        <section id="services" className="py-16">
          <Services />
        </section>

{/* Professionals Section */}
        <section id="professionals" className="py-16 bg-gray-50">
          <Professionals />
        </section>

{/* FAQ Section */}
        <section id="faq" className="py-16">
          <FAQ />
        </section>
      </main>
      <Footer />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/professionals.tsx" isEdit="true" isQuickEdit="true"
"use client"

import Image from "next/image"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAppContext } from "@/lib/AppContext"

export function Professionals() {
  const { professionals } = useAppContext()

return (
    <div className="container mx-auto px-4">
      <h2 className="text-3xl font-bold text-center mb-12">Nuestros Profesionales</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {professionals.map((professional) => (
          <Card key={professional.id} className="overflow-hidden">
            <Image
              src={professional.imagen || "/placeholder.svg"}
              alt={professional.nombre}
              width={300}
              height={300}
              className="w-full object-cover h-64"
            />
            <CardHeader>
              <CardTitle>{professional.nombre}</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600">{professional.specialty}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
</article></body></html>