.elementor-kit-11{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */import React, { useState } from 'react';

const calculateZodiacSign = (day, month) => {
  const dates = [
    { start: [21, 3], end: [19, 4], sign: "Aries" },
    { start: [20, 4], end: [20, 5], sign: "Tauro" },
    { start: [21, 5], end: [20, 6], sign: "Géminis" },
    { start: [21, 6], end: [22, 7], sign: "Cáncer" },
    { start: [23, 7], end: [22, 8], sign: "Leo" },
    { start: [23, 8], end: [22, 9], sign: "Virgo" },
    { start: [23, 9], end: [22, 10], sign: "Libra" },
    { start: [23, 10], end: [21, 11], sign: "Escorpio" },
    { start: [22, 11], end: [21, 12], sign: "Sagitario" },
    { start: [22, 12], end: [19, 1], sign: "Capricornio" },
    { start: [20, 1], end: [18, 2], sign: "Acuario" },
    { start: [19, 2], end: [20, 3], sign: "Piscis" }
  ];

  // Convert month to 1-12 format if it's 0-11
  const adjustedMonth = month;
  
  for (const range of dates) {
    const [startDay, startMonth] = range.start;
    const [endDay, endMonth] = range.end;
    
    // Handle the case of signs that span across two months
    if (startMonth > endMonth || (startMonth === endMonth && startDay > endDay)) {
      if ((adjustedMonth === startMonth && day >= startDay) || 
          (adjustedMonth === endMonth && day <= endDay)) {
        return range.sign;
      }
    } else if ((adjustedMonth === startMonth && day >= startDay) || 
             (adjustedMonth === endMonth && day <= endDay) ||
             (adjustedMonth > startMonth && adjustedMonth < endMonth)) {
      return range.sign;
    }
  }
  
  return "Desconocido";
};

// Calcular las casas astrológicas (simplificado)
const calculateHouses = (birthDateTime, latitude, longitude) => {
  // Esta es una simplificación, en la realidad se requieren cálculos astronómicos complejos
  const houses = Array(12).fill().map((_, i) => ({
    house: i + 1,
    sign: calculateZodiacSign((i * 30 + Math.floor(birthDateTime.getTime() / 1000) % 360) % 30, 
                             ((i * 30 + Math.floor(birthDateTime.getTime() / 1000) % 360) % 360) / 30 + 1)
  }));
  
  return houses;
};

// Calcular las posiciones planetarias (simplificado)
const calculatePlanetPositions = (birthDateTime) => {
  // En una implementación real, usaríamos efemérides astronómicas
  // Esta es una versión muy simplificada para demostración
  const planets = [
    "Sol", "Luna", "Mercurio", "Venus", "Marte", 
    "Júpiter", "Saturno", "Urano", "Neptuno", "Plutón"
  ];
  
  const seed = birthDateTime.getTime();
  
  return planets.map(planet => {
    // Generamos posiciones aleatorias pero consistentes basadas en la fecha
    const position = (seed % 360 + planets.indexOf(planet) * 30) % 360;
    const sign = calculateZodiacSign(position % 30, Math.floor(position / 30) + 1);
    const house = Math.floor((position % 360) / 30) + 1;
    
    return { planet, sign, position, house };
  });
};

const NatalChartCalculator = () => {
  const [formData, setFormData] = useState({
    name: '',
    birthDate: '',
    birthTime: '',
    birthPlace: '',
    latitude: '',
    longitude: ''
  });
  
  const [chartData, setChartData] = useState(null);
  const [error, setError] = useState('');
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Validar datos del formulario
    if (!formData.birthDate || !formData.birthTime || !formData.birthPlace) {
      setError('Por favor completa todos los campos requeridos');
      return;
    }
    
    try {
      // Convertir fecha y hora a objeto Date
      const [year, month, day] = formData.birthDate.split('-').map(Number);
      const [hour, minute] = formData.birthTime.split(':').map(Number);
      
      const birthDateTime = new Date(year, month - 1, day, hour, minute);
      
      // Calcular carta natal
      const sunSign = calculateZodiacSign(day, month);
      const houses = calculateHouses(birthDateTime, parseFloat(formData.latitude) || 0, parseFloat(formData.longitude) || 0);
      const planets = calculatePlanetPositions(birthDateTime);
      
      // Generar aspectos (simplificado)
      const aspects = [];
      for (let i = 0; i < planets.length; i++) {
        for (let j = i + 1; j < planets.length; j++) {
          const angle = Math.abs(planets[i].position - planets[j].position);
          const adjustedAngle = angle > 180 ? 360 - angle : angle;
          
          let aspect = null;
          if (Math.abs(adjustedAngle - 0) <= 8 || Math.abs(adjustedAngle - 360) <= 8) {
            aspect = "Conjunción";
          } else if (Math.abs(adjustedAngle - 60) <= 8) {
            aspect = "Sextil";
          } else if (Math.abs(adjustedAngle - 90) <= 8) {
            aspect = "Cuadratura";
          } else if (Math.abs(adjustedAngle - 120) <= 8) {
            aspect = "Trígono";
          } else if (Math.abs(adjustedAngle - 180) <= 8) {
            aspect = "Oposición";
          }
          
          if (aspect) {
            aspects.push({
              planet1: planets[i].planet,
              planet2: planets[j].planet,
              aspect,
              angle: adjustedAngle
            });
          }
        }
      }
      
      // Generar datos de la carta
      setChartData({
        name: formData.name,
        birthDateTime: birthDateTime.toLocaleString(),
        birthPlace: formData.birthPlace,
        sunSign,
        moonSign: planets.find(p => p.planet === "Luna")?.sign,
        ascendant: houses[0].sign,
        houses,
        planets,
        aspects
      });
      
      setError('');
    } catch (err) {
      setError('Error al calcular la carta natal: ' + err.message);
    }
  };

  // Función para dibujar la carta natal como SVG
  const drawNatalChart = () => {
    if (!chartData) return null;
    
    const size = 500;
    const center = size / 2;
    const radius = size * 0.4;
    
    // Dibujar el círculo de la carta
    return (
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="mx-auto my-4">
        {/* Círculo exterior */}
        <circle cx={center} cy={center} r={radius} fill="white" stroke="black" strokeWidth="2" />
        
        {/* Dibujar las casas */}
        {chartData.houses.map((house, index) => {
          const angle = index * 30 * Math.PI / 180;
          const x1 = center + Math.sin(angle) * radius;
          const y1 = center - Math.cos(angle) * radius;
          const x2 = center;
          const y2 = center;
          
          return (
            <g key={`house-${index}`}>
              <line 
                x1={x1} 
                y1={y1} 
                x2={x2} 
                y2={y2} 
                stroke="black" 
                strokeWidth="1" 
              />
              <text 
                x={center + Math.sin(angle + 15 * Math.PI / 180) * (radius * 0.85)} 
                y={center - Math.cos(angle + 15 * Math.PI / 180) * (radius * 0.85)} 
                fontSize="12" 
                textAnchor="middle" 
                fill="blue"
              >
                {house.house}
              </text>
              <text 
                x={center + Math.sin(angle + 15 * Math.PI / 180) * (radius * 0.7)} 
                y={center - Math.cos(angle + 15 * Math.PI / 180) * (radius * 0.7)} 
                fontSize="10" 
                textAnchor="middle"
              >
                {house.sign.substring(0, 3)}
              </text>
            </g>
          );
        })}
        
        {/* Planetas (representados como puntos con etiquetas) */}
        {chartData.planets.map((planet, index) => {
          const houseIndex = planet.house - 1;
          const baseAngle = houseIndex * 30;
          // Distribuir planetas dentro de la casa
          const offsetAngle = baseAngle + (index % 3) * 8;
          const angle = offsetAngle * Math.PI / 180;
          
          const distance = radius * (0.5 - 0.05 * Math.floor(index / 3));
          const x = center + Math.sin(angle) * distance;
          const y = center - Math.cos(angle) * distance;
          
          // Abreviaturas de planetas
          const abbreviations = {
            "Sol": "☉", "Luna": "☽", "Mercurio": "☿", "Venus": "♀", "Marte": "♂",
            "Júpiter": "♃", "Saturno": "♄", "Urano": "♅", "Neptuno": "♆", "Plutón": "♇"
          };
          
          return (
            <g key={`planet-${index}`}>
              <circle cx={x} cy={y} r={5} fill="red" />
              <text 
                x={x} 
                y={y - 10} 
                fontSize="12" 
                textAnchor="middle" 
                fill="darkred"
              >
                {abbreviations[planet.planet] || planet.planet.substring(0, 2)}
              </text>
            </g>
          );
        })}
      </svg>
    );
  };

  return (
    <div className="max-w-4xl mx-auto p-6 bg-gray-100 rounded-lg shadow-lg">
      <h1 className="text-3xl font-bold text-center mb-6 text-indigo-700">Calculadora de Carta Natal</h1>
      
      <form onSubmit={handleSubmit} className="mb-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="name">
              Nombre (opcional):
            </label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="Tu nombre"
            />
          </div>
          
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="birthDate">
              Fecha de Nacimiento:
            </label>
            <input
              type="date"
              id="birthDate"
              name="birthDate"
              value={formData.birthDate}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              required
            />
          </div>
          
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="birthTime">
              Hora de Nacimiento:
            </label>
            <input
              type="time"
              id="birthTime"
              name="birthTime"
              value={formData.birthTime}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              required
            />
          </div>
          
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="birthPlace">
              Lugar de Nacimiento:
            </label>
            <input
              type="text"
              id="birthPlace"
              name="birthPlace"
              value={formData.birthPlace}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="Ciudad, País"
              required
            />
          </div>
          
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="latitude">
              Latitud (opcional):
            </label>
            <input
              type="number"
              id="latitude"
              name="latitude"
              value={formData.latitude}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="ej. 40.7128"
              step="0.0001"
            />
          </div>
          
          <div className="mb-4">
            <label className="block text-gray-700 font-bold mb-2" htmlFor="longitude">
              Longitud (opcional):
            </label>
            <input
              type="number"
              id="longitude"
              name="longitude"
              value={formData.longitude}
              onChange={handleChange}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              placeholder="ej. -74.0060"
              step="0.0001"
            />
          </div>
        </div>
        
        {error && (
          <div className="text-red-500 mb-4">
            {error}
          </div>
        )}
        
        <div className="text-center">
          <button
            type="submit"
            className="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors text-lg font-bold"
          >
            Calcular Carta Natal
          </button>
        </div>
      </form>
      
      {chartData && (
        <div className="bg-white p-6 rounded-lg shadow">
          <h2 className="text-2xl font-bold text-center mb-4 text-indigo-700">
            Carta Natal: {chartData.name || "Anónimo"}
          </h2>
          
          <div className="mb-4">
            <p className="text-center text-gray-700">
              <strong>Fecha y hora:</strong> {chartData.birthDateTime}
            </p>
            <p className="text-center text-gray-700">
              <strong>Lugar:</strong> {chartData.birthPlace}
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div className="bg-indigo-50 p-4 rounded-lg">
              <h3 className="font-bold text-indigo-700 mb-2">Signo Solar</h3>
              <p className="text-lg">{chartData.sunSign}</p>
            </div>
            
            <div className="bg-indigo-50 p-4 rounded-lg">
              <h3 className="font-bold text-indigo-700 mb-2">Signo Lunar</h3>
              <p className="text-lg">{chartData.moonSign}</p>
            </div>
            
            <div className="bg-indigo-50 p-4 rounded-lg">
              <h3 className="font-bold text-indigo-700 mb-2">Ascendente</h3>
              <p className="text-lg">{chartData.ascendant}</p>
            </div>
          </div>
          
          {drawNatalChart()}
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
            <div>
              <h3 className="text-xl font-bold text-indigo-700 mb-3">Posiciones Planetarias</h3>
              <div className="bg-gray-50 p-4 rounded-lg">
                <table className="w-full">
                  <thead>
                    <tr className="border-b-2 border-gray-200">
                      <th className="text-left pb-2">Planeta</th>
                      <th className="text-left pb-2">Signo</th>
                      <th className="text-left pb-2">Casa</th>
                    </tr>
                  </thead>
                  <tbody>
                    {chartData.planets.map((planet, index) => (
                      <tr key={index} className="border-b border-gray-100">
                        <td className="py-2">{planet.planet}</td>
                        <td className="py-2">{planet.sign}</td>
                        <td className="py-2">{planet.house}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            
            <div>
              <h3 className="text-xl font-bold text-indigo-700 mb-3">Aspectos Planetarios</h3>
              <div className="bg-gray-50 p-4 rounded-lg h-64 overflow-y-auto">
                {chartData.aspects.length > 0 ? (
                  <table className="w-full">
                    <thead>
                      <tr className="border-b-2 border-gray-200">
                        <th className="text-left pb-2">Planetas</th>
                        <th className="text-left pb-2">Aspecto</th>
                        <th className="text-left pb-2">Ángulo</th>
                      </tr>
                    </thead>
                    <tbody>
                      {chartData.aspects.map((aspect, index) => (
                        <tr key={index} className="border-b border-gray-100">
                          <td className="py-2">{aspect.planet1} - {aspect.planet2}</td>
                          <td className="py-2">{aspect.aspect}</td>
                          <td className="py-2">{aspect.angle.toFixed(1)}°</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : (
                  <p className="text-gray-500 italic">No se encontraron aspectos significativos</p>
                )}
              </div>
            </div>
          </div>
          
          <div className="mt-6 pt-6 border-t border-gray-200">
            <h3 className="text-xl font-bold text-indigo-700 mb-3">Interpretación</h3>
            <div className="bg-gray-50 p-4 rounded-lg">
              <p className="text-gray-600 mb-3">
                Esta carta natal muestra que eres {chartData.sunSign} con Luna en {chartData.moonSign} y 
                Ascendente en {chartData.ascendant}. Esto sugiere una personalidad con las siguientes características:
              </p>
              <ul className="list-disc list-inside space-y-2 text-gray-600">
                <li>Tu esencia (Sol en {chartData.sunSign}) te hace una persona {getSignCharacteristics(chartData.sunSign)}.</li>
                <li>Tus emociones (Luna en {chartData.moonSign}) se manifiestan de manera {getSignCharacteristics(chartData.moonSign)}.</li>
                <li>Tu apariencia externa y forma de enfrentar la vida (Ascendente en {chartData.ascendant}) se caracteriza por ser {getSignCharacteristics(chartData.ascendant)}.</li>
              </ul>
              <p className="mt-4 text-gray-500 italic text-sm">
                Nota: Esta es una interpretación simplificada. Una carta natal completa requiere el análisis detallado de un astrólogo profesional.
              </p>
            </div>
          </div>
        </div>
      )}
      
      <div className="mt-8 pt-4 border-t border-gray-200 text-center text-gray-500 text-sm">
        <p>© 2025 Calculadora de Carta Natal - Astrología</p>
        <p className="mt-1">
          Nota: Esta herramienta es para fines educativos y de entretenimiento. 
          Para una lectura astrológica precisa, consulta con un astrólogo profesional.
        </p>
      </div>
    </div>
  );
};

// Función auxiliar para obtener características de los signos
function getSignCharacteristics(sign) {
  const characteristics = {
    "Aries": "energética, impulsiva y líder natural",
    "Tauro": "estable, práctica y sensual",
    "Géminis": "versátil, curiosa e intelectual",
    "Cáncer": "emocional, intuitiva y protectora",
    "Leo": "creativa, orgullosa y generosa",
    "Virgo": "analítica, meticulosa y servicial",
    "Libra": "diplomática, equilibrada y sociable",
    "Escorpio": "intensa, pasional y transformadora",
    "Sagitario": "optimista, aventurera y filosófica",
    "Capricornio": "disciplinada, responsable y ambiciosa",
    "Acuario": "original, independiente y humanitaria",
    "Piscis": "compasiva, espiritual y creativa"
  };
  
  return characteristics[sign] || "con características únicas";
}

export default NatalChartCalculator;/* End custom CSS */