import React, { useState, useMemo, useEffect } from 'react';
import { Search, Calendar as CalendarIcon, ChevronRight, ArrowLeft, Info, CheckCircle2, Thermometer, Snowflake, MapPin } from 'lucide-react';

// Generic tips fallback
const defaultDicas = {
  escolher: 'Prefira frutos com cor vibrante, sem machucados, partes moles ou furos na casca. O aroma deve ser agradável.',
  conservar: 'Mantenha em local fresco e arejado. Após maduro ou cortado, conserve na geladeira em recipiente fechado.',
  congelar: 'Sim. Lave, descasque, pique e guarde em potes ou sacos próprios para freezer por até 3 meses.',
  origens: 'Produção distribuída por diversas regiões do território nacional.'
};

const fruitData = [
  { name: 'Abacate', months: [2, 1, 1, 1, 1, 2, 2, 0, 0, 0, 0, 2], 
    escolher: 'A casca deve ceder levemente ao toque suave. Evite frutos muito moles ou com manchas escuras fundas.', 
    conservar: 'Se estiver verde, deixe em temperatura ambiente. Quando amadurecer, guarde na geladeira para não estragar.' },
  { name: 'Abacaxi', months: [1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1],
    escolher: 'As folhas da coroa devem soltar com facilidade ao puxar. O aroma na base deve ser doce.',
    conservar: 'Deixe fora da geladeira até o momento de fatiar. Depois de cortado, mantenha na geladeira em pote fechado.' },
  { name: 'Açaí', months: [1, 1, 1, 1, 1, 2, 2, 0, 0, 0, 0, 2], ...defaultDicas },
  { name: 'Ameixa', months: [1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1],
    escolher: 'Prefira as com casca lisa, sem rugas, e que cedam levemente à pressão.',
    conservar: 'Guarde na geladeira (gaveta inferior) para prolongar a vida útil. Lave apenas antes de comer.' },
  { name: 'Atemóia', months: [0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 0, 0],
    escolher: 'Os "gomos" da casca devem estar ligeiramente afastados. Fruto deve ceder um pouco ao toque.',
    conservar: 'Amadurece rápido fora da geladeira. Consuma logo após madura ou refrigere por no máximo 2 dias.' },
  { name: 'Banana', months: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    escolher: 'Para consumo imediato, escolha cascas amarelas com pintinhas marrons. Para durar mais, pontas esverdeadas.',
    conservar: 'Sempre fora da geladeira, em local fresco. A geladeira deixa a casca preta e altera o sabor.' },
  { name: 'Caju', months: [1, 1, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1],
    escolher: 'Cor viva (amarelo ou vermelho), firme e sem manchas escuras ou partes machucadas.',
    conservar: 'É muito perecível. Guarde na geladeira e consuma em até 2 dias úteis.' },
  { name: 'Caqui', months: [0, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
    escolher: 'A casca deve estar intacta. O tipo Rama Forte é bem mole quando maduro, o Fuyu deve ser firme como maçã.',
    conservar: 'Na geladeira duram bastante tempo. Retire um pouco antes de comer se preferir menos gelado.' },
  { name: 'Carambola', months: [1, 1, 2, 2, 0, 0, 2, 1, 1, 0, 0, 2],
    escolher: 'Cor amarela brilhante para consumo imediato. Bordas ligeiramente escurecidas são normais.',
    conservar: 'Deixe em temperatura ambiente até amarelar por completo, depois transfira para a geladeira.' },
  { name: 'Cereja', months: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], ...defaultDicas },
  { name: 'Coco', months: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    escolher: 'Sacuda o coco verde para ouvir a água (quanto mais, melhor). Coco seco deve ser pesado para o tamanho.',
    conservar: 'O verde pode ficar fora da geladeira até abrir. Depois de aberto, consuma a água no mesmo dia.' },
  { name: 'Cupuaçu', months: [1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 2, 1], ...defaultDicas },
  { name: 'Figo', months: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 2, 1],
    escolher: 'Frutos macios e gordinhos. Evite os que estiverem soltando líquido ou cheirando a fermentado.',
    conservar: 'Altamente perecível. Guarde imediatamente na geladeira forrado com papel toalha e consuma em 2 dias.' },
  { name: 'Goiaba', months: [1, 1, 1, 2, 2, 0, 0, 0, 0, 2, 1, 1],
    escolher: 'Deve ter um aroma forte e doce, e ceder levemente à pressão dos dedos.',
    conservar: 'Deixe na fruteira até amadurecer. Depois, guarde na geladeira para durar mais uns dias.' },
  { name: 'Graviola', months: [1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 2, 1], ...defaultDicas },
  { name: 'Jabuticaba', months: [0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 2, 0],
    escolher: 'Casca brilhante, lisa e cor preta intensa. Frutos murchos já estão passados.',
    conservar: 'Lave e guarde na geladeira em pote fechado. Consuma rápido pois fermenta facilmente.' },
  { name: 'Jaca', months: [1, 1, 2, 0, 0, 0, 0, 0, 0, 2, 1, 1], ...defaultDicas },
  { name: 'Kiwi', months: [0, 0, 0, 1, 1, 1, 1, 2, 0, 0, 0, 0],
    escolher: 'Pressione delicadamente; deve ceder um pouco. Muito duro significa verde; muito mole, passado.',
    conservar: 'Se estiver duro, deixe perto de maçãs ou bananas fora da geladeira. Maduro, mantenha refrigerado.' },
  { name: 'Laranja', months: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    escolher: 'Casca lisa e fina, pesado para o próprio tamanho (indica mais suco). Cor não é sinal definitivo de doçura.',
    conservar: 'Pode ficar em local fresco por até uma semana, ou na gaveta da geladeira por até um mês.' },
  { name: 'Limão', months: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    escolher: 'Semelhante à laranja: casca lisa, macia ao toque leve e frutos pesados rendem mais suco.',
    conservar: 'Duram bem fora da geladeira, mas na parte de baixo da geladeira podem durar semanas.' },
  { name: 'Maçã', months: [2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2],
    escolher: 'Firme ao toque, sem partes amassadas ou escuras na casca.',
    conservar: 'Guarde na geladeira para manter a crocância por semanas. Fora dela, ficam "farinhentas" mais rápido.' },
  { name: 'Mamão', months: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    escolher: 'Casca predominantemente amarela, macio ao toque (sem afundar o dedo).',
    conservar: 'Amadurece fora da geladeira enrolado em jornal. Depois de maduro ou cortado, refrigere imediatamente.' },
  { name: 'Manga', months: [1, 1, 1, 2, 2, 0, 0, 0, 2, 1, 1, 1],
    escolher: 'Confie no aroma doce próximo ao cabinho e se cede levemente ao toque. Cor não define maturação.',
    conservar: 'Deixe na fruteira até amadurecer. Só guarde na geladeira se já estiver no ponto de comer.' },
  { name: 'Maracujá', months: [1, 1, 1, 2, 2, 0, 0, 2, 1, 1, 1, 1],
    escolher: 'Casca enrugada significa que está mais doce e pronto. Escolha os mais pesados (mais polpa).',
    conservar: 'Pode ser conservado fora da geladeira. Para longa duração, você pode congelar a polpa.' },
  { name: 'Melancia', months: [1, 1, 1, 2, 0, 0, 0, 0, 2, 1, 1, 1],
    escolher: 'Faça o teste do som: batendo nela, deve soar oco. Procure a mancha amarela (onde ficou no chão).',
    conservar: 'Inteira, mantenha em local arejado. Após cortada, cubra com plástico filme e guarde na geladeira.' },
  { name: 'Melão', months: [1, 1, 2, 0, 0, 0, 0, 2, 1, 1, 1, 1],
    escolher: 'Pressione as extremidades; devem ceder um pouco. Aroma doce é um bom indicador.',
    conservar: 'Inteiro e ainda firme, fora da geladeira. Maduro e/ou cortado, sempre na geladeira.' },
  { name: 'Morango', months: [0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 0, 0],
    escolher: 'Vermelhos por inteiro (não amadurecem depois de colhidos), sem machucados e com folhas verdes vivas.',
    conservar: 'Na geladeira, em recipiente forrado com papel toalha. NÃO LAVE antes de guardar, apenas na hora de comer.' },
  { name: 'Pera', months: [1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 2, 1],
    escolher: 'Pressione levemente perto do cabinho; se ceder, está madura.',
    conservar: 'Deixe amadurecer fora da geladeira. Após madura, mantenha refrigerada.' },
  { name: 'Pêssego', months: [1, 2, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1],
    escolher: 'O fundo (perto do cabinho) deve ser amarelo-creme, não verde. Aroma floral suave.',
    conservar: 'Fora da geladeira até ceder ao toque, depois guarde refrigerado por até 5 dias.' },
  { name: 'Pitanga', months: [1, 2, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1], ...defaultDicas },
  { name: 'Tangerina', months: [0, 0, 0, 1, 1, 1, 1, 1, 2, 0, 0, 0],
    escolher: 'Casca brilhante, cores fortes e peso na mão indicam frescor e bastante caldo.',
    conservar: 'Podem ficar na fruteira por alguns dias, ou na geladeira para durarem mais.' },
  { name: 'Uva', months: [1, 1, 1, 2, 0, 0, 0, 0, 0, 2, 1, 1],
    escolher: 'Cachos volumosos, bagos firmes presos ao cabinho (que deve estar verde e flexível, não seco).',
    conservar: 'Lave apenas antes de consumir. Guarde na geladeira (gaveta inferior) em saco plástico perfurado.' }
];

const monthsList = [
  'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
  'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
];

const carouselImages = [
  { src: 'source/image-FoXdY66Uv3PIaVmcBkfBsiUMT0c9pT_2.png', alt: 'Papaya' },
  { src: 'source/image-eUUCVNutiSX3Na8qdSelnsTlKye5Ad_2.png', alt: 'Rambutan' },
  { src: 'source/image-id2bjNWhceyyEfRKFC99ipUcMSqfio_2.png', alt: 'Orange' },
  { src: 'source/image-t5ETcqgAlGBJHRCOgcNg9OPMX4FznF_2.png', alt: 'Watermelon' },
  { src: 'source/image-8LTO6JuYdFznf0sQdNCzGaekZn9rQ4.png', alt: 'Lemon Slice' },
  { src: 'source/image-Z0XqvzJFfoxD7OLa7twGAmDQYnyTtl.png', alt: 'Apricot/Peach' }
];

export default function App() {
  const [currentView, setCurrentView] = useState('home'); // 'home', 'monthView', 'fruitDetail'
  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedFruit, setSelectedFruit] = useState(null);
  
  // State for image carousel on Home
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useEffect(() => {
    if (currentView === 'home') {
      const interval = setInterval(() => {
        setCurrentImageIndex((prev) => (prev + 1) % carouselImages.length);
      }, 3500); // Change image every 3.5 seconds
      return () => clearInterval(interval);
    }
  }, [currentView]);

  const currentMonthName = monthsList[selectedMonth];

  // Fruits for the currently selected month
  const highSeasonFruits = useMemo(() => 
    fruitData.filter(f => f.months[selectedMonth] === 1).sort((a, b) => a.name.localeCompare(b.name)),
  [selectedMonth]);

  const mediumSeasonFruits = useMemo(() => 
    fruitData.filter(f => f.months[selectedMonth] === 2).sort((a, b) => a.name.localeCompare(b.name)),
  [selectedMonth]);

  // Search results
  const searchResults = useMemo(() => {
    if (!searchQuery.trim()) return [];
    const query = searchQuery.toLowerCase();
    return fruitData.filter(f => f.name.toLowerCase().includes(query)).sort((a, b) => a.name.localeCompare(b.name));
  }, [searchQuery]);

  const handleMonthSelect = (monthIndex) => {
    setSelectedMonth(monthIndex);
    setCurrentView('monthView');
    setSearchQuery('');
  };

  const handleFruitSelect = (fruit) => {
    setSelectedFruit(fruit);
    setCurrentView('fruitDetail');
  };

  const goHome = () => {
    setCurrentView('home');
    setSearchQuery('');
  };

  const goBack = () => {
    if (currentView === 'fruitDetail') {
      setCurrentView(searchQuery ? 'home' : 'monthView');
    } else {
      goHome();
    }
  };

  const Header = () => (
    <header className="sticky top-0 z-10 bg-white/90 backdrop-blur-md border-b border-gray-200 px-4 py-4 flex items-center justify-between shadow-sm">
      <div className="flex items-center gap-3">
        {currentView !== 'home' && (
          <button onClick={goBack} className="p-2 -ml-2 rounded-full hover:bg-gray-100 transition-colors">
            <ArrowLeft className="w-5 h-5 text-gray-800" />
          </button>
        )}
        <div className="flex items-center gap-2 cursor-pointer" onClick={goHome}>
          {/* Replaced Apple with Lemon Tree Image */}
          <div className="w-9 h-9 overflow-hidden flex items-center justify-center -ml-1">
             <img 
               src="source/image-onw0Slcvahf7w8gHkFiE3oNlui98Iq_2.png" 
               alt="Lemon Tree Logo" 
               className="w-full h-full object-contain drop-shadow-sm"
             />
          </div>
          <h1 className="text-xl font-semibold text-gray-900 tracking-tight">Safra</h1>
        </div>
      </div>
    </header>
  );

  const renderHome = () => (
    <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
      
      <section className="px-4 pt-8 pb-6">
        
        {/* Animated Carousel & Title Row */}
        <div className="flex justify-between items-start mb-6">
          <div className="flex-1 pr-2">
            <h2 className="text-3xl font-light text-gray-900 mb-2 leading-tight">O que está<br/>na época?</h2>
            <p className="text-gray-500 text-sm font-light">Descubra as melhores frutas para consumir hoje.</p>
          </div>
          
          {/* The 3D Image Carousel */}
          <div className="w-24 h-24 rounded-2xl bg-gray-50 border border-gray-100 shadow-sm flex items-center justify-center relative overflow-hidden shrink-0 mt-1">
             {carouselImages.map((img, index) => (
                <img
                  key={img.src}
                  src={img.src}
                  alt={img.alt}
                  className={`absolute w-20 h-20 object-contain transition-all duration-1000 ease-out transform
                    ${index === currentImageIndex 
                      ? 'opacity-100 scale-100 rotate-0 z-10' 
                      : 'opacity-0 scale-95 rotate-12 z-0'
                    }
                  `}
                />
             ))}
          </div>
        </div>
        
        {/* Search Input */}
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            type="text"
            className="block w-full pl-10 pr-3 py-4 border border-gray-200 rounded-2xl leading-5 bg-gray-50 placeholder-gray-400 focus:outline-none focus:bg-white focus:ring-1 focus:ring-gray-900 focus:border-gray-900 transition-all sm:text-sm"
            placeholder="Buscar por fruta..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
      </section>

      {/* Search Results */}
      {searchQuery && (
        <section className="px-4 py-4">
          <h3 className="text-sm font-medium text-gray-500 mb-4 uppercase tracking-wider ml-1">Resultados da busca</h3>
          {searchResults.length > 0 ? (
            <div className="space-y-2">
              {searchResults.map(fruit => (
                <button
                  key={fruit.name}
                  onClick={() => handleFruitSelect(fruit)}
                  className="w-full flex items-center justify-between p-4 bg-white border border-gray-100 rounded-xl hover:border-gray-300 hover:shadow-sm transition-all text-left group"
                >
                  <span className="font-medium text-gray-900 group-hover:translate-x-1 transition-transform">{fruit.name}</span>
                  <ChevronRight className="w-5 h-5 text-gray-300 group-hover:text-gray-900 transition-colors" />
                </button>
              ))}
            </div>
          ) : (
            <div className="text-center py-10 bg-gray-50 border border-gray-100 rounded-2xl text-gray-500">
              Nenhuma fruta encontrada.
            </div>
          )}
        </section>
      )}

      {/* Quick Month Selector */}
      {!searchQuery && (
        <section className="px-4 py-6">
          <div className="flex items-center justify-between mb-4 ml-1">
            <h3 className="text-lg font-medium text-gray-900">Navegar por Mês</h3>
            <CalendarIcon className="w-5 h-5 text-gray-300" />
          </div>
          <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
            {monthsList.map((month, index) => (
              <button
                key={month}
                onClick={() => handleMonthSelect(index)}
                className={`
                  p-3 rounded-xl border text-sm font-medium transition-all
                  ${index === new Date().getMonth() 
                    ? 'bg-gray-900 text-white border-gray-900 shadow-md ring-2 ring-gray-900/20' 
                    : 'bg-white text-gray-700 border-gray-200 hover:border-gray-400 hover:bg-gray-50'}
                `}
              >
                {month.substring(0, 3)}
              </button>
            ))}
          </div>
        </section>
      )}

      {/* Current Month Highlight (if not searching) */}
      {!searchQuery && (
        <section className="px-4 py-6 mb-8">
          <div className="p-6 bg-gray-50 rounded-2xl border border-gray-100 relative overflow-hidden">
            <h3 className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2 relative z-10">
              Destaque de {monthsList[new Date().getMonth()]}
            </h3>
            <p className="text-gray-900 text-sm mb-5 relative z-10 leading-relaxed">
              Veja as frutas que estão com a melhor qualidade e preço neste momento.
            </p>
            <button 
              onClick={() => handleMonthSelect(new Date().getMonth())}
              className="w-full py-3 px-4 bg-white border border-gray-200 shadow-sm rounded-xl text-gray-900 font-medium hover:bg-gray-100 hover:border-gray-300 transition-colors flex justify-center items-center gap-2 relative z-10"
            >
              Ver safra atual
              <ArrowLeft className="w-4 h-4 rotate-180" />
            </button>
          </div>
        </section>
      )}
    </div>
  );

  const renderMonthView = () => (
    <div className="animate-in fade-in slide-in-from-right-8 duration-300 pb-12">
      <div className="px-4 pt-8 pb-6 border-b border-gray-100 bg-white">
        <h2 className="text-3xl font-light text-gray-900 capitalize">{currentMonthName}</h2>
        <p className="text-gray-500 mt-2 font-light">Guia de safra para este mês.</p>
      </div>

      <div className="px-4 py-8 space-y-10">
        {/* High Season */}
        <div>
          <div className="flex items-center gap-2 mb-2">
            <div className="w-2 h-2 rounded-full bg-gray-900 shadow-sm"></div>
            <h3 className="text-lg font-medium text-gray-900">Alta Safra</h3>
          </div>
          <p className="text-sm text-gray-500 mb-5 ml-4 leading-relaxed">Melhor época para consumo. Maior oferta, qualidade e melhores preços.</p>
          
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {highSeasonFruits.map(fruit => (
              <button
                key={fruit.name}
                onClick={() => handleFruitSelect(fruit)}
                className="p-4 bg-white border border-gray-200 rounded-xl flex flex-col items-center justify-center gap-2 hover:border-gray-900 hover:shadow-md transition-all group"
              >
                <span className="font-medium text-gray-900 text-center group-hover:scale-105 transition-transform">{fruit.name}</span>
              </button>
            ))}
            {highSeasonFruits.length === 0 && (
              <div className="col-span-full p-6 text-center text-gray-400 bg-gray-50 rounded-xl border border-dashed border-gray-200">Sem dados de alta safra.</div>
            )}
          </div>
        </div>

        {/* Medium Season */}
        <div>
          <div className="flex items-center gap-2 mb-2">
            <div className="w-2 h-2 rounded-full bg-gray-300"></div>
            <h3 className="text-lg font-medium text-gray-900">Média Safra</h3>
          </div>
          <p className="text-sm text-gray-500 mb-5 ml-4 leading-relaxed">Boa oferta, mas pode não estar no pico de qualidade ou menor preço.</p>
          
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {mediumSeasonFruits.map(fruit => (
              <button
                key={fruit.name}
                onClick={() => handleFruitSelect(fruit)}
                className="p-3 bg-gray-50 border border-gray-100 rounded-xl flex flex-col items-center justify-center hover:bg-white hover:border-gray-300 hover:shadow-sm transition-all"
              >
                <span className="text-sm font-medium text-gray-600 text-center">{fruit.name}</span>
              </button>
            ))}
             {mediumSeasonFruits.length === 0 && (
              <div className="col-span-full p-6 text-center text-gray-400 bg-gray-50 rounded-xl border border-dashed border-gray-200">Sem dados de média safra.</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );

  const renderFruitDetail = () => {
    if (!selectedFruit) return null;

    // Use specific tips or fallback to default
    const escolherText = selectedFruit.escolher || defaultDicas.escolher;
    const conservarText = selectedFruit.conservar || defaultDicas.conservar;
    const congelarText = selectedFruit.congelar || defaultDicas.congelar;
    const origensText = selectedFruit.origens || defaultDicas.origens;

    return (
      <div className="animate-in fade-in slide-in-from-right-8 duration-300 pb-12">
        <div className="px-4 pt-10 pb-8 bg-gray-50 border-b border-gray-200 flex flex-col items-center text-center">
          <div className="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-sm mb-4 border border-gray-100">
            <span className="text-4xl text-gray-900">
              {/* Fallback to first letter */}
              {selectedFruit.name.charAt(0)}
            </span>
          </div>
          <h2 className="text-3xl font-semibold text-gray-900">{selectedFruit.name}</h2>
        </div>

        {/* Dicas Section - Compact Horizontal Cards */}
        <div className="px-4 pt-6 space-y-3">
           <div className="bg-white border border-gray-100 rounded-xl p-4 shadow-sm flex gap-3 items-start">
              <CheckCircle2 className="w-5 h-5 text-gray-800 shrink-0 mt-0.5"/>
              <div>
                  <h4 className="font-semibold text-gray-900 text-sm mb-1">Como escolher</h4>
                  <p className="text-gray-600 text-xs leading-relaxed">{escolherText}</p>
              </div>
           </div>

           <div className="bg-white border border-gray-100 rounded-xl p-4 shadow-sm flex gap-3 items-start">
              <Thermometer className="w-5 h-5 text-gray-800 shrink-0 mt-0.5"/>
              <div>
                  <h4 className="font-semibold text-gray-900 text-sm mb-1">Conservação doméstica</h4>
                  <p className="text-gray-600 text-xs leading-relaxed">{conservarText}</p>
              </div>
           </div>

           <div className="bg-white border border-gray-100 rounded-xl p-4 shadow-sm flex gap-3 items-start">
              <Snowflake className="w-5 h-5 text-gray-800 shrink-0 mt-0.5"/>
              <div>
                  <h4 className="font-semibold text-gray-900 text-sm mb-1">Pode congelar?</h4>
                  <p className="text-gray-600 text-xs leading-relaxed">{congelarText}</p>
              </div>
           </div>

           <div className="bg-white border border-gray-100 rounded-xl p-4 shadow-sm flex gap-3 items-start">
              <MapPin className="w-5 h-5 text-gray-800 shrink-0 mt-0.5"/>
              <div>
                  <h4 className="font-semibold text-gray-900 text-sm mb-1">Principais origens no Brasil</h4>
                  <p className="text-gray-600 text-xs leading-relaxed">{origensText}</p>
              </div>
           </div>
        </div>

        {/* Compact Calendar Section - 6x2 Grid */}
        <div className="px-4 pt-8">
          <h3 className="text-sm font-medium text-gray-900 mb-3 ml-1 uppercase tracking-wider">Safra Anual</h3>
          
          <div className="grid grid-cols-6 gap-1.5">
            {monthsList.map((month, index) => {
              const status = selectedFruit.months[index];
              let statusColor = 'bg-gray-50 border border-gray-200 text-gray-400';

              if (status === 1) {
                statusColor = 'bg-gray-900 border-transparent text-white shadow-sm';
              } else if (status === 2) {
                statusColor = 'bg-gray-300 border-transparent text-gray-800';
              }

              return (
                <div 
                  key={month} 
                  className={`py-2 flex items-center justify-center rounded-lg transition-all ${statusColor}`}
                >
                  <span className="text-[10px] font-bold uppercase tracking-tighter">
                    {month.substring(0, 3)}
                  </span>
                </div>
              );
            })}
          </div>

          {/* Ultra-compact Legend */}
          <div className="flex justify-between items-center mt-3 px-1 text-[10px] font-medium text-gray-500 uppercase tracking-wide">
            <div className="flex items-center gap-1.5"><div className="w-2 h-2 bg-gray-900 rounded-full"></div> Alta</div>
            <div className="flex items-center gap-1.5"><div className="w-2 h-2 bg-gray-300 rounded-full"></div> Média</div>
            <div className="flex items-center gap-1.5"><div className="w-2 h-2 bg-gray-50 border border-gray-200 rounded-full"></div> Baixa</div>
          </div>
        </div>

        {/* General Disclaimer */}
        <div className="px-4 pt-8 pb-8">
           <div className="p-4 bg-gray-50 rounded-xl flex gap-3 items-start border border-gray-100">
              <Info className="w-4 h-4 text-gray-400 shrink-0 mt-0.5" />
              <p className="text-[11px] text-gray-500 leading-relaxed font-medium">
                A sazonalidade pode variar dependendo da região do Brasil e fatores climáticos anuais.
              </p>
           </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gray-100 font-sans text-gray-900 selection:bg-gray-200 flex justify-center">
      <div className="w-full max-w-md min-h-screen flex flex-col bg-white shadow-2xl relative overflow-hidden">
        <Header />
        
        <main className="flex-1 overflow-y-auto scroll-smooth">
          {currentView === 'home' && renderHome()}
          {currentView === 'monthView' && renderMonthView()}
          {currentView === 'fruitDetail' && renderFruitDetail()}
        </main>
      </div>
    </div>
  );
}