import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

const Header = () => {
    const [menuOpen, setMenuOpen] = useState(false);

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

    const handleLinkClick = () => {
        setMenuOpen(false);
    };

    return (
        <header>
            <div className="container">
                <nav>
                    <a href="#hero" className="logo" onClick={handleLinkClick}>
                        <img src="./public/images/Botassinelogo.png" alt="Botassine Logo" />
                        <span>Botassine</span>
                    </a>
                    <ul id="main-nav" className={`nav-links ${menuOpen ? 'is-open' : ''}`}>
                        <li><a href="#about" onClick={handleLinkClick}>Sobre</a></li>
                        <li><a href="#services" onClick={handleLinkClick}>Serviços</a></li>
                        <li><a href="#testimonials" onClick={handleLinkClick}>Depoimentos</a></li>
                        <li><a href="#clients" onClick={handleLinkClick}>Clientes</a></li>
                        <li className="cta-link"><a href="https://wa.me/5565996136437" target="_blank" rel="noopener noreferrer">Vamos Conversar</a></li>
                    </ul>
                    <button className={`menu-toggle ${menuOpen ? 'is-active' : ''}`} aria-label="Toggle navigation" onClick={() => setMenuOpen(!menuOpen)} aria-expanded={menuOpen} aria-controls="main-nav">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </nav>
            </div>
        </header>
    );
};


const Hero = () => (
    <section id="hero">
        <div className="container hero-layout">
            <div className="hero-content">
                <h1 className="hero-h1-animate">Inteligência Estratégica.</h1>
                <p>Vamos além do BPO para integrar visão estratégica e execução impecável. Desenhamos a arquitetura financeira, administrativa e operacional que o seu negócio precisa para escalar com solidez e liderar o mercado.</p>
            </div>
            <div className="hero-image-container fade-in-up">
                <img src="./public/images/apertodemao.png" alt="Espaço reservado para uma imagem da equipe Botassine" />
            </div>
        </div>
    </section>
);

const About = () => (
    <section id="about" className="fade-in-up">
        <div className="container about-layout">
            <div className="about-image-container">
                 <img src="./public/images/lucaotrabalho.jpg" alt="Espaço reservado para uma foto do escritório ou do fundador" />
            </div>
            <div className="about-content">
                <h2 className="fade-in">Arquitetos do crescimento. Parceiros na sua visão.</h2>
                <p>
                    A Botassine nasceu de uma inconformidade: o modelo tradicional de BPO limita, nós impulsionamos. Acreditamos que a excelência operacional não é um destino, mas um vetor de crescimento contínuo. Atuamos como uma extensão da sua liderança, integrando inteligência de mercado e execução precisa para construir operações resilientes, eficientes e prontas para o amanhã. O nosso foco é a sua performance, para que o seu seja a liderança.
                </p>
            </div>
        </div>
    </section>
);

const services = [
    { 
        icon: <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 14.09c-.38.21-.8.21-1.18 0l-1.3-2.25c-.21-.38-.21-.8 0-1.18l2.25-1.3c.38-.21.8-.21 1.18 0l1.3 2.25c.21.38.21.8 0 1.18l-2.25 1.3zm-3.21-3.21c-.38.21-.8.21-1.18 0l-1.3-2.25c-.21-.38-.21-.8 0-1.18l2.25-1.3c.38-.21.8-.21 1.18 0l1.3 2.25c.21.38.21.8 0 1.18l-2.25 1.3z" /><path d="M11.5 8.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm0 8c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5z"/></svg>,
        title: "Inteligência Financeira",
        description: "Estratégias de capital para crescimento sustentável. Mapeamos o DNA financeiro do seu negócio para otimizar a alocação de recursos, garantir previsibilidade e transformar dados em decisões estratégicas."
    },
    { 
        icon: <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM9 17v-2h6v2H9zm6-4H9v-2h6v2zm-6-4h3V7h-3v2z"/></svg>,
        title: "Excelência Administrativa",
        description: "O back-office como motor de performance. Desenhamos processos e rotinas que eliminam o atrito operacional, liberando sua equipe para focar em inovação e crescimento."
    },
    { 
        icon: <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"/></svg>,
        title: "Estratégia e Performance",
        description: "Do plano à execução, sem desvios. Construímos o mapa estratégico do seu crescimento, alinhando visão, metas e operações para garantir resultados mensuráveis e uma trajetória de sucesso a longo prazo."
    },
    { 
        icon: <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>,
        title: "Inteligência de Clientes",
        description: "A ciência por trás da lealdade. Estruturamos a jornada do seu cliente com base em dados e processos, convertendo interações em relacionamentos duradouros e maximizando o valor da sua marca."
    },
    { 
        icon: <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 10H8V8h4v4zm4-2h-2V8h2v2zm0-4h-2V6h2v2z"/></svg>,
        title: "Comunicação Estratégica",
        description: "Sua marca, sua autoridade. Em parceria com a Goiabr, alinhamos sua comunicação ao seu posicionamento estratégico, construindo uma narrativa de marca que gera impacto, atrai os clientes certos e consolida sua liderança.",
        className: "marketing-card"
    },
     { 
        icon: <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM9 17v-2h6v2H9zm6-4H9v-2h6v2zm-6-4h3V7h-3v2z"/></svg>,
        title: "Excelência Administrativa",
        description: "O back-office como motor de performance. Desenhamos processos e rotinas que eliminam o atrito operacional, liberando sua equipe para focar em inovação e crescimento."
    }
]

const Services = () => (
    <section id="services" className="fade-in-up">
        <div className="container">
            <h2 className="fade-in">Nossa Arquitetura de Performance</h2>
            <p>Cada serviço é uma peça fundamental na construção de um negócio de alto desempenho. Integramos nossas frentes de atuação para entregar uma operação coesa, inteligente e com total clareza de resultados.</p>
            <div className="services-grid">
                {services.map(service => (
                    <div className={`service-card ${service.className || ''}`} key={service.title}>
                        <div className="service-icon-wrapper">
                           {service.icon}
                        </div>
                        <h3>{service.title}</h3>
                        <p>{service.description}</p>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

const testimonials = [
    {
        quote: "A Botassine nos deu clareza estratégica. A visibilidade financeira que ganhamos foi um divisor de águas para a tomada de decisões e para o nosso crescimento acelerado.",
        name: "João Silva",
        company: "CEO, Tech Inova"
    },
    {
        quote: "Mais que uma consultoria, um parceiro de execução. A Botassine reestruturou nossas operações, eliminou gargalos e nos permitiu focar no que realmente importa: escalar o negócio.",
        name: "Maria Oliveira",
        company: "Diretora, Criativa Design"
    },
    {
        quote: "O trabalho da Botassine se refletiu diretamente na experiência do nosso cliente. O aumento da lealdade e do faturamento foi a consequência natural de uma operação mais inteligente.",
        name: "Carlos Pereira",
        company: "Gerente, Varejo Total"
    }
];

const Testimonials = () => (
    <section id="testimonials" className="fade-in-up">
        <div className="container">
            <h2 className="fade-in">Onde a transformação acontece</h2>
            <div className="testimonials-grid">
                {testimonials.map((testimonial, index) => (
                    <div className="testimonial-card" key={index}>
                        <div className="testimonial-quote-icon" aria-hidden="true">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="currentColor"><path d="M6 17h3l2-4V7H5v6h3l-2 4zM14 17h3l2-4V7h-6v6h3l-2 4z"/></svg>
                        </div>
                        <blockquote>{testimonial.quote}</blockquote>
                        <cite>
                            <strong>{testimonial.name}</strong>
                            <span>{testimonial.company}</span>
                        </cite>
                    </div>
                ))}
            </div>
        </div>
    </section>
);

const clientLogos = [
    { name: "Client 1", src: "./images/client-logo-1-placeholder.png" },
    { name: "Client 2", src: "./images/client-logo-2-placeholder.png" },
    { name: "Client 3", src: "./images/client-logo-3-placeholder.png" },
    { name: "Client 4", src: "./images/client-logo-4-placeholder.png" },
    { name: "Client 5", src: "./images/client-logo-5-placeholder.png" },
];

const Clients = () => (
    <section id="clients" className="fade-in-up">
        <div className="container">
            <h2 className="fade-in">A confiança de quem lidera</h2>
            <p>Orgulho de construir futuros de sucesso ao lado de empresas que, como nós, não se contentam com o status quo.</p>
            <div className="clients-grid">
                {clientLogos.map(logo => (
                    <div className="client-logo" key={logo.name}>
                        <img src={logo.src} alt={`Logo da empresa ${logo.name}`} />
                    </div>
                ))}
            </div>
        </div>
    </section>
);


const Contact = () => (
    <section id="contact" className="fade-in-up">
        <div className="container">
             <div className="contact-content">
                <h2>Vamos redesenhar o futuro da sua operação?</h2>
                <a href="https://wa.me/5565996136437" className="cta-button" target="_blank" rel="noopener noreferrer">Vamos conversar</a>
            </div>
        </div>
    </section>
);


const Footer = () => (
    <footer>
        <div className="container">
            <div className="footer-main">
                <div className="footer-about">
                     <a href="#hero" className="logo">
                        <img src="./public/images/Botassinelogo.png" alt="Botassine Logo" />
                        <span>Botassine</span>
                    </a>
                    <p>&copy; {new Date().getFullYear()} Botassine. Todos os direitos reservados.</p>
                </div>
                <div className="footer-nav">
                    <h4>Navegação</h4>
                    <ul>
                        <li><a href="#about">Sobre</a></li>
                        <li><a href="#services">Serviços</a></li>
                        <li><a href="#testimonials">Depoimentos</a></li>
                        <li><a href="#clients">Clientes</a></li>
                    </ul>
                </div>
                <div className="footer-social">
                    <h4>Siga-nos</h4>
                    <div className="social-links">
                        <a href="https://www.instagram.com/botassineltda/" target="_blank" rel="noopener noreferrer" aria-label="Visite nosso Instagram">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8A3.6 3.6 0 0 0 20 16.4V7.6A3.6 3.6 0 0 0 16.4 4H7.6m4.6 3a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m4.5-2.5a1.2 1.2 0 0 1 1.2 1.2 1.2 1.2 0 0 1-1.2 1.2 1.2 1.2 0 0 1-1.2-1.2 1.2 1.2 0 0 1 1.2-1.2z"/></svg>
                        </a>
                    </div>
                </div>
            </div>
            <div className="footer-bottom">
                <p>
                    desenvolvido com 💚 pela <a href="https://goiabr.com.br" target="_blank" rel="noopener noreferrer">Goiabr</a>
                </p>
            </div>
        </div>
    </footer>
);

const WhatsAppIcon = () => (
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.894 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 4.315 1.919 6.066l-1.21 4.383 4.555-1.196z"/>
    </svg>
);


const WhatsAppButton = () => (
    <a 
      href="https://wa.me/5565996136437" 
      className="whatsapp-fab" 
      target="_blank" 
      rel="noopener noreferrer"
      aria-label="Entrar em contato pelo WhatsApp"
    >
      <WhatsAppIcon />
    </a>
);


const App = () => {
    return (
        <>
            <Header />
            <main>
                <Hero />
                <About />
                <Services />
                <Testimonials />
                <Clients />
                <Contact />
            </main>
            <Footer />
            <WhatsAppButton />
        </>
    );
};

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