import React, { useState, useCallback, useMemo, useEffect, useRef, RefObject } from 'react';
import ReactDOM from 'react-dom/client';
import { Map, Cpu, Award, Heart, Share2, CheckCircle, ChevronLeft, ChevronRight, BarChart2, X, Instagram, Linkedin } from 'lucide-react';

// --- Type/Interface Definitions (from all files) ---
interface FlipCardProps {
  icon: React.ReactNode;
  frontTitle: string;
  backTitle: string;
  backText: string;
}

interface ImageLightboxProps {
  images: string[];
  currentIndex: number;
  originRect: DOMRect;
  onClose: () => void;
  onNext: () => void;
  onPrev: () => void;
}

interface PortfolioItem {
  title: string;
  folder: string;
  images: string[];
  tooltip: string | null;
}

interface PortfolioCardProps {
  item: PortfolioItem;
  onImageClick: (item: PortfolioItem, imageIndex: number, element: HTMLImageElement) => void;
  isChecked: boolean;
  onToggle: (title: string) => void;
}

interface FooterProps {
  onOpenModal: () => void;
  isFormValid: boolean;
}

interface ContactModalProps {
  isOpen: boolean;
  onClose: () => void;
  contactData: {
    name: string;
    email: string;
    phone: string;
    role: string;
    school: string;
  };
  onContactDataChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSubmit: () => void;
}

interface LightboxState {
  images: string[];
  currentIndex: number;
  originElement: HTMLElement;
}

// Props for state-lifted components
interface ProblemSectionProps {
  rankings: Record<string, string>;
  setRankings: React.Dispatch<React.SetStateAction<Record<string, string>>>;
  openChallenge: string;
  setOpenChallenge: (value: string) => void;
}

interface PortfolioSectionProps {
  selectedItems: Record<string, boolean>;
  onToggleItem: (title: string) => void;
  onToggleSelectAll: () => void;
  onDeselectAll: () => void;
  portfolioItemTitles: string[];
}

interface BenefitsSectionProps {
  selectedBenefits: Record<string, boolean>;
  onToggleBenefit: (id: string) => void;
}

interface SimulatorSectionProps {
  totalAlunos: string;
  setTotalAlunos: (value: string) => void;
  metaConversao: number;
  setMetaConversao: (value: number) => void;
  frequenciaSemanal: number;
  setFrequenciaSemanal: (value: number) => void;
  mensalidadeCurricular: string;
  setMensalidadeCurricular: (value: string) => void;
  selectedModel: string;
  onSelectModel: (model: string) => void;
}


// --- Hooks (from hooks/useFadeIn.ts) ---
const useFadeIn = <T extends HTMLElement,>(): [RefObject<T>, boolean] => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef<T>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          if (ref.current) {
            observer.unobserve(ref.current);
          }
        }
      },
      {
        threshold: 0.1,
      }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        observer.unobserve(ref.current);
      }
    };
  }, []);

  return [ref, isVisible];
};


// --- Common Components (from components/common/*) ---

const FlipCard: React.FC<FlipCardProps> = ({ icon, frontTitle, backTitle, backText }) => {
  return (
    <div className="group h-80 [perspective:1000px]">
      <div className="relative h-full w-full rounded-2xl shadow-md transition-all duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
        {/* Front */}
        <div className="absolute inset-0 bg-white rounded-2xl [backface-visibility:hidden] flex flex-col items-center justify-center text-center p-8">
          <div className="mb-4">{icon}</div>
          <h4 className="font-raleway text-2xl text-text-main">{frontTitle}</h4>
        </div>
        {/* Back */}
        <div className="absolute inset-0 bg-accent-blue rounded-2xl [backface-visibility:hidden] [transform:rotateY(180deg)] flex flex-col items-center justify-center text-center p-8">
          <h4 className="font-raleway text-xl mb-2 text-text-main">{backTitle}</h4>
          <p className="text-base text-gray-800">{backText}</p>
        </div>
      </div>
    </div>
  );
};

const ImageLightbox: React.FC<ImageLightboxProps> = ({ images, currentIndex, originRect, onClose, onNext, onPrev }) => {
  const [isAnimating, setIsAnimating] = useState(false);
  const [isClosing, setIsClosing] = useState(false);
  const imageUrl = images[currentIndex];

  const handleClose = useCallback(() => {
    setIsClosing(true);
    const timer = setTimeout(() => {
      onClose();
    }, 300); // This duration must match the CSS transition duration
    return () => clearTimeout(timer);
  }, [onClose]);

  // Effect to handle keyboard keys
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') handleClose();
      if (images.length > 1) {
        if (e.key === 'ArrowRight') onNext();
        if (e.key === 'ArrowLeft') onPrev();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [handleClose, onNext, onPrev, images.length]);

  // Effect to trigger the opening animation
  useEffect(() => {
    const timer = setTimeout(() => setIsAnimating(true), 10);
    return () => clearTimeout(timer);
  }, []);

  // Style for the animating container
  const containerStyle: React.CSSProperties = {
    position: 'fixed',
    transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)',
    zIndex: 60,
    top: `${originRect.top}px`,
    left: `${originRect.left}px`,
    width: `${originRect.width}px`,
    height: `${originRect.height}px`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: 'transparent',
    boxShadow: 'none',
    borderRadius: 0,
    padding: 0,
  };

  if (isAnimating && !isClosing) {
    containerStyle.top = '50%';
    containerStyle.left = '50%';
    containerStyle.width = 'auto';
    containerStyle.height = 'auto';
    containerStyle.transform = 'translate(-50%, -50%)';
    containerStyle.background = 'transparent';
    containerStyle.boxShadow = 'none';
    containerStyle.borderRadius = 0;
    containerStyle.padding = 0;
  }

  return (
    <div
      style={{
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        zIndex: 60,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'transparent',
      }}
      role="dialog"
      aria-modal="true"
    >
      <div
        style={{
          position: 'relative',
          background: 'white',
          borderRadius: '16px',
          boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)',
          padding: '20px',
          maxWidth: '90vw',
          maxHeight: '90vh',
          overflow: 'auto',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img
          src={imageUrl}
          alt="Imagem ampliada"
          style={{
            maxWidth: '100%',
            maxHeight: '80vh',
            width: 'auto',
            height: 'auto',
            display: 'block',
            borderRadius: '8px',
            margin: 'auto',
          }}
        />
        {images.length > 1 && (
          <>
            <button
              onClick={onPrev}
              style={{
                position: 'absolute',
                left: '10px',
                top: '50%',
                transform: 'translateY(-50%)',
                background: 'rgba(255,255,255,0.7)',
                borderRadius: '50%',
                padding: '8px',
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                cursor: 'pointer',
              }}
              aria-label="Imagem Anterior"
            >
              <ChevronLeft size={28} />
            </button>
            <button
              onClick={onNext}
              style={{
                position: 'absolute',
                right: '10px',
                top: '50%',
                transform: 'translateY(-50%)',
                background: 'rgba(255,255,255,0.7)',
                borderRadius: '50%',
                padding: '8px',
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                cursor: 'pointer',
              }}
              aria-label="Próxima Imagem"
            >
              <ChevronRight size={28} />
            </button>
          </>
        )}
        <button
          onClick={handleClose}
          style={{
            position: 'absolute',
            top: '10px',
            right: '10px',
            background: 'white',
            borderRadius: '50%',
            padding: '8px',
            border: 'none',
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
            cursor: 'pointer',
          }}
          aria-label="Fechar"
        >
          <X size={24} />
        </button>
      </div>
    </div>
  );
};

const PortfolioCard: React.FC<PortfolioCardProps> = ({ item, onImageClick, isChecked, onToggle }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const basePath = 'https://labirintar.github.io/comercial/diagnostico/';

  const nextImage = (e: React.MouseEvent) => {
    e.stopPropagation();
    setCurrentIndex((prevIndex) => (prevIndex + 1) % item.images.length);
  };

  const prevImage = (e: React.MouseEvent) => {
    e.stopPropagation();
    setCurrentIndex((prevIndex) => (prevIndex - 1 + item.images.length) % item.images.length);
  };

  const handleImageError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
    e.currentTarget.onerror = null;
    e.currentTarget.src = 'https://picsum.photos/400/300?grayscale';
  };

  return (
    <div className="bg-white rounded-2xl shadow-md overflow-hidden group h-full">
      <div className="relative w-full h-52 overflow-hidden bg-gray-100">
        <div
          className="flex h-full transition-transform duration-500 ease-in-out"
          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
        >
          {item.images.map((imgFile, index) => {
            const fullUrl = `${basePath}${item.folder}/${imgFile}`;
            return (
              <img
                key={index}
                src={fullUrl}
                alt={`${item.title} - Imagem ${index + 1}`}
                className="w-full h-full object-contain flex-shrink-0 cursor-pointer"
                onError={handleImageError}
              //onClick={(e) => onImageClick(item, index, e.currentTarget)}
              />
            );
          })}
        </div>

        {item.images.length > 1 && (
          <>
            <button
              type="button"
              onClick={prevImage}
              className="absolute top-1/2 left-2 -translate-y-1/2 bg-white/70 rounded-full p-2 text-text-main hover:bg-white transition-opacity opacity-0 group-hover:opacity-100"
              aria-label="Imagem anterior"
            >
              <ChevronLeft size={24} />
            </button>
            <button
              type="button"
              onClick={nextImage}
              className="absolute top-1/2 right-2 -translate-y-1/2 bg-white/70 rounded-full p-2 text-text-main hover:bg-white transition-opacity opacity-0 group-hover:opacity-100"
              aria-label="Próxima imagem"
            >
              <ChevronRight size={24} />
            </button>
          </>
        )}

        {item.tooltip && (
          <div className="absolute bottom-0 left-0 w-full bg-black/50 overflow-hidden">
            <div className="flex whitespace-nowrap animate-marquee">
              <span className="text-xs text-white p-1 mx-4">{item.tooltip}</span>
              <span className="text-xs text-white p-1 mx-4" aria-hidden="true">{item.tooltip}</span>
            </div>
          </div>
        )}
      </div>
      <div className="p-4">
        <div className="flex justify-between items-center gap-2">
          <h4 className="font-raleway text-xl font-semibold">{item.title}</h4>
          <input
            type="checkbox"
            name="modalidades_selecionadas"
            value={item.title}
            className="w-5 h-5 accent-primary cursor-pointer"
            checked={isChecked}
            onChange={() => onToggle(item.title)}
          />
        </div>
      </div>
    </div>
  );
};


// --- Main Components (from components/*) ---


const TopBar: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <>
      <div className="w-full bg-white shadow-sm fixed top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <a href="/" aria-label="Home">
              <img
                src="logoslabirintar/Labirintar_Bubble.webp"
                alt="Logo Labirintar"
                className="h-10"
              />
            </a>
          </div>

          <div className="hidden md:flex items-center space-x-4">
            <a href="/para-escolas" className="text-secondary px-3 py-2 hover:text-secondary-dark font-medium">Para escolas</a>
            <a href="/experiences" className="text-secondary px-3 py-2 hover:text-secondary-dark font-medium">Experiências</a>
            <span className="text-secondary px-3 py-2 font-medium cursor-default">Quem somos</span>
            <span className="text-secondary px-3 py-2 font-medium cursor-default">Rede</span>
            <a href="https://blog.labirintar.com.br/" className="text-secondary px-3 py-2 hover:text-secondary-dark font-medium">Blog</a>
            <a href="#contato" className="text-secondary px-3 py-2 hover:text-secondary-dark font-medium">Contato</a>
            <a
              href="https://app.labirintar.com.br/admin"
              className="bg-white text-secondary border border-secondary px-4 py-2 rounded font-bold hover:bg-secondary hover:text-white transition"
            >
              Entrar
            </a>
          </div>

          <div className="md:hidden">
            <button
              onClick={() => setMenuOpen(!menuOpen)}
              aria-label="Abrir menu mobile"
            >
              {menuOpen ? (
                <X className="w-6 h-6 text-text-main" />
              ) : (
                <svg
                  className="w-6 h-6 text-text-main"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={2}
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                </svg>
              )}
            </button>
          </div>
        </div>
      </div>

      {menuOpen && (
        <div className="fixed inset-0 bg-white z-40 p-6 flex flex-col items-start gap-6 shadow-xl transition-all">
          <div className="flex items-center justify-between w-full">
            <div className="flex items-center space-x-2">
                <a href="/" aria-label="Home">
                  <img
                    src="logoslabirintar/Labirintar_RGB.png"
                    alt="Logo"
                    className="h-6"
                  />
                </a>
                <span className="font-bold text-secondary">LABIRINTAR</span>
              </div>
            <button
              onClick={() => setMenuOpen(false)}
              aria-label="Fechar menu mobile"
            >
              <X className="w-6 h-6 text-gray-500" />
            </button>
          </div>

          <a href="/para-escolas" className="w-full text-center bg-white text-secondary px-4 py-2 rounded font-bold hover:bg-secondary hover:text-white transition">Para escolas</a>

          <a href="/experiences" className="w-full text-center bg-white text-secondary px-4 py-2 rounded font-bold hover:bg-secondary hover:text-white transition">Experiências</a>

          <span className="w-full text-center bg-white text-secondary px-4 py-2 rounded font-bold cursor-default">Quem somos</span>

          <span className="w-full text-center bg-white text-secondary px-4 py-2 rounded font-bold cursor-default">Rede</span>

          <a href="https://blog.labirintar.com.br/" className="w-full text-center bg-white text-secondary px-4 py-2 rounded font-bold hover:bg-secondary hover:text-white transition">Blog</a>

          <a href="#contato" className="w-full text-center bg-white text-secondary px-4 py-2 rounded font-bold hover:bg-secondary hover:text-white transition">Contato</a>

          <a href="https://app.labirintar.com.br/admin" className="w-full text-center border border-secondary text-secondary font-bold py-2 rounded">Entrar</a>
        </div>
      )}
    </>
  );
};

const Hero: React.FC = () => {
  const [logoRef, isLogoVisible] = useFadeIn<HTMLImageElement>();
  const [titleRef, isTitleVisible] = useFadeIn<HTMLHeadingElement>();
  const [subtitleRef, isSubtitleVisible] = useFadeIn<HTMLParagraphElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  return (
    <header
      className="relative h-screen flex flex-col items-center justify-center text-center p-4 overflow-hidden"
      style={{
        backgroundImage: `url(./imagensFundo/img_fundo.jpg)`,
        backgroundSize: "cover",
        backgroundPosition: "center 30%",
      }}
    >
      <div className="absolute inset-0"></div>
      <img
        ref={logoRef}
        src="logoslabirintar/stikers-08.png"
        alt="Logo Labirintar"
        className={`w-[280px] max-w-[70%] mb-8 drop-shadow-md ${getFadeInClass(isLogoVisible)}`}
        style={{ transitionDelay: "100ms" }}
      />
      <h1
        ref={titleRef}
        className={`font-roboto-slab text-[clamp(2.2rem,5vw,3.5rem)] leading-tight ${getFadeInClass(isTitleVisible)}`}
        style={{ transitionDelay: "300ms" }}
      >
        <span className="inline-block bg-[#ff6b6b] text-white px-6 py-3 rounded-[18px] shadow-md border-2 border-white/20">
          Educar é dar sentido ao tempo.
        </span>
      </h1>

      <p
        ref={subtitleRef}
        className={`font-roboto-slab text-5xl leading-tight mt-4 ${getFadeInClass(isSubtitleVisible)}`}
        style={{
          transitionDelay: "500ms",
          color: "#000000ff",
        }}
      >
        <span className="inline-block bg-[#ff6b6b] text-white px-5 py-3 rounded-[14px] shadow-md border-2 border-white/20">
          E sentido se constrói em rede.
        </span>
      </p>
    </header>
  );
};

const visionCards = [
  {
    title: 'Plataforma Inteligente: o sistema que organiza o contraturno',
    text: 'Conectamos escolas, educadores e famílias por meio de uma plataforma viva que organiza fluxos, registros e comunicação. A tecnologia da Labirintar sustenta continuidade, reduz sobrecarga e transforma experiências em aprendizado institucional.',
  },
  {
    title: 'Geração de Receita: Sustentabilidade sem improviso',
    text: 'Organizamos o uso dos espaços e do tempo da escola de forma estruturada, permitindo que o contraturno gere receita recorrente, previsível e alinhada ao projeto pedagógico, sem aumentar a complexidade operacional da gestão.',
  },
  {
    title: 'Desenvolvimento integral: experiência com intencionalidade pedagógica',
    text: 'Nossas experiências não são recreação isolada. Elas fazem parte de percursos educativos fundamentados em ciência, escuta sensível e documentação, promovendo o desenvolvimento cognitivo, socioemocional, cultural e relacional das crianças.',
  },
  {
    title: 'Ecossistema Colaborativo:  rede, governança e aprendizado coletivo',
    text: 'A Labirintar não opera por contratos isolados, mas por rede. Educadores, escolas e equipe atuam conectados por critérios claros, formação contínua e governança viva, fortalecendo vínculos, qualidade e impacto ao longo do tempo.',
  },
];

const ChallengeIntroSection: React.FC = () => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  return (
    <section
      ref={sectionRef}
      className={`relative py-24 px-4 sm:px-8 bg-cover bg-center ${getFadeInClass(isVisible)}`}
      style={{
        backgroundImage: "url(./imagensFundo/image18.jpg)",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    >
      <div className="absolute inset-0 bg-white/70"></div>

      <div className="relative container mx-auto max-w-6xl">
        <h2 className="font-roboto-slab text-center text-[clamp(2.5rem,5vw,3.5rem)] leading-tight mb-6">
          Mais tempo não basta.
          <br />
          Educação integral exige estrutura viva.
        </h2>
        <p className="text-center text-xl text-gray-700 max-w-4xl mx-auto mb-16">
          <span className="inline-block bg-[#e6cbe4] text-gray-700 px-6 py-3 rounded-[18px] shadow-md border-2 border-[#e6cbe4]">
            Quando o tempo escolar se amplia sem uma estrutura pedagógica
            consistente, <br />
            as experiências se fragmentam, e o que poderia ser potência vira
            desgaste para a escola, os educadores e as crianças.
          </span>
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Primeiro bloco */}
          <div className="bg-white/95 backdrop-blur-sm rounded-2xl overflow-hidden shadow-lg">
            <div className="p-8 md:p-12">
              <h3 className="font-roboto-slab text-3xl font-semibold mb-6 text-[#e6cbe4]">
                O que acontece na prática
              </h3>
              <ul className="space-y-4">
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    O contraturno se transforma em um conjunto de atividades
                    desconectadas
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    A coordenação pedagógica fica sobrecarregada com gestão
                    operacional
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    Falta continuidade e coerência pedagógica ao longo do tempo
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    Educadores entram e saem, enfraquecendo vínculos e processos
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    Famílias não conseguem perceber valor e sentido no cotidiano
                    vivido
                  </span>
                </li>
              </ul>
            </div>
          </div>

          {/* Segundo bloco */}
          <div className="bg-white/95 backdrop-blur-sm rounded-2xl overflow-hidden shadow-lg">
            <div className="p-8 md:p-12">
              <h3 className="font-roboto-slab text-3xl font-semibold mb-8 text-[#e6cbe4]">
                Com isso, grandes oportunidades se perdem
              </h3>
              <ul className="space-y-4">
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    O contraturno deixa de aprofundar experiências
                    verdadeiramente significativas
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    A escola não consolida uma identidade pedagógica clara no
                    contraturno
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    As crianças vivenciam muitas atividades, mas poucos
                    percursos de aprendizagem contínua
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    Educadores atuam sem pertencimento estruturado ou
                    perspectiva de permanência
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-secondary mt-1 text-3xl">•</span>
                  <span className="text-lg text-gray-700">
                    O contraturno não alcança todo o seu potencial pedagógico,
                    relacional e econômico
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const solutionIntroCards = [
  {
    title: "Curadoria Pedagógica",
    subtitle: "Experiência com intencionalidade",
    text: "A curadoria pedagógica acontece na escolha, acompanhamento e avaliação das atividades integradas ao projeto educacional da escola, com base na escuta das infâncias e em evidências pedagógicas.\n\nCada experiência compõe um percurso educativo, com intencionalidade clara e atenção ao desenvolvimento integral.\n\nNossa excelência não está na quantidade de ofertas, mas na qualidade do sentido construído ao longo do tempo.",
  },
  {
    title: "Tecnologia Digital",
    subtitle: "O sistema que organiza o contraturno",
    text: "A tecnologia da Labirintar é infraestrutura. Ela organiza experiências, educadores, horários e registros pedagógicos em um único fluxo integrado.\n\nIsso reduz a carga operacional da escola, dá visibilidade ao que acontece no contraturno e libera tempo e energia para que o pedagógico aconteça com mais presença e profundidade.",
  },
  {
    title: "Rede de Educadores",
    subtitle: "Qualidade com continuidade",
    text: "A Labirintar atua com uma rede curada de educadores, alinhados em visão pedagógica, prática cotidiana e compromisso com o percurso das crianças.\n\nEssa continuidade reduz rotatividade, fortalece vínculos e permite que a experiência educativa se aprofunde, semestre após semestre, escola após escola.",
  },
  {
    title: "Comunidade Colaborativa",
    subtitle: "Um ecossistema que aprende",
    text: "A qualidade não se sustenta sozinha. Ela se constrói em comunidade. Trocas entre educadores, registros de prática, acompanhamento contínuo e espaços de reflexão coletiva permitem que a rede aprenda com a própria experiência, refine decisões e eleve a qualidade ao longo do tempo.",
  },
];

const SolutionIntroSection: React.FC = () => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-opacity duration-1000 ease-out ${isVisible ? 'opacity-100' : 'opacity-0'}`;

  return (
    <section
      ref={sectionRef}
      className={`relative py-24 px-4 sm:px-8 bg-cover bg-center ${getFadeInClass(isVisible)}`}
      style={{
        backgroundImage: 'url(./imagensFundo/image2.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }}
    >
      <div className="absolute inset-0 bg-white/75"></div>
      
      <div className="relative container mx-auto max-w-7xl">
        <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-4">
          Quando o Tempo Integral ganha estrutura, a experiência muda.
        </h2>
        <p className="text-center text-xl text-gray-700 max-w-5xl mx-auto mb-16">
          A Labirintar organiza o contraturno como uma infraestrutura educativa viva - integrando pedagogia, tecnologia digital e rede de educadores em um sistema coerente.
        </p>

        <div className="grid md:grid-cols-2 gap-6 mb-16">
          {solutionIntroCards.map((card, index) => (
            <div
              key={index}
              className="bg-white/95 backdrop-blur-sm rounded-2xl p-8 shadow-lg border-t-4 border-secondary"
            >
              <h3 className="font-roboto-slab text-2xl text-secondary font-semibold mb-2">
                {card.title}
              </h3>
              <h4 className="font-raleway text-lg text-primary mb-4 font-medium">
                {card.subtitle}
              </h4>
              <p className="text-base leading-relaxed text-gray-700 whitespace-pre-line">
                {card.text}
              </p>
            </div>
          ))}
        </div>

        <div className="max-w-4xl mx-auto rounded-2xl p-8 text-center border-l-4 shadow-lg" style={{ backgroundColor: '#ffe9c9', borderColor: '#ff595a' }}>
          <p className="font-raleway text-2xl leading-relaxed font-semibold" style={{ color: '#000000' }}>
            Quando pedagogia, tecnologia, pessoas e comunidades se organizam como sistema, o Tempo Integral deixa de ser improviso e passa a ser infraestrutura.
          </p>
        </div>
      </div>
    </section>
  );
};

const VisionSection: React.FC = () => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-opacity duration-1000 ease-out ${isVisible ? 'opacity-100' : 'opacity-0'}`;

  return (
    <section
      ref={sectionRef}
      className={`py-24 px-4 sm:px-8 bg-light-bg ${getFadeInClass(isVisible)}`}
    >
      <div className="container mx-auto">
        <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-4">
          A escola em tempo integral precisa mais do que tempo.<br />
          Precisa de estrutura que sustente experiências com sentido.
        </h2>
        <p className="text-center text-2xl text-gray-600 max-w-6xl mx-auto mb-16">
          A Labirintar organiza o contraturno como parte viva do projeto educativo da escola - conectando pessoas, experiências e decisões em um sistema coerente.
        </p>

        <div
          className={`
            flex flex-col gap-4 content-center
            md:flex-row md:gap-8 md:overflow-visible md:space-x-0 md:justify-center
          `}
        >
          {visionCards.map((card, index) => (
            <div
              key={index}
              className="w-full md:w-80 bg-white rounded-2xl p-8 shadow-md border-t-4 border-primary snap-start"
            >
              <h4 className="font-raleway text-xl text-primary mb-4">
                {card.title}
              </h4>
              <p className="text-base leading-relaxed text-gray-700">
                {card.text}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const challenges = [
  { id: 'diferenciar', text: 'Diferenciar-se sem onerar a operação' },
  { id: 'reter', text: 'Atrair e reter alunos com propostas significativas' },
  { id: 'espacos', text: 'Transformar espaços ociosos em ambientes vivos' },
  { id: 'organizar', text: 'Organizar o contraturno sem sobrecarregar a coordenação' },
  { id: 'continuidade', text: 'Garantir continuidade pedagógica' },
  { id: 'reduzirRotatividade', text: 'Reduzir rotatividade de educadores' },
];

const ProblemSection: React.FC<ProblemSectionProps> = ({ rankings, setRankings, openChallenge, setOpenChallenge }) => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  const commitments = [
    'Organização do contraturno sem sobrecarregar a coordenação pedagógica e equipe docente.',
    'Implantação de curadoria especializada focada na qualidade pedagógica',
    'Redução na rotatividade de educadores que atuam no contraturno',
    'Manutenção dos alunos matriculados e ampliação da oferta para novos alunos',
    'Valorização dos diferenciais institucionais nas campanhas de comunicação',
    'Divulgação estruturada do que acontece no contraturno, transformando as experiências vividas em dados estruturados que irão orientar decisões futuras'
  ];

  return (
    <section
      ref={sectionRef}
      className={`w-full py-24 px-4 sm:px-8 bg-cover bg-center relative ${getFadeInClass(
        isVisible,
      )}`}
      style={{
        backgroundImage: `url('/imagensFundo/img_chao.jpg')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}
    >
      <div className="absolute inset-0 bg-white/70"></div>

      <div className="relative container mx-auto max-w-5xl">
        <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-4">
          A cartografia dos desafios reais <br /> do Tempo Integral
        </h2>

        <p className="text-center text-xl text-gray-700 max-w-4xl mx-auto mb-8">
          Com base nos desafios que escutamos no chão das escolas com as quais caminhamos, a Labirintar se compromete com:
        </p>

        <div className="max-w-4xl mx-auto">
          <ul className="space-y-4">
            {commitments.map((commitment, index) => (
              <li key={index} className="flex items-start gap-3 bg-white/95 backdrop-blur-sm rounded-xl p-6 shadow-md">
                <span className="text-secondary mt-1 text-2xl">•</span>
                <span className="text-lg text-gray-700">{commitment}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

const solutionCards: FlipCardProps[] = [
  {
    icon: <Cpu size={48} className="text-primary" />,
    frontTitle: 'Tecnologia',
    backTitle: 'Organiza o contraturno como sistema ',
    backText: 'Plataforma que integra experiências, educadores, horários e registros pedagógicos em um único fluxo. Menos carga operacional para a escola. Mais espaço para o pedagógico acontecer.'
  },
  {
    icon: <Award size={48} className="text-primary" />,
    frontTitle: 'Rede de Educadores Empreendedores',
    backTitle: 'Qualidade com continuidade',
    backText: 'Rede curada de educadores alinhados em visão, prática e compromisso pedagógico. Reduz rotatividade. Constrói percurso educativo consistente ao longo do tempo.'
  },
  {
    icon: <Heart size={48} className="text-primary" />,
    frontTitle: 'Curadoria Pedagógica',
    backTitle: 'Experiência com intenção ',
    backText: 'Nada de atividades soltas. Cada experiência tem intencionalidade pedagógica, coerência com o projeto da escola e foco no desenvolvimento integral das crianças.'
  },
  {
    icon: <Share2 size={48} className="text-primary" />,
    frontTitle: 'Comunidade Colaborativa',
    backTitle: 'Um ecossistema que aprende ',
    backText: 'Escolas, educadores e Labirintar aprendem juntos. Trocas, registros e acompanhamento contínuo refinam práticas e elevam a qualidade com o tempo.'
  }
];


const SolutionSection: React.FC = () => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-opacity duration-1000 ease-out ${isVisible ? 'opacity-100' : 'opacity-0'}`;

  return (
    <section
      ref={sectionRef}
      className={`bg-eggshell py-24 ${getFadeInClass(isVisible)}`}
    >
      <div className="container mx-auto max-w-5xl px-4 sm:px-8">
        <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-4">
          Quando o Tempo Integral ganha estrutura, a experiência muda
        </h2>
        <p className="text-center text-2xl text-gray-600 max-w-3xl mx-auto mb-16">
          A Labirintar integra pedagogia, pessoas e tecnologia para transformar o contraturno em um percurso educativo contínuo, viável e com sentido.
        </p>

        <div className="grid md:grid-cols-2 gap-8 [perspective:1000px]">
          {solutionCards.map((card, index) => (
            <FlipCard key={index} {...card} />
          ))}
        </div>

        <p className="text-center text-2xl text-gray-600 max-w-3xl mx-auto mt-16">
          A Labirintar não entrega atividades.
          Ela organiza o Tempo Integral como infraestrutura educativa viva.
        </p>
      </div>
    </section>
  );
};


const WayOfDoingSection: React.FC = () => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();
  const routineItems = [
    "Corpo como território de conhecimento (presença e intencionalidade)",
    "Currículo Essencial (problematização)",
    "Conhecimento como acontecimento (ação e cooperação)",
    "Cartografia do cotidiano (reflexão e documentação)",
    "Ética da presença (cuidado)",
  ];

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  return (
    <section
      ref={sectionRef}
      className={`w-full py-24 px-4 sm:px-8 bg-cover bg-center relative ${getFadeInClass(
        isVisible,
      )}`}
      style={{
        backgroundImage: `url('/imagensFundo/img_crianca_preto_branco.jpg')`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
      }}
    >
      {/* overlay branco semi-transparente */}
      <div className="absolute inset-0 bg-white/70"></div>

      {/* conteúdo centralizado */}
      <div className="relative container mx-auto max-w-5xl">
        <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-12">
          Nosso jeito de fazer
        </h2>

        <div className="grid md:grid-cols-2 gap-8">
          <div className="bg-white p-8 rounded-2xl shadow-sm">
            <h4 className="text-primary font-raleway text-2xl mb-1">
              Aula como experiência
            </h4>
            <p className="text-gray-500 italic mb-6">
              Por que eu quero viver isso?
            </p>
            <h4 className="text-primary font-raleway text-2xl mb-1">
              Aprendizagem por meio de projetos de indagação
            </h4>
            <p className="text-gray-500 italic">
              {" "}
              O que podemos aprender juntos?
            </p>
            <br />
            <h4 className="text-primary font-lora text-2xl mb-1">
              Pesquisa etnográfica
            </h4>
            <p className="text-gray-500 italic">
              Que atitude de escuta cultivamos para compreender a cultura da
              escola?{" "}
            </p>
          </div>
          <div className="bg-white p-8 rounded-2xl shadow-sm">
            <h4 className="text-primary font-raleway text-2xl mb-4">
              Pedagogia Viva: <br /> Rotina estruturante
            </h4>
            <ul className="space-y-3">
              {routineItems.map((item) => (
                <li key={item} className="flex items-start gap-3">
                  <span className="w-6 h-6 flex-shrink-0 flex items-center justify-center text-secondary">
                    <CheckCircle size={18} strokeWidth={2} aria-hidden />
                  </span>
                  <span className="font-medium leading-tight">{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};


const portfolioData: PortfolioItem[] = [
  {
    title: "Marcenaria",
    folder: "marcenaria",
    images: [
      "IMG_3203.png",
      "IMG_1809.jpeg",
      "IMG_1810.jpeg",
      "IMG_1835.jpeg",
      "IMG_1836.jpeg",
      "IMG_1837.jpeg",
    ],
    tooltip: null,
  },
  {
    title: "Circo",
    folder: "circo",
    images: [
      "IMG_3200.png",
      "IMG_1813.jpeg",
      "IMG_1839.jpeg",
      "IMG_1840.jpeg",
      "IMG_1841.jpeg",
      "IMG_1842.jpeg",
      "IMG_1843.jpeg",
      "IMG_1844.jpeg",
      "bc110c9c-a8e1-452a-94b7-5a0c6ce0d3b8.jpeg",
      "e3b3b2a3-a15e-4e24-be2f-b529a24e3a60.jpeg",
      "f80d9019-6851-4b2f-af19-5a8dd0edcaf7.jpeg",
    ],
    tooltip: null,
  },
  {
    title: "Fazeres Manuais",
    folder: "fazeresmanuais",
    images: [
      "IMG_3198.png",
      "82d08da1-ed2c-4bfd-908a-4b6e75999604.jpeg",
      "IMG_1822.jpeg",
      "IMG_1846.jpeg",
      "IMG_1847.jpeg",
      "IMG_1848.jpeg",
      "IMG_1849.jpeg",
      "IMG_1850.jpeg",
      "IMG_1851.jpeg",
      "IMG_1852.jpeg",
      "IMG_1853.jpeg",
    ],
    tooltip: null,
  },
  {
    title: "Tecnologia",
    folder: "tecnologia",
    images: [
      "IMG_3199.png",
      "IMG_1807.jpeg",
      "IMG_1808.jpeg",
      "IMG_1894.jpeg",
      "IMG_1895.jpeg",
      "IMG_1896.jpeg",
      "IMG_1897.jpeg",
      "IMG_1898.jpeg",
      "IMG_1899.jpeg",
      "IMG_1900.jpeg",
      "IMG_1901.jpeg",
      "IMG_1902.jpeg",
      "IMG_1903.jpeg",
      "IMG_1904.jpeg",
      "IMG_1905.jpeg",
      "IMG_1906.jpeg",
    ],
    tooltip: null,
  },
  {
    title: "CidadeVamos",
    folder: "cidadevamos",
    images: [
      "IMG_3201.png",
      "IMG_1948.jpeg",
      "IMG_1912.jpeg",
      "IMG_1913.jpeg",
      "IMG_1914.jpeg",
      "IMG_1915.jpeg",
      "IMG_1916.jpeg",
      "IMG_1917.jpeg",
      "IMG_1918.jpeg",
      "IMG_1919.jpeg",
      "IMG_1920.jpeg",
      "IMG_1921.jpeg",
      "IMG_1922.jpeg",
      "IMG_1923.jpeg",
      "IMG_1924.jpeg",
      "IMG_1925.jpeg",
      "IMG_1926.jpeg",
    ],
    tooltip: null,
  },
  // {
  //   title: "Infância Sem Excesso",
  //   folder: "infanciasemexcesso",
  //   images: [
  //     "IMG_3202.png",
  //     "IMG_1944.jpeg",
  //     "IMG_1946.jpeg",
  //     "IMG_1930.jpeg",
  //     "IMG_1931.jpeg",
  //     "IMG_1932.jpeg",
  //     "IMG_1933.jpeg",
  //     "IMG_1934.jpeg",
  //     "IMG_1937.jpeg",
  //     "IMG_1938.jpeg",
  //     "IMG_1939.jpeg",
  //     "IMG_1940.jpeg",
  //     "IMG_1941.jpeg",
  //     "IMG_1942.jpeg",
  //     "IMG_1936.jpeg",
  //     "IMG_1945.jpeg",
  //     "IMG_1927.jpeg",
  //     "IMG_1935.jpeg",
  //     "IMG_1928.jpeg",
  //     "IMG_1929.jpeg",
  //   ],
  //   tooltip: null,
  // },
  {
    title: "Prática Esportiva",
    folder: "praticaesportiva",
    images: [
      "IMG_3197.png",
      "IMG_1907.jpeg",
      "IMG_1908.jpeg",
      "IMG_1910.jpeg",
      "IMG_1911.jpeg",
      "IMG_1969.jpeg",
      "IMG_1970.jpeg",
      "IMG_1971.jpeg",
      "IMG_1972.jpeg",
      "IMG_1973.jpeg",
      "IMG_1974.jpeg",
      "IMG_1975.jpeg",
      "IMG_1976.jpeg",
      "IMG_1977.jpeg",
      "IMG_1978.jpeg",
    ],
    tooltip: null,
  },
  // {
  //   title: "Brincar Livre",
  //   folder: "brincarlivre",
  //   images: [
  //     "IMG_3204.png",
  //     "IMG_1801.jpeg",
  //     "IMG_1804.jpeg",
  //     "IMG_1811.jpeg",
  //     "IMG_1830.jpeg",
  //     "IMG_1831.jpeg",
  //     "IMG_1832.jpeg",
  //     "IMG_1979.jpeg",
  //     "IMG_1980.jpeg",
  //     "IMG_1981.jpeg",
  //     "IMG_1982.jpeg",
  //     "IMG_1983.jpeg",
  //     "IMG_1984.jpeg",
  //     "IMG_1985.jpeg",
  //     "IMG_1986.jpeg",
  //     "IMG_1987.jpeg",
  //     "IMG_1988.jpeg",
  //   ],
  //   tooltip: null,
  // },
  {
    title: "Mindfulness",
    folder: "mindfulness",
    images: [
      "IMG_3196.png",
      "4f98ae78-9869-4179-95df-93919ee1616f.jpeg",
      "87b6d7f1-94a9-4b8e-adfd-5b0bda9ff2e0.jpeg",
      "IMG_1812.jpeg",
      "IMG_1854.jpeg",
      "IMG_1855.jpeg",
      "IMG_1857.jpeg",
    ],
    tooltip: null,
  },
  {
    title: "Ateliês",
    folder: "atelie",
    images: [
      "IMG_3204.png",
      "IMG_1820.jpeg",
      "IMG_1861.jpeg",
      "IMG_1862.jpeg",
      "IMG_1863.jpeg",
      "IMG_1865.jpeg",
      "IMG_1866.jpeg",
      "IMG_1867.jpeg",
      "IMG_1868.jpeg",
      "IMG_1869.jpeg",
      "IMG_1870.jpeg",
      "IMG_1871.jpeg",
      "IMG_1872.jpeg",
      "CrioLivros1.jpg",
      "CrioLivros2.jpg",
      "CrioLivros3.jpg",
      "CrioLivros4.jpg",
      "CrioLivros5.jpg",
      "IMG_1873.jpeg",
      "IMG_1874.jpeg",
      "IMG_1875.jpeg",
      "IMG_1881.jpeg",
      "IMG_1883.jpeg",
      "IMG_1884.jpeg",
      "IMG_1885.jpeg",
      "IMG_1886.jpeg",
      "IMG_1887.jpeg",
      "IMG_1888.jpeg",
      "IMG_1890.jpeg",
      "IMG_1891.jpeg",
      "IMG_1962.jpeg",
      "IMG_1963.jpeg",
      "IMG_1964.jpeg",
      "IMG_1965.jpeg",
      "IMG_1966.jpeg",
      "IMG_3195.jpeg",
      "fa97fcb7-9657-435d-8e72-e67d85f09b8b.jpeg",
    ],
    tooltip: null,
  },
  {
    title: "Drone Educativo",
    folder: "droneeducativo",
    images: [
      "IMG_1901.jpg",
      "IMG_1902.jpg",
      "IMG_1903.jpg",
      "IMG_1904.jpg",
      "IMG_1905.jpg",
      "IMG_1906.jpg",
      "IMG_1907.jpg",
      "IMG_1908.jpg",
    ],
    tooltip: null,
  },
  {
    title: "Xadrez",
    folder: "xadrez",
    images: [
      "IMG_2001.jpg",
      "IMG_2002.jpg",
      "IMG_2003.jpg",
      "IMG_2004.jpg",
      "IMG_2005.jpg",
      "IMG_2006.jpg",
      "IMG_2007.jpg",
      "IMG_2008.jpg",
    ],
    tooltip: null,
  },
];

const PortfolioSection: React.FC<PortfolioSectionProps> = ({ selectedItems, onToggleItem, onToggleSelectAll, onDeselectAll, portfolioItemTitles }) => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();
  const [copyButtonText, setCopyButtonText] = useState('Copiar Link do Diagnóstico');

  // Lightbox state
  const [lightboxState, setLightboxState] = useState<LightboxState | null>(null);
  const selectAllCheckboxRef = useRef<HTMLInputElement>(null);

  const numSelected = useMemo(() => Object.values(selectedItems).filter(Boolean).length, [selectedItems]);
  const allSelected = useMemo(() => numSelected > 0 && numSelected === portfolioItemTitles.length, [numSelected, portfolioItemTitles.length]);
  const isIndeterminate = useMemo(() => numSelected > 0 && numSelected < portfolioItemTitles.length, [numSelected, portfolioItemTitles.length]);

  useEffect(() => {
    if (selectAllCheckboxRef.current) {
      selectAllCheckboxRef.current.indeterminate = isIndeterminate;
    }
  }, [isIndeterminate]);

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  const handleCopyLink = useCallback(() => {
    const link = 'https://labirintar.github.io/comercial/diagnostico/formulario.html';
    navigator.clipboard.writeText(link).then(() => {
      setCopyButtonText('Link Copiado!');
      setTimeout(() => setCopyButtonText('Copiar Link do Diagnóstico'), 2000);
    }).catch(err => console.error('Failed to copy link: ', err));
  }, []);

  const basePath = 'https://clubesa.github.io/simuladorRede3d/diagnostico/';
  const handleOpenLightbox = useCallback((item: PortfolioItem, imageIndex: number, element: HTMLElement) => {
    const imageUrls = item.images.map(imgFile => `${basePath}${item.folder}/${imgFile}`);
    element.style.visibility = 'hidden';
    setLightboxState({ images: imageUrls, currentIndex: imageIndex, originElement: element });
  }, []);

  const handleCloseLightbox = useCallback(() => {
    if (lightboxState) {
      lightboxState.originElement.style.visibility = 'visible';
    }
    setLightboxState(null);
  }, [lightboxState]);

  const handleNextLightboxImage = useCallback(() => {
    if (lightboxState) {
      setLightboxState(prev => prev ? ({ ...prev, currentIndex: (prev.currentIndex + 1) % prev.images.length }) : null);
    }
  }, [lightboxState]);

  const handlePrevLightboxImage = useCallback(() => {
    if (lightboxState) {
      setLightboxState(prev => prev ? ({ ...prev, currentIndex: (prev.currentIndex - 1 + prev.images.length) % prev.images.length }) : null);
    }
  }, [lightboxState]);

  useEffect(() => {
    const body = document.body;
    if (lightboxState) {
      body.style.overflow = 'hidden';
    } else {
      body.style.overflow = '';
    }
    return () => {
      body.style.overflow = '';
    };
  }, [lightboxState]);

  return (
    <section
      ref={sectionRef}
      className={`relative w-full py-24 px-4 sm:px-8 bg-cover bg-center ${getFadeInClass(
        isVisible,
      )}`}
      style={{
        backgroundImage: `url('/imagensFundo/image22.png')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}
    >
      <div className="absolute inset-0 bg-black/20"></div>
      
      <div className="relative container mx-auto max-w-5xl">
        <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-12 text-white">
          Experiências
        </h2>

      {/*<div className="grid grid-cols-1 md:grid-cols-3 gap-8">*/}
      {/* Card 1: Select All */}
      {/*<div className="bg-white rounded-2xl shadow-md overflow-hidden flex flex-col h-full">
          <div className="bg-gray-100 p-6 flex-grow flex items-center justify-center text-center">
            <p className="text-center text-lg text-black max-w-2xl mx-auto mb-12">
              Selecione as experiências que melhor compõem com o projeto
              pedagógico da sua escola.
            </p>
          </div>
          <div className="p-4 border-t">
            <div className="flex justify-between items-center gap-2">
              <label
                htmlFor="select-all"
                className="font-raleway text-xl font-semibold cursor-pointer flex-grow text-text-main"
              >
                Selecionar todas
              </label>
              <input
                ref={selectAllCheckboxRef}
                type="checkbox"
                id="select-all"
                className="w-5 h-5 accent-primary cursor-pointer"
                checked={allSelected}
                onChange={onToggleSelectAll}
              />
            </div>
          </div>
        </div>*/}

      {/*portfolioData.map((item) => (
          <PortfolioCard
            key={item.title}
            item={item}
            onImageClick={handleOpenLightbox}
            isChecked={!!selectedItems[item.title]}
            onToggle={onToggleItem}
          />
        ))*/}

      {/* Card 3: Info & Deselect All */}
      {/*<div className="bg-white rounded-2xl shadow-md overflow-hidden flex flex-col h-full">
          <div className="bg-gray-100 p-6 flex-grow flex items-center justify-center text-center">
            <p className="text-lg font-semibold text-gray-700">
              Não sabe quais experiências escolher, entre em contato, pois
              oferecemos um formulário diagnóstico para mapear os interesses
              dos alunos.
            </p>
          </div>
          <div className="p-4 border-t">
            <div className="flex justify-between items-center gap-2">
              <label
                htmlFor="deselect-all"
                className="font-raleway text-xl font-semibold cursor-pointer flex-grow text-text-main"
              >
                Desmarcar todas
              </label>
              <input
                type="checkbox"
                id="deselect-all"
                className="w-5 h-5 accent-primary cursor-pointer disabled:cursor-not-allowed"
                checked={numSelected > 0}
                onChange={onDeselectAll}
                disabled={numSelected === 0}
              />
            </div>
          </div>
        </div>
      </div> */}
      <p className="text-center text-2xl text-white">
        Experiências educativas estruturadas, com intencionalidade clara e
        coerência com o cotidiano escolar.
      </p>
      <div className="flex justify-center pt-10 w-full">
        <a
          href="/experiences"
          className="bg-secondary hover:bg-orange-500 px-4 py-2 text-white text-center font-bold rounded-md text-2xl"
        >
          Conheça as nossas experiências
        </a>
      </div>

      {/* Pesquisa Diagnostica
            <div className="mt-24 bg-accent-blue p-8 sm:p-12 rounded-2xl grid md:grid-cols-2 gap-8 items-center">
                <div className="text-center md:text-left">
                    <h4 className="font-raleway text-2xl mb-4">Não tem certeza de quais experiências escolher?</h4>
                    <p className="max-w-xl mx-auto md:mx-0 text-gray-700 mb-8">
                        Use nosso formulário de diagnóstico para pesquisar os interesses de alunos e famílias. Copie o link e compartilhe com sua equipe pedagógica.
                    </p>
                    <button 
                        type="button" 
                        onClick={handleCopyLink}
                        className="inline-block py-3 px-8 rounded-full text-white font-bold bg-primary hover:bg-opacity-90 transition-all transform hover:-translate-y-1 shadow-md hover:shadow-lg"
                    >
                        {copyButtonText}
                    </button>
                </div>
                <div className="w-full h-full min-h-[800px] flex items-center justify-center">
                    <iframe 
                        src="https://labirintar.github.io/comercial/diagnostico/formulario.html" 
                        title="Preview do Formulário de Diagnóstico"
                        className="w-full h-full border-4 border-white rounded-lg shadow-lg"
                        style={{ transform: 'scale(0.7)' }}
                    ></iframe>
                </div>
            </div>
             {lightboxState && (
                <ImageLightbox
                    images={lightboxState.images}
                    currentIndex={lightboxState.currentIndex}
                    originRect={lightboxState.originElement.getBoundingClientRect()}
                    onClose={handleCloseLightbox}
                    onNext={handleNextLightboxImage}
                    onPrev={handlePrevLightboxImage}
                />
            )}*/}
      </div>
    </section>
  );
};

const PartnershipCard = ({ title, description, border, details, note, activityDuration }: any) => (
  <div className={`bg-white p-8 sm:p-10 rounded-2xl shadow-md border-t-4 ${border} transition-transform duration-300 hover:-translate-y-2 hover:shadow-lg h-full`}>
    <h4 className="font-raleway text-3xl mb-4">{title}</h4>
    <p className="text-lg text-gray-600 mb-4" dangerouslySetInnerHTML={{ __html: description }}></p>
    <p className="font-bold text-primary mb-6">{activityDuration}</p>
    <div className="text-lg font-medium my-6 pl-4 border-l-2 border-gray-200 space-y-2">
      {details.map((line: any, index: number) => (
        <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>
      ))}
    </div>
    <p className="text-gray-500 italic">{note}</p>
  </div>
);

const PartnershipSection: React.FC = () => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  return (
    <section
      ref={sectionRef}
      className={`container mx-auto max-w-5xl py-24 px-4 sm:px-8 ${getFadeInClass(
        isVisible
      )}`}
    >
      <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-4">
        Modelo de Parceria
      </h2>

      <div className="grid grid-cols-1 gap-12">
        <PartnershipCard
          title="Split de receita e assinatura mensal"
          description=""
          border="border-primary"
          activityDuration="Mínimo 2 horas de experiência extracurricular/ dia."
          details={[
            '<strong ><span class="font-bold">35%</span> Escola</strong>',
            "<span>25%</span> Labirintar",
            "<span>30%</span> Educador Empreendedor",
            "<span>10%</span> Provedor Educacional",
          ]}
          note="A escola oferece o espaço, a Labirintar faz o resto.
Por uma assinatura mensal de R$ 2.000, cuidamos de toda a operação: educadores empreendedores, gestão, curadoria e tecnologia.
A escola participa da receita e transforma o extracurricular em fonte de valor, não de custo."
        />
      </div>
    </section>
  );
};


const SimulatorSection: React.FC<SimulatorSectionProps> = ({
  totalAlunos, setTotalAlunos,
  metaConversao, setMetaConversao,
  frequenciaSemanal, setFrequenciaSemanal,
  mensalidadeCurricular, setMensalidadeCurricular,
  selectedModel, onSelectModel
}) => {
  const [sectionRef, isVisible] = useFadeIn<HTMLDivElement>();

  const ticketPrices: { [key: number]: number } = { 1: 298, 2: 447, 3: 759, 4: 948, 5: 948 };

  const formatCurrency = (value: number) => {
    if (isNaN(value)) return 'R$ 0,00';
    return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  };

  const totalAlunosNum = Number(totalAlunos) || 0;
  const mensalidadeCurricularNum = Number(mensalidadeCurricular) || 0;

  const alunosExtra = useMemo(() => Math.round((totalAlunosNum * metaConversao) / 100), [totalAlunosNum, metaConversao]);
  const mensalidadeExtra = useMemo(() => ticketPrices[frequenciaSemanal], [frequenciaSemanal]);
  const percentualCurricular = useMemo(() => {
    if (!mensalidadeCurricularNum || mensalidadeCurricularNum <= 0) return '-';
    return `${((mensalidadeExtra / mensalidadeCurricularNum) * 100).toFixed(1)}%`;
  }, [mensalidadeExtra, mensalidadeCurricularNum]);

  const totalRevenue = useMemo(() => alunosExtra * mensalidadeExtra, [alunosExtra, mensalidadeExtra]);
  const gainModel1 = useMemo(() => totalRevenue * 0.20, [totalRevenue]);
  const costModel2 = useMemo(() => (mensalidadeCurricularNum > 0 ? mensalidadeCurricularNum : 2000), [mensalidadeCurricularNum]);
  const gainModel2 = useMemo(() => (totalRevenue * 0.30) - costModel2, [totalRevenue, costModel2]);

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  return (
    <div ref={sectionRef} className={`container mx-auto max-w-5xl py-24 px-4 sm:px-8 ${getFadeInClass(isVisible)}`}>
      <div className="bg-light-bg p-6 sm:p-8 lg:p-12 rounded-2xl">
        <div className="mb-8">
          <h3 className="font-roboto-slab text-3xl text-text-main flex items-center">
            <BarChart2 className="w-8 h-8 mr-3 text-primary" />
            Simule o seu Potencial de Ganho
          </h3>
        </div>

        {/* --- INPUTS --- */}
        <div className="grid md:grid-cols-2 gap-x-8 gap-y-6 mb-8">
          {/* Total de Alunos */}
          <div className="input-group">
            <label htmlFor="totalAlunos" className="font-semibold mb-2 block">Total de alunos da escola</label>
            <input type="number" id="totalAlunos" name="simulador_total_alunos" placeholder="Ex: 500" value={totalAlunos} onChange={e => setTotalAlunos(e.target.value)} className="w-full p-3 border-2 border-accent-blue rounded-lg text-lg bg-white" />
          </div>

          {/* Meta de Conversão */}
          <div className="slider-group">
            <div className="flex justify-between items-center mb-2">
              <label htmlFor="metaConversao" className="font-semibold">Meta de conversão para o extra</label>
              <span className="font-bold text-primary text-lg">{metaConversao}%</span>
            </div>
            <input type="range" id="metaConversao" name="simulador_meta_conversao" min="0" max="100" value={metaConversao} onChange={e => setMetaConversao(Number(e.target.value))} className="w-full h-2 bg-accent-blue rounded-lg appearance-none cursor-pointer thumb:bg-primary" />
          </div>

          {/* Alunos no Extra */}
          <div className="input-group">
            <label htmlFor="alunosExtra" className="font-semibold mb-2 block">Alunos no extracurricular (calculado)</label>
            <input type="text" id="alunosExtra" name="simulador_alunos_extra" value={alunosExtra} readOnly className="w-full p-3 border-2 border-accent-blue rounded-lg text-lg bg-gray-200 cursor-not-allowed" />
          </div>

          {/* Frequência Semanal */}
          <div className="slider-group">
            <div className="flex justify-between items-center mb-2">
              <label htmlFor="frequenciaSemanal" className="font-semibold">Frequência semanal média</label>
              <span className="font-bold text-primary text-lg">{frequenciaSemanal}x / semana</span>
            </div>
            <input type="range" id="frequenciaSemanal" name="simulador_frequencia_semanal" min="1" max="5" value={frequenciaSemanal} onChange={e => setFrequenciaSemanal(Number(e.target.value))} className="w-full h-2 bg-accent-blue rounded-lg appearance-none cursor-pointer" />
          </div>

          {/* Financial Comparison */}
          <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-x-8 gap-y-6 pt-6 mt-4 border-t border-accent-blue">
            <div className="input-group">
              <label htmlFor="mensalidadeCurricular" className="font-semibold mb-2 block">Mensalidade curricular (R$)</label>
              <input type="number" id="mensalidadeCurricular" name="simulador_mensalidade_curricular" placeholder="Ex: 1500" value={mensalidadeCurricular} onChange={e => setMensalidadeCurricular(e.target.value)} className="w-full p-3 border-2 border-accent-blue rounded-lg text-lg bg-white" />
            </div>
            <div className="input-group">
              <label htmlFor="percentualCurricular" className="font-semibold mb-2 block">% sobre curricular</label>
              <input type="text" id="percentualCurricular" value={percentualCurricular} readOnly className="w-full p-3 border-2 border-accent-blue rounded-lg text-lg bg-gray-200 cursor-not-allowed text-center font-bold text-primary" />
            </div>
            <div className="input-group">
              <label htmlFor="mensalidadeExtra" className="font-semibold mb-2 block">Mensalidade do extra (sugestão R$)</label>
              <input type="text" id="mensalidadeExtra" value={formatCurrency(mensalidadeExtra)} readOnly className="w-full p-3 border-2 border-accent-blue rounded-lg text-lg bg-gray-200 cursor-not-allowed" />
            </div>
          </div>
        </div>

        {/* --- RESULTS --- */}
        {alunosExtra > 0 && (
          <div id="results" className="mt-8 grid md:grid-cols-2 gap-6 text-left">
            <div className="bg-white p-6 rounded-xl shadow-sm flex flex-col justify-between">
              <div>
                <h4 className="font-raleway text-xl mb-2">Ganho com Modelo 1 (Split)</h4>
                <p className="text-3xl font-bold text-primary">{formatCurrency(gainModel1)}</p>
                <p className="text-sm text-gray-500 italic mt-1">20% da receita total de {formatCurrency(totalRevenue)}</p>
              </div>
              <div className="mt-4 flex items-center justify-center bg-light-bg p-3 rounded-lg">
                <input
                  type="radio"
                  id="sim-model1-select"
                  name="partnership_model"
                  value="split"
                  checked={selectedModel === 'split'}
                  onChange={(e) => onSelectModel(e.target.value)}
                  className="w-5 h-5 accent-primary cursor-pointer"
                />
                <label htmlFor="sim-model1-select" className="ml-3 font-semibold text-text-main cursor-pointer">
                  Selecionar este modelo
                </label>
              </div>
            </div>
            <div className="bg-white p-6 rounded-xl shadow-sm flex flex-col justify-between">
              <div>
                <h4 className="font-raleway text-xl mb-2">Ganho com Modelo 2 (Assinatura)</h4>
                <p className="text-3xl font-bold text-primary">{formatCurrency(gainModel2)}</p>
                <p className="text-sm text-gray-500 italic mt-1">30% ({formatCurrency(totalRevenue * 0.4)}) - Assinatura ({formatCurrency(costModel2)})</p>
              </div>
              <div className="mt-4 flex items-center justify-center bg-light-bg p-3 rounded-lg">
                <input
                  type="radio"
                  id="sim-model2-select"
                  name="partnership_model"
                  value="signature"
                  checked={selectedModel === 'signature'}
                  onChange={(e) => onSelectModel(e.target.value)}
                  className="w-5 h-5 accent-primary cursor-pointer"
                />
                <label htmlFor="sim-model2-select" className="ml-3 font-semibold text-text-main cursor-pointer">
                  Selecionar este modelo
                </label>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const benefits = [
  { id: 'b1', value: 'Novas receitas', label: 'Receita recorrente com previsibilidade, sem criar uma nova operação interna' },
  { id: 'b2', value: 'Ocupação de espaços', label: 'Uso inteligente dos espaços, transformando ociosidade em valor educativo' },
  { id: 'b3', value: 'Aumento de matrículas', label: 'Aumento de matrículas e retenção, por diferenciação real no projeto pedagógico' },
  { id: 'b4', value: 'Educação Integral', label: 'Alinhamento com a Educação Integral, na prática, não só no discurso' },
  { id: 'b5', value: 'Simplificação da gestão', label: 'Gestão do contraturno simplificada, com menos sobrecarga da coordenação' },
  { id: 'b6', value: 'Reputação de inovação', label: 'Fortalecimento da reputação de inovação, com coerência e consistência' },
  { id: 'b7', value: 'Engajamento das famílias', label: 'Mais engajamento das famílias, por experiências que fazem sentido no tempo' },
];

const BenefitsSection: React.FC<BenefitsSectionProps> = ({ selectedBenefits, onToggleBenefit }) => {
  const [sectionRef, isVisible] = useFadeIn<HTMLElement>();

  const getFadeInClass = (isVisible: boolean) =>
    `transition-all duration-1000 ease-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`;

  return (
    <section
      ref={sectionRef}
      className={`w-full py-24 px-4 sm:px-8 bg-cover bg-center relative ${getFadeInClass(isVisible)}`}
      style={{
        backgroundImage: `url('/imagensFundo/img_caracol.jpg')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}
    >
      {/* overlay para legibilidade */}
      <div className="absolute inset-0 bg-white/70"></div>

      {/* conteúdo centralizado */}
      <div className="relative container mx-auto max-w-5xl">
        <h2 className="font-roboto-slab text-center text-[clamp(2.2rem,5vw,3.2rem)] leading-tight mb-4">
          O que sua escola ganha ao organizar o Tempo Integral como sistema?
        </h2>
        <p className="text-center text-2xl text-gray-600 max-w-2xl mx-auto mb-12">
          Quando o contraturno deixa de ser um conjunto de atividades isoladas
          e passa a ser organizado como um sistema educativo, a escola ganha:
        </p>

        <div className="flex flex-wrap justify-center gap-4">
          {benefits.map(benefit => (
            <div key={benefit.id} className="benefit-tag">
              <input
                type="checkbox"
                id={benefit.id}
                name="beneficios"
                value={benefit.value}
                className="peer hidden"
                checked={!!selectedBenefits[benefit.id]}
                onChange={() => onToggleBenefit(benefit.id)}
              />
              <label
                htmlFor={benefit.id}
                className="flex items-center justify-center min-w-[180px] h-min bg-accent-blue text-text-main px-6 py-3 rounded-full font-semibold transition-all duration-300 cursor-pointer text-center hover:bg-opacity-80 peer-checked:bg-secondary peer-checked:text-white peer-checked:scale-105 peer-checked:shadow-lg"
              >
                {benefit.label}
              </label>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer: React.FC<FooterProps> = ({ onOpenModal, isFormValid }) => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    role: '',
    school: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    if (name === 'phone') {
      setFormData(prev => ({ ...prev, [name]: formatPhoneNumber(value) }));
    } else {
      setFormData(prev => ({ ...prev, [name]: value }));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validatePhoneNumber(formData.phone)) {
      alert('Por favor, insira um telefone válido no formato (00) 99999-9999');
      return;
    }

    setIsSubmitting(true);
    
    try {
      const response = await fetch('https://script.google.com/macros/s/AKfycbwgfSc9VBe2FViJNYVCDiiWGHm_4cl3f9zSLsTCo4ZKNjieMwiJJbxjIXiXopgiHR3C/exec', {
        method: 'POST',
        mode: 'no-cors',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'contact',
          timestamp: new Date().toISOString(),
          ...formData
        })
      });

      alert('Mensagem enviada com sucesso! Nossa equipe entrará em contato em breve.');
      setFormData({ name: '', email: '', phone: '', role: '', school: '' });
    } catch (error) {
      console.error('Erro ao enviar formulário:', error);
      alert('Erro ao enviar mensagem. Por favor, tente novamente.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleButtonClick = () => {
    if (!isFormValid) {
      alert('Preencha os campos acima corretamente para conseguir clicar nesse botão.');
      return;
    }
    onOpenModal();
  };

  return (
    <footer id="contato" className="bg-light-bg py-20 px-4">
      <div className="container mx-auto max-w-4xl">
        <h2 className="font-roboto-slab text-4xl text-text-main mb-6 text-center">
          Vamos organizar juntos o Tempo Integral da sua escola?
        </h2>
        <p className="text-xl text-gray-700 max-w-2xl mx-auto mb-12 text-center">
          Preencha seus dados e nossa equipe entra em contato para compreender
          o contexto da sua instituição e desenhar uma proposta alinhada ao seu projeto pedagógico.

        </p>
        
        <form onSubmit={handleSubmit} className="max-w-2xl mx-auto bg-white p-8 rounded-2xl shadow-lg">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
              <label htmlFor="footer-name" className="block font-semibold mb-2" style={{ color: '#bf917f' }}>Nome Completo *</label>
              <input
                type="text"
                id="footer-name"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
                required
                className="w-full p-3 border-2 border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-secondary focus:outline-none bg-white text-text-main"
                placeholder="Seu nome"
              />
            </div>
            
            <div>
              <label htmlFor="footer-email" className="block font-semibold mb-2" style={{ color: '#bf917f' }}>Email *</label>
              <input
                type="email"
                id="footer-email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                required
                className="w-full p-3 border-2 border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-secondary focus:outline-none bg-white text-text-main"
                placeholder="seu@email.com"
              />
            </div>
            
            <div>
              <label htmlFor="footer-phone" className="block font-semibold mb-2" style={{ color: '#bf917f' }}>Telefone *</label>
              <input
                type="tel"
                id="footer-phone"
                name="phone"
                value={formData.phone}
                onChange={handleInputChange}
                required
                className="w-full p-3 border-2 border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-secondary focus:outline-none bg-white text-text-main"
                placeholder="(00) 00000-0000"
              />
            </div>
            
            <div>
              <label htmlFor="footer-role" className="block font-semibold mb-2" style={{ color: '#bf917f' }}>Cargo *</label>
              <input
                type="text"
                id="footer-role"
                name="role"
                value={formData.role}
                onChange={handleInputChange}
                required
                className="w-full p-3 border-2 border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-secondary focus:outline-none bg-white text-text-main"
                placeholder="Ex: Coordenador(a)"
              />
            </div>
          </div>
          
          <div className="mb-6">
            <label htmlFor="footer-school" className="block font-semibold mb-2" style={{ color: '#bf917f' }}>Nome da Escola *</label>
            <input
              type="text"
              id="footer-school"
              name="school"
              value={formData.school}
              onChange={handleInputChange}
              required
              className="w-full p-3 border-2 border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-secondary focus:outline-none bg-white text-text-main"
              placeholder="Nome da instituição"
            />
          </div>
          
          <div className="flex justify-center">
            <button
              type="submit"
              disabled={isSubmitting}
              className="py-4 px-10 rounded-full text-white font-bold text-lg bg-secondary transition-all transform shadow-md hover:shadow-lg hover:bg-opacity-90 hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? 'Enviando...' : 'Enviar Mensagem'}
            </button>
          </div>
        </form>
        
        <div className="flex justify-center gap-6 mt-12">
          <a href="https://www.instagram.com/labirintar/" target="_blank" rel="noopener noreferrer" className="text-secondary hover:text-primary transition-colors">
            <Instagram size={32} />
          </a>
          <a href="https://www.linkedin.com/company/labirintar/" target="_blank" rel="noopener noreferrer" className="text-secondary hover:text-primary transition-colors">
            <Linkedin size={32} />
          </a>
        </div>
      </div>
    </footer>
  );
};

// Função para formatar telefone brasileiro
const formatPhoneNumber = (value: string): string => {
  // Remove tudo que não é número
  const numbers = value.replace(/\D/g, '');

  // Limita a 11 dígitos (DDD + 9 dígitos)
  const limitedNumbers = numbers.slice(0, 11);

  // Aplica a máscara
  if (limitedNumbers.length <= 2) {
    return `(${limitedNumbers}`;
  } else if (limitedNumbers.length <= 7) {
    return `(${limitedNumbers.slice(0, 2)}) ${limitedNumbers.slice(2)}`;
  } else {
    return `(${limitedNumbers.slice(0, 2)}) ${limitedNumbers.slice(2, 7)}-${limitedNumbers.slice(7)}`;
  }
};

// Função para validar telefone brasileiro
const validatePhoneNumber = (value: string): boolean => {
  const numbers = value.replace(/\D/g, '');
  // Deve ter 10 ou 11 dígitos (com ou sem o 9)
  return numbers.length >= 10 && numbers.length <= 11;
};

const InputGroup: React.FC<{
  label: string;
  id: string;
  name: string;
  type?: string;
  placeholder?: string;
  required?: boolean;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  isPhone?: boolean;
}> = ({ label, id, name, type = 'text', placeholder, required = true, value, onChange, isPhone = false }) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (isPhone) {
      const formattedValue = formatPhoneNumber(e.target.value);
      e.target.value = formattedValue;
    }
    onChange(e);
  };

  return (
    <div>
      <label htmlFor={id} className="block font-semibold mb-2 text-text-main">{label}</label>
      <input
        type={type}
        id={id}
        name={name}
        placeholder={placeholder}
        required={required}
        value={value}
        onChange={handleChange}
        className="w-full p-3 border-2 border-accent-blue rounded-lg text-lg focus:ring-2 focus:ring-primary focus:outline-none bg-white"
      />
    </div>
  );
};

const ContactModal: React.FC<ContactModalProps> = ({ isOpen, onClose, contactData, onContactDataChange, onSubmit }) => {
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 transition-opacity duration-300"
      onClick={onClose}
    >
      <div
        className="bg-white p-8 rounded-2xl shadow-xl w-11/12 max-w-md m-4"
        onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside
      >
        <h3 className="font-roboto-slab text-2xl mb-2">Informações de Contato</h3>
        <p className="text-gray-600 mb-6">Deixe seus dados para que nossa equipe possa retornar.</p>

        <form id="commercial-form-modal-part" onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
          <div className="space-y-4">
            <InputGroup label="Seu nome" id="contact-name" name="name" value={contactData.name} onChange={onContactDataChange} />
            <InputGroup label="E-mail" id="contact-email" name="email" type="email" placeholder="seu@email.com" value={contactData.email} onChange={onContactDataChange} />
            <InputGroup label="Telefone" id="contact-phone" name="phone" type="tel" placeholder="(11) 99999-9999" value={contactData.phone} onChange={onContactDataChange} isPhone={true} />
            <InputGroup label="Cargo" id="contact-role" name="role" value={contactData.role} onChange={onContactDataChange} />
            <InputGroup label="Escola" id="contact-school" name="school" value={contactData.school} onChange={onContactDataChange} />
          </div>
        </form>

        <button
          type="button"
          onClick={onSubmit}
          className="w-full mt-8 py-4 px-10 rounded-full text-white font-bold text-lg bg-primary hover:bg-opacity-90 transition-all transform hover:-translate-y-1 shadow-md hover:shadow-lg"
        >
          Enviar
        </button>
      </div>
    </div>
  );
};

// =================================================================================================
// MAIN APP COMPONENT
// =================================================================================================
const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbwgfSc9VBe2FViJNYVCDiiWGHm_4cl3f9zSLsTCo4ZKNjieMwiJJbxjIXiXopgiHR3C/exec';

const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const debounceTimer = useRef<number | null>(null);
  const sessionId = useRef<string | null>(null);

  // --- State for all form fields ---
  const [rankings, setRankings] = useState<Record<string, string>>({
    diferenciar: '',
    reter: '',
    espacos: '',
  });
  const [openChallenge, setOpenChallenge] = useState('');
  const [selectedExperiences, setSelectedExperiences] = useState<Record<string, boolean>>({});
  const [selectedPartnershipModel, setSelectedPartnershipModel] = useState('');
  const [selectedBenefits, setSelectedBenefits] = useState<Record<string, boolean>>({});
  const [simTotalAlunos, setSimTotalAlunos] = useState('');
  const [simMetaConversao, setSimMetaConversao] = useState(10);
  const [simFrequenciaSemanal, setSimFrequenciaSemanal] = useState(2);
  const [simMensalidadeCurricular, setSimMensalidadeCurricular] = useState('');
  const [contactData, setContactData] = useState({
    name: '', email: '', phone: '', role: '', school: ''
  });

  // --- Enable smooth scrolling globally ---
  useEffect(() => {
    document.documentElement.style.scrollBehavior = 'smooth';
    return () => {
      document.documentElement.style.scrollBehavior = 'auto';
    };
  }, []);

  // --- Generate unique session ID on first load ---
  useEffect(() => {
    if (!sessionId.current) {
      sessionId.current = crypto.randomUUID();
    }
  }, []);

  // --- Calculated values from simulator ---
  const {
    alunosExtra, mensalidadeExtra, percentualCurricular, totalRevenue, gainModel1, gainModel2
  } = useMemo(() => {
    const ticketPrices: { [key: number]: number } = { 1: 298, 2: 447, 3: 759, 4: 948, 5: 948 };
    const totalAlunosNum = Number(simTotalAlunos) || 0;
    const mensalidadeCurricularNum = Number(simMensalidadeCurricular) || 0;

    const alunosExtra = Math.round((totalAlunosNum * simMetaConversao) / 100);
    const mensalidadeExtra = ticketPrices[simFrequenciaSemanal];
    const percentualCurricular = (!mensalidadeCurricularNum || mensalidadeCurricularNum <= 0) ? '-' : `${((mensalidadeExtra / mensalidadeCurricularNum) * 100).toFixed(1)}%`;
    const totalRevenue = alunosExtra * mensalidadeExtra;
    const gainModel1 = totalRevenue * 0.20;
    const costModel2 = (mensalidadeCurricularNum > 0 ? mensalidadeCurricularNum : 2000);
    const gainModel2 = (totalRevenue * 0.30) - costModel2;

    return { alunosExtra, mensalidadeExtra, percentualCurricular, totalRevenue, gainModel1, gainModel2 };
  }, [simTotalAlunos, simMetaConversao, simFrequenciaSemanal, simMensalidadeCurricular]);


  const portfolioItemTitles = useMemo(() => portfolioData.map(item => item.title), []);

  const isFormValid = useMemo(() => {
    const isProblemSectionValid = Object.values(rankings).every(r => r !== '') && openChallenge.trim() !== '';
    const isPortfolioSectionValid = Object.values(selectedExperiences).some(v => v);
    const isPartnershipSectionValid = selectedPartnershipModel !== '';
    const isBenefitsSectionValid = Object.values(selectedBenefits).some(v => v);
    const isSimulatorValid = simTotalAlunos.trim() !== '' && simMensalidadeCurricular.trim() !== '';

    return isProblemSectionValid && isPortfolioSectionValid && isPartnershipSectionValid && isBenefitsSectionValid && isSimulatorValid;
  }, [rankings, openChallenge, selectedExperiences, selectedPartnershipModel, selectedBenefits, simTotalAlunos, simMensalidadeCurricular]);

  // --- Data Syncing with Google Sheets ---
  const syncDataWithSheet = useCallback(() => {
    if (!APPS_SCRIPT_URL.startsWith('https://')) {
      console.warn('APPS_SCRIPT_URL is not set. Data will not be saved.');
      return;
    }

    const fullFormData = {
      SessionID: sessionId.current,
      Timestamp: new Date().toISOString(),
      ContatoNome: contactData.name,
      ContatoEmail: contactData.email,
      ContatoTelefone: contactData.phone,
      ContatoCargo: contactData.role,
      ContatoEscola: contactData.school,
      RankingDiferenciar: rankings.diferenciar,
      RankingReter: rankings.reter,
      RankingEspacos: rankings.espacos,
      DesafioAberto: openChallenge,
      ExperienciasSelecionadas: Object.keys(selectedExperiences).filter(k => selectedExperiences[k]).join(', '),
      SimuladorTotalAlunos: simTotalAlunos,
      SimuladorMetaConversao: simMetaConversao,
      SimuladorFrequenciaSemanal: simFrequenciaSemanal,
      SimuladorMensalidadeCurricular: simMensalidadeCurricular,
      CalculadoAlunosExtra: alunosExtra,
      CalculadoMensalidadeExtra: mensalidadeExtra,
      CalculadoPercentualCurricular: percentualCurricular,
      CalculadoReceitaTotal: totalRevenue,
      CalculadoGanhoModelo1: gainModel1,
      CalculadoGanhoModelo2: gainModel2,
      ModeloParceriaSelecionado: selectedPartnershipModel,
      BeneficiosSelecionados: Object.keys(selectedBenefits).filter(k => selectedBenefits[k]).map(id => benefits.find(b => b.id === id)?.label || '').join(', '),
    };

    fetch(APPS_SCRIPT_URL, {
      method: 'POST',
      body: JSON.stringify(fullFormData),
      headers: {
        'Content-Type': 'text/plain;charset=utf-8',
      },
    })
      .then(response => response.json())
      .then(data => console.log('Sync success:', data))
      .catch(error => console.error('Sync error:', error));

  }, [
    contactData, rankings, openChallenge, selectedExperiences,
    simTotalAlunos, simMetaConversao, simFrequenciaSemanal, simMensalidadeCurricular,
    selectedPartnershipModel, selectedBenefits,
    alunosExtra, mensalidadeExtra, percentualCurricular, totalRevenue, gainModel1, gainModel2
  ]);

  // Debounced useEffect to sync data on any change
  /*useEffect(() => {
      if (debounceTimer.current) {
          clearTimeout(debounceTimer.current);
      }
      debounceTimer.current = window.setTimeout(() => {
          syncDataWithSheet();
      }, 1500); // Wait 1.5s after user stops typing

      return () => {
          if (debounceTimer.current) {
              clearTimeout(debounceTimer.current);
          }
      };
  }, [syncDataWithSheet]);*/




  const handleToggleExperience = useCallback((title: string) => {
    setSelectedExperiences(prev => ({ ...prev, [title]: !prev[title] }));
  }, []);

  const handleToggleSelectAllExperiences = useCallback(() => {
    const numSelected = Object.values(selectedExperiences).filter(Boolean).length;
    const allSelected = numSelected === portfolioItemTitles.length;
    const newSelectedItems: Record<string, boolean> = {};
    if (!allSelected) {
      portfolioItemTitles.forEach(title => {
        newSelectedItems[title] = true;
      });
    }
    setSelectedExperiences(newSelectedItems);
  }, [selectedExperiences, portfolioItemTitles]);

  const handleDeselectAllExperiences = useCallback(() => {
    setSelectedExperiences({});
  }, []);

  const handleToggleBenefit = useCallback((id: string) => {
    setSelectedBenefits(prev => ({ ...prev, [id]: !prev[id] }));
  }, []);

  const handleContactDataChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setContactData(prev => ({ ...prev, [name]: value }));
  };

  const handleOpenModal = useCallback(() => setIsModalOpen(true), []);
  const handleCloseModal = useCallback(() => setIsModalOpen(false), []);

  const handleFinalSubmit = () => {
    // Validar telefone antes de enviar
    if (!validatePhoneNumber(contactData.phone)) {
      alert("Por favor, insira um telefone válido no formato (00) 99999-9999");
      return;
    }

    // Final sync before submission
    syncDataWithSheet();

    alert("Obrigado! Suas respostas foram enviadas com sucesso.");
    handleCloseModal();

    // Reset all state
    setRankings({ diferenciar: '', reter: '', espacos: '' });
    setOpenChallenge('');
    setSelectedExperiences({});
    setSelectedPartnershipModel('');
    setSelectedBenefits({});
    setSimTotalAlunos('');
    setSimMetaConversao(10);
    setSimFrequenciaSemanal(2);
    setSimMensalidadeCurricular('');
    setContactData({ name: '', email: '', phone: '', role: '', school: '' });

    // Optional: Reload to start a fresh session
    // window.location.reload(); 
  };

  return (
    <div className="font-raleway overflow-x-hidden min-h-screen flex flex-col">
      <TopBar />
      <Hero />
      <main className="flex-1">
        <ChallengeIntroSection />
        <ProblemSection
          rankings={rankings}
          setRankings={setRankings}
          openChallenge={openChallenge}
          setOpenChallenge={setOpenChallenge}
        />
        <SolutionIntroSection />
        <WayOfDoingSection />
        {/* <VisionSection />
        <SolutionSection /> */}
        <PortfolioSection
          selectedItems={selectedExperiences}
          onToggleItem={handleToggleExperience}
          onToggleSelectAll={handleToggleSelectAllExperiences}
          onDeselectAll={handleDeselectAllExperiences}
          portfolioItemTitles={portfolioItemTitles}
        />
        {/*<PartnershipSection />
        <SimulatorSection
          totalAlunos={simTotalAlunos}
          setTotalAlunos={setSimTotalAlunos}
          metaConversao={simMetaConversao}
          setMetaConversao={setSimMetaConversao}
          frequenciaSemanal={simFrequenciaSemanal}
          setFrequenciaSemanal={setSimFrequenciaSemanal}
          mensalidadeCurricular={simMensalidadeCurricular}
          setMensalidadeCurricular={setSimMensalidadeCurricular}
          selectedModel={selectedPartnershipModel}
          onSelectModel={setSelectedPartnershipModel}
        />*/}
        {/* <BenefitsSection
          selectedBenefits={selectedBenefits}
          onToggleBenefit={handleToggleBenefit}
        /> */}
      </main>
      <Footer
        onOpenModal={handleOpenModal}
        isFormValid={isFormValid}
      />
      <ContactModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        contactData={contactData}
        onContactDataChange={handleContactDataChange}
        onSubmit={handleFinalSubmit}
      />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);