"use client"

import type React from "react"
import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { CheckCircle2, AlertCircle } from "lucide-react"

export default function ContactoClientPage() {
  const [formData, setFormData] = useState({
    tipoCruce: "",
    nombreApellido: "",
    tipoDocumento: "",
    numeroDocumento: "",
    pais: "",
    provincia: "",
    localidad: "",
    domicilio: "",
    telefono: "",
    fechaNacimiento: "",
    ocupacion: "",
    estudios: "",
    estadoFisico: "",
    actividadFisica: "",
    conocimientosCabalgata: "",
    sabeEnsillar: "",
    comoSeEntero: "",
    porQueSeAnoto: "",
    queLeAportaria: "",
    participaAsociacion: "",
    email: "",
    emailRepetir: "",
    fotoCarnet: null as File | null,
    imagenPerfil: null as File | null,
    consentimiento: false,
  })

  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [alert, setAlert] = useState<{
    type: "success" | "error"
    message: string
  } | null>(null)

  const paises = [
    "Argentina",
    "Brasil",
    "Chile",
    "Uruguay",
    "Paraguay",
    "Bolivia",
    "Perú",
    "Colombia",
    "Venezuela",
    "Ecuador",
    "México",
    "Estados Unidos",
    "España",
    "Italia",
    "Francia",
    "Alemania",
    "Otro",
  ]

  const provincias = [
    "Ciudad Autónoma de Buenos Aires",
    "Buenos Aires",
    "Catamarca",
    "Chaco",
    "Chubut",
    "Córdoba",
    "Corrientes",
    "Entre Ríos",
    "Formosa",
    "Jujuy",
    "La Pampa",
    "La Rioja",
    "Mendoza",
    "Misiones",
    "Neuquén",
    "Rio Negro",
    "Salta",
    "San Juan",
    "San Luis",
    "Santa Cruz",
    "Santa Fe",
    "Santiago del Estero",
    "Tierra del Fuego",
    "Tucumán",
  ]

  const estudiosOpciones = [
    "Primario",
    "Primario completo",
    "Secundario",
    "Secundario completo",
    "Terciario / Universitario",
    "Terciario / Universitario completo",
  ]

  const comoSeEnteroOpciones = [
    "Canal 13 Bs. As.",
    "Canal 26",
    "Canal 3 Rosario",
    "Canal 5 Rosario",
    "Canal 6 CableVisión Rosario",
    "Diario Clarín",
    "Diario Diario 1 Mendoza",
    "Diario La Capital Rosario",
    "Por el sitio web",
    "Por un amigo, conocido",
    "Radio 10",
    "Radio 2 LT2 Rosario",
    "Radio LT3 Rosario",
    "Radio LT8 Rosario",
    "Revista Soldado",
    "Otros medios",
  ]

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setAlert(null)

    // Validaciones básicas
    if (
      !formData.tipoCruce ||
      !formData.nombreApellido ||
      !formData.email ||
      !formData.tipoDocumento ||
      !formData.numeroDocumento ||
      !formData.sabeEnsillar
    ) {
      setAlert({
        type: "error",
        message: "Por favor completa todos los campos obligatorios (*).",
      })
      setIsSubmitting(false)
      return
    }

    // Validar provincia solo si el país es Argentina
    if (formData.pais === "Argentina" && !formData.provincia) {
      setAlert({
        type: "error",
        message: "Por favor completa todos los campos obligatorios (*).",
      })
      setIsSubmitting(false)
      return
    }

    if (formData.email !== formData.emailRepetir) {
      setAlert({
        type: "error",
        message: "Los emails no coinciden.",
      })
      setIsSubmitting(false)
      return
    }

    if (!formData.consentimiento) {
      setAlert({
        type: "error",
        message: "Debes autorizar el uso de tus datos para continuar.",
      })
      setIsSubmitting(false)
      return
    }

    // Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(formData.email)) {
      setAlert({
        type: "error",
        message: "Por favor ingresa un correo electrónico válido.",
      })
      setIsSubmitting(false)
      return
    }

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

      const data = await response.json()

      if (response.ok && data.success) {
        setIsSubmitted(true)
      } else {
        setAlert({
          type: "error",
          message: data.error || "Hubo un error al enviar la inscripción. Por favor intenta nuevamente.",
        })
      }
    } catch (error) {
      setAlert({
        type: "error",
        message: "Error de conexión. Por favor verifica tu conexión e intenta nuevamente.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  // Si el formulario fue enviado exitosamente, mostrar página de agradecimiento
  if (isSubmitted) {
    return (
      <div className="flex flex-col">
        {/* Hero Section */}
        <section className="relative w-full h-[70vh] overflow-hidden">
          {/* Imagen de fondo */}
          <div
            className="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
            style={{
              backgroundImage: "url('/images/marcha-banderas.webp')",
            }}
          />

          {/* Overlay oscuro para mejor legibilidad */}
          <div className="absolute inset-0 bg-black/40" />

          {/* Contenido centrado */}
          <div className="relative z-10 flex items-center justify-center h-full">
            <div className="text-center px-8 max-w-4xl mx-auto">
              <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-8 text-white text-balance leading-tight">
                ¡Gracias por tu Inscripción!
              </h1>
            </div>
          </div>
        </section>

        <section className="py-16 md:py-24">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <Card>
                <CardContent className="pt-8">
                  <div className="text-center space-y-6">
                    <div className="flex justify-center">
                      <CheckCircle2 className="h-16 w-16 text-green-600" />
                    </div>
                    <div className="space-y-4">
                      <h2 className="text-3xl font-bold text-[#092454]">
                        ¡Inscripción Enviada con Éxito!
                      </h2>
                      <p className="text-lg text-muted-foreground">
                        Gracias por comunicarte con nosotros. Hemos recibido tu inscripción para el Cruce de los Andes.
                      </p>
                      <div className="bg-muted rounded-lg p-6 space-y-4 text-left">
                        <p className="text-base">
                          <strong>Próximos pasos:</strong>
                        </p>
                        <ul className="list-disc list-inside space-y-2 text-muted-foreground">
                          <li>Recibirás una copia de tu inscripción por email en breve.</li>
                          <li>Nuestro equipo revisará tu solicitud y se pondrá en contacto contigo.</li>
                          <li>Ante cualquier duda, puedes comunicarte a{" "}
                            <a
                              href="mailto:info@crucedelosandes.com.ar"
                              className="text-[#092454] hover:underline font-semibold"
                            >
                              info@crucedelosandes.com.ar
                            </a>
                          </li>
                        </ul>
                      </div>
                      <p className="text-sm text-muted-foreground italic">
                        La Asociación Cultural Sanmartiniana "Cuna de la Bandera" cuida y preserva el pasado para
                        sembrar el futuro
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      </div>
    )
  }

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative w-full h-[70vh] overflow-hidden">
        {/* Imagen de fondo */}
        <div
          className="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: "url('/images/marcha-banderas.webp')",
          }}
        />

        {/* Overlay oscuro para mejor legibilidad */}
        <div className="absolute inset-0 bg-black/40" />

        {/* Contenido centrado */}
        <div className="relative z-10 flex items-center justify-center h-full">
          <div className="text-center px-8 max-w-4xl mx-auto">
            <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-8 text-white text-balance leading-tight">
              Formulario de Inscripción al Cruce
            </h1>
            <p className="text-lg md:text-xl lg:text-2xl text-white/90 leading-relaxed text-pretty">
              Complete el formulario presentado a continuación, y luego presione ENVIAR. Los campos marcados con (*)
              requieren ingreso obligatorio.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <Card>
              <CardHeader>
                <CardTitle className="text-2xl">Inscripción al Cruce de los Andes</CardTitle>
                <CardDescription className="text-base">
                  Formulario de inscripción para participar en el Cruce de los Andes a lomo de mula
                </CardDescription>
              </CardHeader>
              <CardContent>
                {alert && (
                  <Alert
                    className="mb-6"
                    variant={alert.type === "error" ? "destructive" : "default"}
                    role="alert"
                    aria-live="polite"
                  >
                    {alert.type === "success" ? (
                      <CheckCircle2 className="h-4 w-4" aria-hidden="true" />
                    ) : (
                      <AlertCircle className="h-4 w-4" aria-hidden="true" />
                    )}
                    <AlertDescription>{alert.message}</AlertDescription>
                  </Alert>
                )}

                <form onSubmit={handleSubmit} className="space-y-8">
                  {/* Tipo de cruce */}
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold">
                      Tipo de cruce: <span className="text-destructive">*</span>
                    </h3>
                    <div className="flex gap-4">
                      <div className="flex items-center space-x-2">
                        <input
                          type="radio"
                          id="cruce-mula"
                          name="tipoCruce"
                          value="mula"
                          checked={formData.tipoCruce === "mula"}
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              tipoCruce: e.target.value,
                            })
                          }
                          className="w-4 h-4"
                        />
                        <Label htmlFor="cruce-mula">Cruce a lomo de mula</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <input
                          type="radio"
                          id="cruce-pie"
                          name="tipoCruce"
                          value="pie"
                          checked={formData.tipoCruce === "pie"}
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              tipoCruce: e.target.value,
                            })
                          }
                          className="w-4 h-4"
                        />
                        <Label htmlFor="cruce-pie">Cruce a pie</Label>
                      </div>
                    </div>
                  </div>

                  {/* Datos personales */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="nombreApellido">
                        Nombre y Apellido <span className="text-destructive">*</span>
                      </Label>
                      <Input
                        id="nombreApellido"
                        name="nombreApellido"
                        type="text"
                        required
                        value={formData.nombreApellido}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            nombreApellido: e.target.value,
                          })
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="tipoDocumento">
                        Tipo y Número de Documento <span className="text-destructive">*</span>
                      </Label>
                      <div className="flex gap-2">
                        <Select
                          value={formData.tipoDocumento}
                          onValueChange={(value) => setFormData({ ...formData, tipoDocumento: value })}
                        >
                          <SelectTrigger className="w-32">
                            <SelectValue placeholder="Tipo" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="DNI">DNI</SelectItem>
                            <SelectItem value="Pasaporte">Pasaporte</SelectItem>
                            <SelectItem value="Otro">Otro</SelectItem>
                          </SelectContent>
                        </Select>
                        <Input
                          id="numeroDocumento"
                          name="numeroDocumento"
                          type="text"
                          required
                          placeholder="Número"
                          value={formData.numeroDocumento}
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              numeroDocumento: e.target.value,
                            })
                          }
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="pais">
                        País de procedencia <span className="text-destructive">*</span>
                      </Label>
                      <Select
                        value={formData.pais}
                        onValueChange={(value) =>
                          setFormData({
                            ...formData,
                            pais: value,
                            provincia: value !== "Argentina" ? "" : formData.provincia,
                          })
                        }
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione un país" />
                        </SelectTrigger>
                        <SelectContent>
                          {paises.map((pais) => (
                            <SelectItem key={pais} value={pais}>
                              {pais}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {formData.pais === "Argentina" && (
                      <div className="space-y-2">
                        <Label htmlFor="provincia">
                          Provincia <span className="text-destructive">*</span>
                        </Label>
                        <Select
                          value={formData.provincia}
                          onValueChange={(value) => setFormData({ ...formData, provincia: value })}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccione una opción" />
                          </SelectTrigger>
                          <SelectContent>
                            {provincias.map((provincia) => (
                              <SelectItem key={provincia} value={provincia}>
                                {provincia}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    )}

                    <div className="space-y-2">
                      <Label htmlFor="localidad">Localidad</Label>
                      <Input
                        id="localidad"
                        name="localidad"
                        type="text"
                        value={formData.localidad}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            localidad: e.target.value,
                          })
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="domicilio">Domicilio</Label>
                      <Input
                        id="domicilio"
                        name="domicilio"
                        type="text"
                        value={formData.domicilio}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            domicilio: e.target.value,
                          })
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="telefono">Teléfono</Label>
                      <Input
                        id="telefono"
                        name="telefono"
                        type="tel"
                        value={formData.telefono}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            telefono: e.target.value,
                          })
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="fechaNacimiento">Fecha de nacimiento</Label>
                      <Input
                        id="fechaNacimiento"
                        name="fechaNacimiento"
                        type="date"
                        value={formData.fechaNacimiento}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            fechaNacimiento: e.target.value,
                          })
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="ocupacion">Ocupación</Label>
                      <Input
                        id="ocupacion"
                        name="ocupacion"
                        type="text"
                        value={formData.ocupacion}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            ocupacion: e.target.value,
                          })
                        }
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="estudios">
                        Estudios cursados <span className="text-destructive">*</span>
                      </Label>
                      <Select
                        value={formData.estudios}
                        onValueChange={(value) => setFormData({ ...formData, estudios: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione el máximo nivel de estudios alcanzado" />
                        </SelectTrigger>
                        <SelectContent>
                          {estudiosOpciones.map((estudio) => (
                            <SelectItem key={estudio} value={estudio}>
                              {estudio}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  {/* Estado físico */}
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold">Estado Físico y de Salud</h3>
                    <div className="space-y-2">
                      <Label htmlFor="estadoFisico">Estado Físico y de Salud</Label>
                      <Textarea
                        id="estadoFisico"
                        name="estadoFisico"
                        rows={3}
                        value={formData.estadoFisico}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            estadoFisico: e.target.value,
                          })
                        }
                        placeholder="Describa su estado físico y de salud..."
                      />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="actividadFisica">
                          ¿Realiza alguna actividad física o deporte? <span className="text-destructive">*</span>
                        </Label>
                        <Select
                          value={formData.actividadFisica}
                          onValueChange={(value) => setFormData({ ...formData, actividadFisica: value })}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccione" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Si">Sí</SelectItem>
                            <SelectItem value="No">No</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="conocimientosCabalgata">
                          ¿Tiene conocimientos sobre montar? <span className="text-destructive">*</span>
                        </Label>
                        <Select
                          value={formData.conocimientosCabalgata}
                          onValueChange={(value) =>
                            setFormData({
                              ...formData,
                              conocimientosCabalgata: value,
                            })
                          }
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccione" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="No">No</SelectItem>
                            <SelectItem value="Escasos">Escasos</SelectItem>
                            <SelectItem value="Si">Sí</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="sabeEnsillar">
                          ¿Sabe ensillar? <span className="text-destructive">*</span>
                        </Label>
                        <Select
                          value={formData.sabeEnsillar}
                          onValueChange={(value) =>
                            setFormData({
                              ...formData,
                              sabeEnsillar: value,
                            })
                          }
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccione" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Si">Sí</SelectItem>
                            <SelectItem value="No">No</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>

                  {/* Información adicional */}
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold">Información Adicional</h3>

                    <div className="space-y-2">
                      <Label htmlFor="comoSeEntero">
                        ¿Como se enteró del Cruce de los Andes? <span className="text-destructive">*</span>
                      </Label>
                      <Select
                        value={formData.comoSeEntero}
                        onValueChange={(value) => setFormData({ ...formData, comoSeEntero: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione un tipo de contacto" />
                        </SelectTrigger>
                        <SelectContent>
                          {comoSeEnteroOpciones.map((opcion) => (
                            <SelectItem key={opcion} value={opcion}>
                              {opcion}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="porQueSeAnoto">¿Por qué se anotó para participar del Cruce de los Andes?</Label>
                      <Textarea
                        id="porQueSeAnoto"
                        name="porQueSeAnoto"
                        rows={3}
                        value={formData.porQueSeAnoto}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            porQueSeAnoto: e.target.value,
                          })
                        }
                        placeholder="Explique sus motivos..."
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="queLeAportaria">¿Qué le aportaría ser expedicionario del próximo Cruce?</Label>
                      <Textarea
                        id="queLeAportaria"
                        name="queLeAportaria"
                        rows={3}
                        value={formData.queLeAportaria}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            queLeAportaria: e.target.value,
                          })
                        }
                        placeholder="Describa qué aportaría..."
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="participaAsociacion">¿Participa en alguna Asociación o Institución afín?</Label>
                      <Textarea
                        id="participaAsociacion"
                        name="participaAsociacion"
                        rows={2}
                        value={formData.participaAsociacion}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            participaAsociacion: e.target.value,
                          })
                        }
                        placeholder="Describa su participación..."
                      />
                    </div>
                  </div>

                  {/* Archivos */}
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold">Archivos</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="fotoCarnet">Subir foto (tipo carnet)</Label>
                        <Input
                          id="fotoCarnet"
                          name="fotoCarnet"
                          type="file"
                          accept="image/*"
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              fotoCarnet: e.target.files?.[0] || null,
                            })
                          }
                        />
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="imagenPerfil">Imagen de Perfil</Label>
                        <Input
                          id="imagenPerfil"
                          name="imagenPerfil"
                          type="file"
                          accept="image/*"
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              imagenPerfil: e.target.files?.[0] || null,
                            })
                          }
                        />
                      </div>
                    </div>
                  </div>

                  {/* Email */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="email">
                        Ingrese su Email <span className="text-destructive">*</span>
                      </Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        required
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="emailRepetir">
                        Repita su Email <span className="text-destructive">*</span>
                      </Label>
                      <Input
                        id="emailRepetir"
                        name="emailRepetir"
                        type="email"
                        required
                        value={formData.emailRepetir}
                        onChange={(e) =>
                          setFormData({
                            ...formData,
                            emailRepetir: e.target.value,
                          })
                        }
                      />
                    </div>
                  </div>

                  {/* Consentimiento */}
                  <div className="flex items-start gap-3">
                    <Checkbox
                      id="consentimiento"
                      required
                      checked={formData.consentimiento}
                      onCheckedChange={(checked) =>
                        setFormData({
                          ...formData,
                          consentimiento: checked as boolean,
                        })
                      }
                    />
                    <Label htmlFor="consentimiento" className="text-sm leading-relaxed cursor-pointer">
                      Autorizo el uso de mis datos para la inscripción al Cruce de los Andes.{" "}
                      <span className="text-destructive">*</span>
                    </Label>
                  </div>

                  <div className="text-center">
                    <Button
                      type="submit"
                      size="lg"
                      className="bg-[#092454] hover:bg-[#092454]/90"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? "Enviando..." : "ENVIAR"}
                    </Button>
                  </div>
                </form>

                <div className="mt-8 p-4 bg-muted rounded-lg">
                  <p className="text-sm text-muted-foreground text-center">
                    Usted recibirá una copia de su Inscripción, esa es la confirmación de su registración. Ante una duda
                    comunicarse a info@crucedelosandes.com.ar
                  </p>
                  <p className="text-sm text-muted-foreground text-center mt-2 font-semibold">
                    La Asociación Cultural Sanmartiniana "Cuna de la Bandera" cuida y preserva el pasado para sembrar el
                    futuro
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  )
}