moon/components/Articles.tsx

'use client';

import { useState } from 'react';
import { useLocale } from './LocaleProvider';
import { ts } from '@/lib/i18n';

interface Article {
  id: string;
  emoji: string;
  title: Record<string, string>;
  summary: Record<string, string>;
  content: Record<string, string[]>;
}

const ARTICLES: Article[] = [
  {
    id: 'mythology',
    emoji: '🏛️',
    title: {
      en: 'Moon in World Mythology',
      fr: 'La Lune dans les mythologies du monde',
    },
    summary: {
      en: 'From Selene to Chang\'e, explore how cultures worshipped the Moon.',
      fr: 'De Séléné à Chang\'e, découvrez comment les cultures vénéraient la Lune.',
    },
    content: {
      en: [
        'The Moon has been a central figure in human mythology for millennia. Nearly every civilization developed rich stories to explain its cycles, its glow, and its influence on life.',
        'In Greek mythology, Selene was the Titan goddess of the Moon, driving her silver chariot across the night sky. She fell in love with the mortal Endymion, whom Zeus cast into eternal sleep so she could visit him each night.',
        'In Roman tradition, Luna and Diana (goddess of the hunt) were both associated with the Moon. Diana\'s triple aspect — maiden, mother, crone — reflected the waxing, full, and waning moon.',
        'Chinese mythology tells of Chang\'e, who swallowed an elixir of immortality and floated to the Moon, where she lives in the Moon Palace with a jade rabbit. The Mid-Autumn Festival celebrates her story.',
        'In Hindu mythology, Chandra (the Moon god) rides a chariot pulled by ten white horses across the sky. The waxing and waning moon represent Chandra\'s blessings and his curse from Ganesha.',
        'Norse mythology describes Máni, brother of Sól (Sun), who guides the Moon across the sky while being chased by the great wolf Hati. At Ragnarök, the wolf will finally catch him.',
        'In Japanese Shinto tradition, Tsukuyomi is the Moon god, sibling of Amaterasu (Sun). After killing the food goddess Uke Mochi, he was banished to the night sky, forever separated from the Sun.',
        'African traditions offer diverse Moon stories. In Bushmen mythology, the Moon is a man who angered the Sun, who sliced away pieces of him, explaining the phases. He slowly grows back each month.',
      ],
      fr: [
        'La Lune a été une figure centrale dans la mythologie humaine pendant des millénaires. Presque chaque civilisation a développé des histoires riches pour expliquer ses cycles et son influence.',
        'Dans la mythologie grecque, Séléné était la déesse titanide de la Lune, conduisant son char d\'argent à travers le ciel nocturne. Elle tomba amoureuse du mortel Endymion, que Zeus plongea dans un sommeil éternel.',
        'Dans la tradition romaine, Luna et Diane (déesse de la chasse) étaient associées à la Lune. Le triple aspect de Diane — jeune fille, mère, vieille femme — reflétait la lune croissante, pleine et décroissante.',
        'La mythologie chinoise raconte l\'histoire de Chang\'e, qui avala un élixir d\'immortalité et s\'envola vers la Lune, où elle vit dans le Palais Lunaire avec un lapin de jade. La Fête de la Mi-Automne célèbre son histoire.',
        'Dans la mythologie hindoue, Chandra (le dieu de la Lune) chevauche un char tiré par dix chevaux blancs. Les phases croissantes et décroissantes représentent ses bénédictions et sa malédiction par Ganesha.',
        'La mythologie nordique décrit Máni, frère de Sól (Soleil), qui guide la Lune à travers le ciel tout en étant pourchassé par le grand loup Hati. Au Ragnarök, le loup l\'attrapera finalement.',
        'Dans la tradition shintoïste japonaise, Tsukuyomi est le dieu de la Lune, frère d\'Amaterasu (Soleil). Après avoir tué la déesse Uke Mochi, il fut banni dans le ciel nocturne, séparé du Soleil pour toujours.',
        'Les traditions africaines offrent des histoires lunaires variées. Dans la mythologie bochimane, la Lune est un homme qui a irrité le Soleil, lequel l\'a découpé en morceaux, expliquant les phases.',
      ],
    },
  },
  {
    id: 'photography',
    emoji: '📸',
    title: {
      en: 'Moon Photography Guide',
      fr: 'Guide de photographie lunaire',
    },
    summary: {
      en: 'Essential tips and settings for capturing stunning moon photos.',
      fr: 'Conseils essentiels et réglages pour capturer de superbes photos de lune.',
    },
    content: {
      en: [
        'Photographing the Moon is one of the most rewarding challenges in astrophotography. With the right technique and equipment, even beginners can capture stunning lunar images.',
        '📷 Equipment: A DSLR or mirrorless camera with manual controls is ideal. A telephoto lens (200mm+) or telescope with adapter will reveal surface details. A sturdy tripod is essential to eliminate camera shake.',
        '⚙️ Camera Settings: Start with ISO 100-200, aperture f/8-f/11, and shutter speed 1/125 to 1/250 second. The "Looney 11 Rule" suggests using f/11 at 1/ISO speed (e.g., at ISO 100, use 1/100s at f/11).',
        '🎯 Focus: Use manual focus set to infinity, then fine-tune using Live View at maximum zoom on the Moon\'s edge. Look for sharp crater detail. Auto-focus often fails on the Moon.',
        '🌗 Best Phases: While the full moon is iconic, the best detail shows during quarter phases. The terminator line (shadow boundary) reveals dramatic crater shadows and mountain textures.',
        '🕐 Timing: Shoot the Moon when it\'s high in the sky for least atmospheric distortion. The "golden hour" Moon near the horizon appears large but is actually distorted and less sharp.',
        '📐 The Moon Illusion: The Moon near the horizon looks huge but is actually the same angular size (~0.5°). To capture this dramatic effect, use a long telephoto (600mm+) with foreground elements like buildings or trees.',
        '💻 Post-Processing: Stack multiple exposures using software like RegiStax or AutoStakkert for incredible detail. Apply gentle sharpening and adjust levels to bring out mare and crater details.',
      ],
      fr: [
        'Photographier la Lune est l\'un des défis les plus gratifiants en astrophotographie. Avec la bonne technique, même les débutants peuvent capturer de superbes images lunaires.',
        '📷 Équipement : Un appareil DSLR ou hybride avec contrôles manuels est idéal. Un téléobjectif (200mm+) ou télescope avec adaptateur révélera les détails de surface. Un trépied solide est essentiel.',
        '⚙️ Réglages : Commencez avec ISO 100-200, ouverture f/8-f/11, et vitesse 1/125 à 1/250s. La "règle Looney 11" suggère f/11 à 1/ISO (ex. ISO 100, vitesse 1/100s à f/11).',
        '🎯 Mise au point : Utilisez la mise au point manuelle sur l\'infini, puis affinez avec le Live View au zoom maximum sur le bord de la Lune. Cherchez des détails nets de cratères.',
        '🌗 Meilleures phases : Le premier ou dernier quartier révèle les meilleurs détails. La ligne du terminateur (limite d\'ombre) montre des ombres dramatiques de cratères et textures de montagnes.',
        '🕐 Timing : Photographiez la Lune quand elle est haute dans le ciel pour moins de distorsion atmosphérique. La Lune à l\'horizon paraît grande mais est déformée et moins nette.',
        '📐 L\'illusion lunaire : La Lune près de l\'horizon semble énorme mais a la même taille angulaire (~0,5°). Pour capturer cet effet, utilisez un long téléobjectif (600mm+) avec des éléments de premier plan.',
        '💻 Post-traitement : Empilez plusieurs expositions avec RegiStax ou AutoStakkert pour des détails incroyables. Appliquez un affûtage modéré et ajustez les niveaux pour révéler les mers et cratères.',
      ],
    },
  },
  {
    id: 'gardening',
    emoji: '🌿',
    title: {
      en: 'Moon Gardening: Planting by Lunar Cycles',
      fr: 'Jardinage lunaire : planter selon les cycles',
    },
    summary: {
      en: 'How farmers and gardeners have used the Moon to guide planting for centuries.',
      fr: 'Comment les jardiniers utilisent la Lune pour guider les plantations depuis des siècles.',
    },
    content: {
      en: [
        'Lunar gardening is an ancient practice based on the idea that the Moon\'s gravitational pull affects moisture in soil, just as it affects ocean tides. Many farmers and gardeners worldwide still follow lunar cycles for planting.',
        '🌑 New Moon (Days 1-7): Rising moisture. Best time to plant above-ground crops with external seeds: lettuce, spinach, celery, broccoli, cabbage, cauliflower, and grain crops.',
        '🌓 First Quarter (Days 8-14): Strong leaf growth. Plant above-ground crops with internal seeds: beans, peas, peppers, squash, tomatoes, melons. The gravitational pull creates more moisture.',
        '🌕 Full Moon (Days 15-21): Peak moisture, then decreasing. Ideal for planting root crops: beets, carrots, onions, potatoes, radishes. Also good for transplanting and propagation. Moonlight peaks, boosting growth.',
        '🌗 Last Quarter (Days 22-28): Resting period. Focus on maintenance: weeding, pruning, harvesting, composting. Sap flow decreases, making it perfect for cutting back and clearing.',
        '🌲 Moon Signs in the Zodiac: Traditional lunar gardeners also consider which zodiac sign the Moon occupies. Water signs (Cancer, Scorpio, Pisces) are considered most fertile. Earth signs (Taurus, Virgo, Capricorn) are productive. Fire and air signs are best for cultivation and harvesting.',
        '🔬 Scientific Perspective: While controlled studies have shown mixed results, some research suggests that lunar gravity does affect water table levels and plant germination. The practice connects us to natural rhythms regardless of the science.',
        '📋 Quick Guide: Plant leafy crops during waxing moon, root crops during waning moon, and rest during the fourth quarter. Keep a garden journal to track your results across lunar cycles!',
      ],
      fr: [
        'Le jardinage lunaire est une pratique ancestrale basée sur l\'idée que l\'attraction gravitationnelle de la Lune affecte l\'humidité du sol, comme elle affecte les marées. Beaucoup de jardiniers suivent encore les cycles lunaires.',
        '🌑 Nouvelle Lune (Jours 1-7) : Humidité montante. Meilleur moment pour planter les cultures aériennes à graines externes : laitue, épinard, céleri, brocoli, chou, chou-fleur et céréales.',
        '🌓 Premier Quartier (Jours 8-14) : Forte croissance foliaire. Planter les cultures aériennes à graines internes : haricots, pois, poivrons, courges, tomates, melons.',
        '🌕 Pleine Lune (Jours 15-21) : Pic d\'humidité puis décroissance. Idéal pour les légumes-racines : betteraves, carottes, oignons, pommes de terre, radis. Bon aussi pour transplanter.',
        '🌗 Dernier Quartier (Jours 22-28) : Période de repos. Se concentrer sur l\'entretien : désherbage, taille, récolte, compostage. Le flux de sève diminue.',
        '🌲 Signes lunaires du Zodiaque : Les jardiniers traditionnels considèrent aussi le signe zodiacal de la Lune. Les signes d\'eau (Cancer, Scorpion, Poissons) sont les plus fertiles.',
        '🔬 Perspective scientifique : Les études contrôlées montrent des résultats mitigés, mais certaines recherches suggèrent que la gravité lunaire affecte le niveau des nappes phréatiques.',
        '📋 Guide rapide : Plantez les cultures foliaires en lune croissante, les racines en lune décroissante, et reposez-vous au dernier quartier.',
      ],
    },
  },
  {
    id: 'eclipses',
    emoji: '🌑',
    title: {
      en: 'Lunar Eclipses: Blood Moons Explained',
      fr: 'Éclipses lunaires : les lunes de sang expliquées',
    },
    summary: {
      en: 'The science behind lunar eclipses and why the Moon turns red.',
      fr: 'La science derrière les éclipses lunaires et pourquoi la Lune rougit.',
    },
    content: {
      en: [
        'A lunar eclipse occurs when Earth passes between the Sun and Moon, casting its shadow on the lunar surface. Unlike solar eclipses, lunar eclipses are visible from anywhere on Earth\'s night side and are safe to watch with naked eyes.',
        '🔴 Why "Blood Moon"? During a total lunar eclipse, the Moon doesn\'t disappear — it turns a deep red. This happens because Earth\'s atmosphere bends (refracts) sunlight around the planet. Blue light is scattered away while red wavelengths pass through and illuminate the Moon.',
        '🌍 Types: Penumbral eclipses are subtle darkening. Partial eclipses show Earth\'s curved shadow. Total eclipses are the spectacular "blood moons" lasting up to 1 hour 42 minutes.',
        '📊 The Danjon Scale rates the darkness of lunar eclipses from L0 (very dark, nearly invisible) to L4 (bright copper-red with bluish edges). Atmospheric conditions like volcanic ash affect the rating.',
        '🔄 Saros Cycle: Lunar eclipses repeat in an 18-year, 11-day cycle called a Saros. Each Saros series produces 70-85 eclipses over about 1,300 years. Knowing the Saros helps predict future eclipses.',
        '📅 Frequency: On average, there are 2-3 lunar eclipses per year, but total lunar eclipses are rarer — about one every 2.5 years on average. A "tetrad" is four consecutive total eclipses without partial eclipses between them.',
        '🏛️ Historical Significance: Christopher Columbus used his knowledge of a 1504 lunar eclipse to convince Jamaican natives to provide supplies. Chinese and Babylonian astronomers tracked eclipses for predictive astronomy.',
        '🔭 Observing Tips: No special equipment needed! Binoculars enhance the red color beautifully. Photograph with settings similar to full moon photography but with longer exposures (1-4 seconds) during totality.',
      ],
      fr: [
        'Une éclipse lunaire se produit quand la Terre passe entre le Soleil et la Lune, projetant son ombre sur la surface lunaire. Contrairement aux éclipses solaires, elles sont visibles partout côté nuit et sans danger pour les yeux.',
        '🔴 Pourquoi "Lune de sang" ? Pendant une éclipse totale, la Lune ne disparaît pas — elle devient rouge profond. L\'atmosphère terrestre dévie la lumière, diffusant le bleu et laissant passer le rouge qui illumine la Lune.',
        '🌍 Types : Les éclipses pénombrales sont subtiles. Les partielles montrent l\'ombre courbe de la Terre. Les totales sont les spectaculaires "lunes de sang" durant jusqu\'à 1h42.',
        '📊 L\'échelle de Danjon évalue l\'obscurité des éclipses de L0 (très sombre) à L4 (cuivre brillant avec bords bleutés). Les conditions atmosphériques comme les cendres volcaniques affectent la notation.',
        '🔄 Cycle de Saros : Les éclipses se répètent dans un cycle de 18 ans et 11 jours appelé Saros. Chaque série produit 70-85 éclipses sur environ 1 300 ans.',
        '📅 Fréquence : En moyenne 2-3 éclipses lunaires par an, mais les totales sont plus rares — environ une tous les 2,5 ans. Une "tétrade" est quatre éclipses totales consécutives.',
        '🏛️ Importance historique : Christophe Colomb utilisa sa connaissance d\'une éclipse de 1504 pour convaincre les Jamaïcains de fournir des provisions. Les astronomes chinois et babyloniens suivaient les éclipses.',
        '🔭 Conseils d\'observation : Aucun équipement spécial nécessaire ! Les jumelles magnifient la couleur rouge. Photographiez avec des expositions plus longues (1-4s) pendant la totalité.',
      ],
    },
  },
  {
    id: 'seo2026',
    emoji: '📅',
    title: {
      en: 'Moon Searches 2026: Dates, Times and Eclipse Queries',
      fr: 'Recherches lune 2026 : dates, heures et éclipse lunaire',
    },
    summary: {
      en: 'Quick answers to common searches: full moon March 2026, blood moon time, next full moon, and weekly lunar planning.',
      fr: 'Réponses rapides aux recherches fréquentes : pleine lune mars 2026, heure de la lune rouge, prochaine pleine lune et planning hebdo.',
    },
    content: {
      en: [
        'People often search for: full moon eclipse, full moon March 2026, blood moon 2026, lunar eclipse 2026, next full moon, and what time the red moon appears. This page groups all these intents in one place with updated lunar calculations.',
        'Use the lunar calendar to check exact full moon dates and local time. Use the simulator for moon appearance on a specific day, and the visibility map to know where an eclipse can be observed.',
      ],
      fr: [
        'Requêtes fréquentes traitées sur cette page : pleine lune eclipse lunaire, pleine lune mars 2026, lune rouge 3 mars, lune rouge, pleine lune, eclipse lunaire 2026, lune de sang, lune rouge 3 mars heure, pleine lune 3 mars 2026, lune de sang 2026, eclipse lunaire 3 mars 2026, lune, pleine lune mars, pleine lune 2026, lune de sang 3 mars, a quelle heure la lune de sang, date pleine lune mars 2026, lune 3 mars 2026, lune rouge 3 mars 2026 heure, la lune rouge, lune rouge heure, prochaine pleine lune, horoscope, semaine 2026.',
        'Important : les heures d\'éclipse et de pleine lune dépendent de la ville et du fuseau horaire. Le simulateur et le calendrier donnent la conversion locale pour vérifier rapidement la bonne heure.',
        'Pour les recherches type horoscope et semaine 2026, nous proposons une lecture lunaire hebdomadaire basée sur les phases (nouvelle lune, premier quartier, pleine lune, dernier quartier).',
      ],
    },
  },
];

export default function Articles() {
  const { locale } = useLocale();
  const lang = (locale === 'fr') ? 'fr' : 'en';
  const [openArticle, setOpenArticle] = useState<string | null>(null);

  return (
    <section id="articles" aria-label="Articles about the Moon" className="section-container">
      <div className="text-center mb-10">
        <h2 className="section-title">{ts('articles_title', locale)}</h2>
        <p className="section-subtitle mx-auto">{ts('articles_subtitle', locale)}</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 max-w-5xl mx-auto">
        {ARTICLES.map((article) => (
          <div key={article.id} className="glass-card p-4 sm:p-6">
            <div className="flex items-start gap-4 mb-4">
              <span className="text-4xl">{article.emoji}</span>
              <div className="flex-1">
                <h3 className="text-xl font-bold mb-2">{article.title[lang] || article.title.en}</h3>
                <p className="text-white/50 text-sm">{article.summary[lang] || article.summary.en}</p>
              </div>
            </div>

            {openArticle === article.id ? (
              <>
                <div className="space-y-4 mt-6 pt-6 border-t border-white/10">
                  {(article.content[lang] || article.content.en).map((para, i) => (
                    <p key={i} className="text-white/70 text-sm leading-relaxed">{para}</p>
                  ))}
                </div>
                <button
                  onClick={() => setOpenArticle(null)}
                  className="mt-6 text-indigo-300 hover:text-indigo-200 text-sm font-medium"
                >
                  ← {locale === 'fr' ? 'Réduire' : 'Collapse'}
                </button>
              </>
            ) : (
              <button
                onClick={() => setOpenArticle(article.id)}
                className="glow-btn mt-4 text-sm px-6 py-2"
              >
                {ts('articles_read', locale)}
              </button>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}