// sections.jsx — proof, how it works, modalidades, testimonials, FAQ, CTA, location, footer
// Dados da unidade vêm de useUnidade().

function ProofStrip() {
    const [r0, s0] = useReveal(0);
    const [r1, s1] = useReveal(100);
    const [r2, s2] = useReveal(200);
    const [r3, s3] = useReveal(300);
    const reveals = [[r0, s0], [r1, s1], [r2, s2], [r3, s3]];
    const stats = [
        { v: '100%', l: 'avaliação presencial gratuita' },
        { v: 'ZERO', l: 'exposição em classificados' },
        { v: '20 min', l: 'venda na modalidade Turbo' },
        { v: 'R$ 0', l: 'você só paga quando vender' },
    ];
    return (
        <section style={{ background: '#2D2D2D', padding: '48px clamp(20px, 6vw, 80px)' }}>
            <div style={{
                maxWidth: 1240, margin: '0 auto',
                display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 24,
            }}>
                {stats.map((s, i) => (
                    <div key={i} ref={reveals[i][0]} style={{ textAlign: 'center', borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.08)' : 'none', padding: '8px 16px', ...reveals[i][1] }}>
                        <div style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 700, fontSize: 'clamp(28px, 3vw, 38px)', color: '#E31018' }}>{s.v}</div>
                        <div style={{ fontFamily: "'Roboto',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>{s.l}</div>
                    </div>
                ))}
            </div>
        </section>
    );
}

function HowItWorks() {
    const [rTitle, sTitle] = useReveal(0);
    const [r0, s0] = useReveal(80);
    const [r1, s1] = useReveal(160);
    const [r2, s2] = useReveal(240);
    const [r3, s3] = useReveal(320);
    const stepReveals = [[r0, s0], [r1, s1], [r2, s2], [r3, s3]];
    const steps = [
        { n: '01', icon: 'calendar', title: 'Agende online', desc: 'Preencha o formulário em 2 minutos e escolha o melhor horário.' },
        { n: '02', icon: 'car', title: 'Leve seu carro', desc: 'Avaliação presencial gratuita, com inspeção técnica completa.' },
        { n: '03', icon: 'handshake', title: 'Escolha a modalidade', desc: 'Venda Turbo (à vista) ou Anúncio Carflix (maior valor).' },
        { n: '04', icon: 'money', title: 'Receba o pagamento', desc: 'No mesmo dia para Turbo. Sem taxas antecipadas, sem burocracia.' },
    ];
    return (
        <section id="comofunciona" style={{ background: '#fff', padding: '88px clamp(20px, 6vw, 80px)' }}>
            <div style={{ maxWidth: 1240, margin: '0 auto' }}>
                <div ref={rTitle} style={{ textAlign: 'center', marginBottom: 56, ...sTitle }}>
                    <div style={{
                        display: 'inline-block', background: 'rgba(227,16,24,0.08)', color: '#E31018',
                        borderRadius: 999, padding: '5px 14px', fontSize: 12, fontWeight: 500,
                        fontFamily: "'Roboto',sans-serif", marginBottom: 14,
                        textTransform: 'uppercase', letterSpacing: '0.06em',
                    }}>Como funciona</div>
                    <h2 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 400, fontSize: 'clamp(26px, 3vw, 36px)', color: '#2D2D2D' }}>
                        Venda seu carro em <span style={{ color: '#E31018', fontWeight: 500 }}>4 passos simples</span>
                    </h2>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 18 }}>
                    {steps.map((s, i) => (
                        <div key={s.n} ref={stepReveals[i][0]} style={{
                            background: '#F9F9F9', borderRadius: 16, padding: '28px 24px',
                            position: 'relative', display: 'flex', flexDirection: 'column', gap: 14,
                            ...stepReveals[i][1],
                        }}>
                            <div style={{
                                position: 'absolute', top: 22, right: 22,
                                fontFamily: "'Roboto',sans-serif", fontWeight: 700, fontSize: 36,
                                color: 'rgba(227,16,24,0.1)', lineHeight: 1,
                            }}>{s.n}</div>
                            <div style={{
                                width: 44, height: 44, borderRadius: 12,
                                background: '#fff', border: '1px solid #E0E0E0',
                                display: 'flex', alignItems: 'center', justifyContent: 'center',
                            }}>
                                <Icon name={s.icon} size={22} color="#E31018" />
                            </div>
                            <div style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 500, fontSize: 17, color: '#2D2D2D' }}>{s.title}</div>
                            <div style={{ fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#5B5B5B', lineHeight: 1.6 }}>{s.desc}</div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

function Modalidades({ onCTA }) {
    const [rContent, sContent] = useReveal(0);
    return (
        <section id="modalidades" style={{ background: '#F9F9F9', padding: '88px clamp(20px, 6vw, 80px)' }}>
            <div ref={rContent} style={{ maxWidth: 1240, margin: '0 auto', ...sContent }}>
                <div style={{ textAlign: 'center', marginBottom: 48 }}>
                    <div style={{
                        display: 'inline-block', background: 'rgba(227,16,24,0.08)', color: '#E31018',
                        borderRadius: 999, padding: '5px 14px', fontSize: 12, fontWeight: 500,
                        fontFamily: "'Roboto',sans-serif", marginBottom: 14,
                        textTransform: 'uppercase', letterSpacing: '0.06em',
                    }}>Modalidades</div>
                    <h2 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 400, fontSize: 'clamp(26px, 3vw, 36px)', color: '#2D2D2D' }}>
                        Escolha o caminho certo para <span style={{ color: '#E31018', fontWeight: 500 }}>o seu perfil</span>
                    </h2>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 20 }}>
                    <div style={{
                        background: '#fff', borderRadius: 16, padding: 32,
                        border: '2px solid #E31018', position: 'relative',
                        boxShadow: '0 8px 24px rgba(227,16,24,0.08)',
                    }}>
                        <span style={{
                            position: 'absolute', top: -12, left: 24,
                            background: '#E31018', color: '#fff',
                            fontFamily: "'Roboto',sans-serif", fontSize: 11, fontWeight: 700,
                            padding: '5px 12px', borderRadius: 999, letterSpacing: '0.05em',
                            textTransform: 'uppercase',
                        }}>Mais rápido</span>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14, marginTop: 4 }}>
                            <Icon name="sparkle" size={28} color="#E31018" />
                            <h3 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 500, fontSize: 22, color: '#2D2D2D' }}>Venda Turbo</h3>
                        </div>
                        <p style={{ fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#5B5B5B', lineHeight: 1.6, marginBottom: 18 }}>
                            Proposta à vista em até 20 minutos. Pagamento no mesmo dia.
                        </p>
                        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 22 }}>
                            {['Avaliação presencial gratuita', 'Proposta à vista em minutos', 'Pagamento imediato', 'Sem exposição online'].map(t => (
                                <li key={t} style={{ display: 'flex', gap: 10, fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#2D2D2D' }}>
                                    <Icon name="check" size={16} color="#0C7110" stroke={2.6} />
                                    {t}
                                </li>
                            ))}
                        </ul>
                        <button onClick={onCTA} style={{
                            width: '100%', padding: '12px 20px', borderRadius: 999,
                            background: '#E31018', color: '#fff', border: 'none',
                            fontFamily: "'Roboto',sans-serif", fontSize: 14, fontWeight: 500,
                            cursor: 'pointer', boxShadow: '0 4px 8.9px rgba(227,16,24,0.25)',
                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                        }}>
                            Agendar Venda Turbo
                            <Icon name="arrowRight" size={14} color="#fff" stroke={2.4} />
                        </button>
                    </div>

                    <div style={{
                        background: '#fff', borderRadius: 16, padding: 32,
                        border: '1px solid #E0E0E0', position: 'relative',
                    }}>
                        <span style={{
                            position: 'absolute', top: -12, left: 24,
                            background: '#2D2D2D', color: '#fff',
                            fontFamily: "'Roboto',sans-serif", fontSize: 11, fontWeight: 700,
                            padding: '5px 12px', borderRadius: 999, letterSpacing: '0.05em',
                            textTransform: 'uppercase',
                        }}>Maior valor</span>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14, marginTop: 4 }}>
                            <Icon name="handshake" size={28} color="#2D2D2D" />
                            <h3 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 500, fontSize: 22, color: '#2D2D2D' }}>Anúncio Carflix</h3>
                        </div>
                        <p style={{ fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#5B5B5B', lineHeight: 1.6, marginBottom: 18 }}>
                            Continue usando seu carro enquanto nossa equipe anuncia e negocia por você.
                        </p>
                        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 22 }}>
                            {['Fotos profissionais do veículo', 'Anúncio nas melhores plataformas', 'Negociação feita pela Carflix', 'Você continua usando o carro'].map(t => (
                                <li key={t} style={{ display: 'flex', gap: 10, fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#2D2D2D' }}>
                                    <Icon name="check" size={16} color="#0C7110" stroke={2.6} />
                                    {t}
                                </li>
                            ))}
                        </ul>
                        <button onClick={onCTA} style={{
                            width: '100%', padding: '12px 20px', borderRadius: 999,
                            background: '#2D2D2D', color: '#fff', border: 'none',
                            fontFamily: "'Roboto',sans-serif", fontSize: 14, fontWeight: 500,
                            cursor: 'pointer',
                            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                        }}>
                            Agendar Anúncio Carflix
                            <Icon name="arrowRight" size={14} color="#fff" stroke={2.4} />
                        </button>
                    </div>
                </div>
            </div>
        </section>
    );
}

function Testimonials() {
    const { unidade } = useUnidade();
    const [rTitle, sTitle] = useReveal(0);
    const items = unidade.depoimentos || [];

    if (items.length === 0) return null;

    return (
        <section id="depoimentos" style={{ background: '#fff', padding: '88px clamp(20px, 6vw, 80px)' }}>
            <div style={{ maxWidth: 1240, margin: '0 auto' }}>
                <div ref={rTitle} style={{ textAlign: 'center', marginBottom: 48, ...sTitle }}>
                    <div style={{
                        display: 'inline-block', background: 'rgba(227,16,24,0.08)', color: '#E31018',
                        borderRadius: 999, padding: '5px 14px', fontSize: 12, fontWeight: 500,
                        fontFamily: "'Roboto',sans-serif", marginBottom: 14,
                        textTransform: 'uppercase', letterSpacing: '0.06em',
                    }}>Depoimentos</div>
                    <h2 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 400, fontSize: 'clamp(26px, 3vw, 36px)', color: '#2D2D2D' }}>
                        Histórias reais de quem <span style={{ color: '#E31018', fontWeight: 500 }}>vendeu com a gente</span>
                    </h2>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
                    {items.map((t, i) => (
                        <div key={i} style={{
                            background: '#F9F9F9', borderRadius: 16, padding: 26,
                            display: 'flex', flexDirection: 'column', gap: 14,
                            opacity: 0, transform: 'translateY(22px)',
                            animation: `revealUp 0.55s ease ${i * 100}ms forwards`,
                        }}>
                            <div style={{ display: 'flex', gap: 2 }}>
                                {Array.from({ length: t.rating }).map((_, j) => (
                                    <Icon key={j} name="star" size={18} color="#E31018" />
                                ))}
                            </div>
                            <p style={{ fontFamily: "'Roboto',sans-serif", fontSize: 15, color: '#2D2D2D', lineHeight: 1.6, flex: 1 }}>
                                "{t.text}"
                            </p>
                            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 4 }}>
                                <div style={{
                                    width: 40, height: 40, borderRadius: '50%',
                                    background: '#E31018', color: '#fff',
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    fontFamily: "'Roboto',sans-serif", fontWeight: 700, fontSize: 15,
                                }}>{t.name[0]}</div>
                                <div style={{ fontFamily: "'Roboto',sans-serif", fontSize: 14, fontWeight: 500, color: '#2D2D2D' }}>{t.name}</div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}

function FaqItem({ q, a, defaultOpen }) {
    const [open, setOpen] = React.useState(!!defaultOpen);
    return (
        <div style={{
            border: '1px solid #E0E0E0', borderRadius: 12, overflow: 'hidden',
            background: '#fff', transition: 'all 200ms',
        }}>
            <button onClick={() => setOpen(!open)} style={{
                width: '100%', padding: '18px 22px', background: 'none', border: 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                cursor: 'pointer', textAlign: 'left', gap: 16,
            }}>
                <span style={{ fontFamily: "'Roboto',sans-serif", fontSize: 15, fontWeight: 500, color: '#2D2D2D' }}>{q}</span>
                <Icon name={open ? 'minus' : 'plus'} size={18} color="#E31018" stroke={2.4} />
            </button>
            <div style={{
                maxHeight: open ? 240 : 0, overflow: 'hidden',
                transition: 'max-height 280ms ease',
            }}>
                <div style={{
                    padding: '0 22px 18px',
                    fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#5B5B5B', lineHeight: 1.65,
                }}>{a}</div>
            </div>
        </div>
    );
}

function FAQ() {
    const { unidade } = useUnidade();
    const [rContent, sContent] = useReveal(0);
    const items = [
        { q: 'Preciso pagar alguma taxa antecipada?', a: 'Não. A Carflix não cobra nada antecipado. Nossa comissão é descontada somente após a conclusão da venda — você recebe o valor líquido no mesmo dia.', defaultOpen: true },
        { q: 'Qualquer carro é aceito?', a: 'Avaliamos veículos em diferentes condições e idades. A aceitação depende da inspeção técnica presencial e da modalidade escolhida. Marque sua avaliação para saber.' },
        { q: 'A Carflix compra o meu carro?', a: 'Atuamos como intermediadores. Na Venda Turbo, conectamos você com compradores qualificados para uma proposta à vista no mesmo dia. No Anúncio Carflix, cuidamos do anúncio e da negociação por você.' },
        { q: 'Quanto tempo leva para vender pelo Anúncio Carflix?', a: 'O tempo varia conforme modelo, ano e preço de mercado. Na média, fechamos negócios em poucas semanas, com você continuando a usar o carro normalmente.' },
        { q: 'Meus dados estão seguros?', a: 'Sim. Seguimos a LGPD e usamos seus dados apenas para o atendimento da sua avaliação. Não compartilhamos com terceiros.' },
        { q: 'Como funciona a avaliação presencial?', a: `Você leva o carro até a unidade ${unidade.nome} no horário agendado. Nossa equipe faz uma inspeção técnica completa e apresenta as opções de venda em poucos minutos.` },
    ];
    return (
        <section id="faq" style={{ background: '#F9F9F9', padding: '88px clamp(20px, 6vw, 80px)' }}>
            <div ref={rContent} style={{ maxWidth: 820, margin: '0 auto', ...sContent }}>
                <div style={{ textAlign: 'center', marginBottom: 40 }}>
                    <div style={{
                        display: 'inline-block', background: 'rgba(227,16,24,0.08)', color: '#E31018',
                        borderRadius: 999, padding: '5px 14px', fontSize: 12, fontWeight: 500,
                        fontFamily: "'Roboto',sans-serif", marginBottom: 14,
                        textTransform: 'uppercase', letterSpacing: '0.06em',
                    }}>Dúvidas frequentes</div>
                    <h2 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 400, fontSize: 'clamp(26px, 3vw, 36px)', color: '#2D2D2D' }}>
                        Tirando suas dúvidas <span style={{ color: '#E31018', fontWeight: 500 }}>antes de agendar</span>
                    </h2>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {items.map(it => <FaqItem key={it.q} {...it} />)}
                </div>
            </div>
        </section>
    );
}

function FinalCTA({ onCTA, onWhatsApp }) {
    const [rContent, sContent] = useReveal(0);
    return (
        <section style={{
            background: '#E31018', padding: '80px clamp(20px, 6vw, 80px)',
            position: 'relative', overflow: 'hidden',
        }}>
            <div style={{
                position: 'absolute', right: -100, bottom: -100, width: 360, height: 360,
                borderRadius: '50%', border: '60px solid rgba(255,255,255,0.06)',
            }} />
            <div ref={rContent} style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center', position: 'relative', ...sContent }}>
                <h2 style={{
                    fontFamily: "'Roboto',sans-serif", fontWeight: 400,
                    fontSize: 'clamp(28px, 3.5vw, 42px)', color: '#fff', lineHeight: 1.2, marginBottom: 14,
                }}>
                    Pronto para dar o próximo passo?<br />
                    <span style={{ fontWeight: 500 }}>Agende sua avaliação gratuita agora.</span>
                </h2>
                <p style={{
                    fontFamily: "'Roboto',sans-serif", fontSize: 16,
                    color: 'rgba(255,255,255,0.85)', lineHeight: 1.6, marginBottom: 30,
                }}>
                    Sem taxas antecipadas. Você só paga quando vender.
                </p>
                <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                    <button onClick={onCTA} style={{
                        padding: '14px 28px', borderRadius: 999, background: '#fff',
                        color: '#E31018', border: 'none', fontFamily: "'Roboto',sans-serif",
                        fontSize: 15, fontWeight: 500, cursor: 'pointer',
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                    }}>
                        <Icon name="calendar" size={16} color="#E31018" stroke={2.2} />
                        Agendar avaliação gratuita
                    </button>
                    <button onClick={onWhatsApp} style={{
                        padding: '13px 26px', borderRadius: 999,
                        background: 'transparent', color: '#fff',
                        border: '1px solid rgba(255,255,255,0.4)',
                        fontFamily: "'Roboto',sans-serif", fontSize: 15, fontWeight: 500, cursor: 'pointer',
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                    }}>
                        <Icon name="whatsapp" size={16} color="#fff" />
                        Falar no WhatsApp
                    </button>
                </div>
            </div>
        </section>
    );
}

function Location() {
    const { unidade } = useUnidade();
    return (
        <section id="localizacao" style={{ background: '#fff', padding: '72px clamp(20px, 6vw, 80px)' }}>
            <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 32, alignItems: 'center' }}>
                <div>
                    <div style={{
                        display: 'inline-block', background: 'rgba(227,16,24,0.08)', color: '#E31018',
                        borderRadius: 999, padding: '5px 14px', fontSize: 12, fontWeight: 500,
                        fontFamily: "'Roboto',sans-serif", marginBottom: 14,
                        textTransform: 'uppercase', letterSpacing: '0.06em',
                    }}>Visite nossa unidade</div>
                    <h2 style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 400, fontSize: 'clamp(24px, 2.6vw, 32px)', color: '#2D2D2D', marginBottom: 18 }}>
                        {unidade.nomeCompleto}
                    </h2>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                        <InfoLine icon="pin" title="Endereço" value={unidade.endereco} />
                        <InfoLine icon="clock" title="Horário" value={`Segunda a sábado, ${unidade.horaAbertura} às ${unidade.horaFechamento}`} />
                        <InfoLine icon="phone" title="Telefone" value={
                            <a href={`tel:+55${digits(unidade.telefone)}`} style={{ textDecoration: 'none', color: '#2D2D2D' }}>
                                {unidade.telefone}
                            </a>
                        } />
                        <InfoLine icon="mail" title="E-mail" value={
                            <a href={`mailto:${unidade.email}`} style={{ textDecoration: 'none', color: '#2D2D2D' }}>
                                {unidade.email}
                            </a>
                        } />
                    </div>
                </div>
                <div style={{
                    height: 360, borderRadius: 16, overflow: 'hidden',
                    border: '1px solid #E0E0E0', position: 'relative',
                }}>
                    <iframe
                        title={`Mapa ${unidade.nomeCompleto}`}
                        src={unidade.mapaIframeUrl}
                        width="100%" height="100%"
                        style={{ border: 0 }}
                        allowFullScreen=""
                        loading="lazy"
                        referrerPolicy="no-referrer-when-downgrade"
                    />
                </div>
            </div>
        </section>
    );
}

function InfoLine({ icon, title, value }) {
    return (
        <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{
                width: 36, height: 36, borderRadius: 8, background: 'rgba(227,16,24,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
                <Icon name={icon} size={18} color="#E31018" />
            </div>
            <div>
                <div style={{ fontFamily: "'Roboto',sans-serif", fontSize: 12, color: '#919191', marginBottom: 2 }}>{title}</div>
                <div style={{ fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#2D2D2D', fontWeight: 500 }}>{value}</div>
            </div>
        </div>
    );
}

function Footer() {
    const { unidade } = useUnidade();
    const ano = new Date().getFullYear();
    return (
        <footer style={{
            background: '#1a1a1a', padding: '48px clamp(20px, 6vw, 80px) 28px',
            position: 'relative', overflow: 'hidden',
        }}>
            <div style={{
                position: 'absolute', left: -40, top: -40, opacity: 0.03,
                fontFamily: "'Roboto',sans-serif", fontWeight: 700,
                fontSize: 'clamp(80px, 12vw, 160px)', color: '#fff',
                pointerEvents: 'none', userSelect: 'none', whiteSpace: 'nowrap',
            }}>CARFLIX</div>
            <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative' }}>
                <div style={{
                    display: 'flex', gap: 40, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center',
                    paddingBottom: 24, borderBottom: '1px solid rgba(255,255,255,0.08)',
                }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                        <img src="/Content/landings/lp-franqueados/modelo-02/assets/logo-carflix-color.png" alt="Carflix" style={{ height: 150, objectFit: 'contain', filter: 'brightness(0) invert(1)' }} />
                        <span style={{ fontFamily: "'Roboto',sans-serif", fontSize: 12, color: '#919191' }}>
                            Unidade {unidade.nome}
                        </span>
                    </div>
                    <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap', alignItems: 'center' }}>
                        {unidade.instagramUrl && (
                            <a href={unidade.instagramUrl} target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{
                                display: 'inline-flex', alignItems: 'center', gap: 6,
                                fontFamily: "'Roboto',sans-serif", fontSize: 13, color: '#919191', textDecoration: 'none',
                            }}>
                                <Icon name="instagram" size={16} color="#919191" stroke={1.8} />
                                Instagram
                            </a>
                        )}
                        <a href="https://www.carflix.com.br/politica-de-privacidade" target="_blank" rel="noopener noreferrer" style={{ fontFamily: "'Roboto',sans-serif", fontSize: 13, color: '#919191', textDecoration: 'none' }}>Política de Privacidade</a>
                        <a href="https://www.carflix.com.br/termos-e-condicoes" target="_blank" rel="noopener noreferrer" style={{ fontFamily: "'Roboto',sans-serif", fontSize: 13, color: '#919191', textDecoration: 'none' }}>Termos e Condições</a>
                    </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20, flexWrap: 'wrap', gap: 12 }}>
                    <span style={{ fontFamily: "'Roboto',sans-serif", fontSize: 12, color: '#5B5B5B' }}>
                        © {ano} {unidade.nomeCompleto}
                    </span>
                    <span style={{ fontFamily: "'Roboto',sans-serif", fontSize: 12, color: '#5B5B5B' }}>
                        Comprar e vender carros com conforto e segurança pelo melhor preço.
                    </span>
                </div>
            </div>
        </footer>
    );
}

Object.assign(window, { ProofStrip, HowItWorks, Modalidades, Testimonials, FAQ, FinalCTA, Location, Footer });
