// hero.jsx — Hero section. Dados da unidade vêm de useUnidade().

function Hero() {
    const { unidade } = useUnidade();
    return (
        <section id="hero" style={{
            background: '#F9F9F9', position: 'relative', overflow: 'hidden',
            padding: '64px clamp(20px, 6vw, 80px) 80px',
        }}>
            <div style={{
                position: 'absolute', right: -200, top: -180, width: 560, height: 560,
                borderRadius: '50%', border: '90px solid rgba(227,16,24,0.04)',
                pointerEvents: 'none',
            }} />
            <div style={{
                display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
                gap: 48, alignItems: 'center', maxWidth: 1240, margin: '0 auto',
                position: 'relative',
            }}>
                {/* LEFT: copy */}
                <div>
                    <div style={{
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                        background: 'rgba(227,16,24,0.08)', color: '#E31018',
                        borderRadius: 999, padding: '5px 14px',
                        fontFamily: "'Roboto',sans-serif", fontSize: 12, fontWeight: 500,
                        textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 18,
                    }}>
                        <Icon name="pin" size={13} color="#E31018" stroke={2} />
                        {unidade.nomeCompleto}
                    </div>
                    <h1 style={{
                        fontFamily: "'Roboto',sans-serif", fontWeight: 400,
                        fontSize: 'clamp(30px, 4vw, 46px)', lineHeight: 1.15,
                        color: '#2D2D2D', marginBottom: 18, letterSpacing: '-0.01em',
                    }}>
                        Venda seu carro em <span style={{ color: '#E31018', fontWeight: 500 }}>até 20 minutos</span>.<br />
                        <span style={{ fontWeight: 500 }}>Sem exposição. Sem risco.</span><br />
                        Com suporte do início ao fim.
                    </h1>
                    <p style={{
                        fontFamily: "'Roboto',sans-serif", fontSize: 16, color: '#5B5B5B',
                        lineHeight: 1.7, marginBottom: 28, maxWidth: 480,
                    }}>
                        A {unidade.nomeCompleto} cuida de todo o processo de venda: <strong style={{ color: '#2D2D2D' }}>avaliação gratuita presencial</strong>, proposta à vista no mesmo dia e zero burocracia. Agende agora e saia com o dinheiro na mão.
                    </p>
                    <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
                        {[
                            { v: '100%', l: 'Avaliação presencial gratuita' },
                            { v: 'R$ 0,00', l: 'você só paga quando vender' },
                            { v: '20 min', l: 'você só paga quando vender' },
                        ].map(s => (
                            <div key={s.l}>
                                <div style={{ fontFamily: "'Roboto',sans-serif", fontWeight: 700, fontSize: 22, color: '#2D2D2D' }}>{s.v}</div>
                                <div style={{ fontFamily: "'Roboto',sans-serif", fontSize: 12, color: '#919191', marginTop: 2 }}>{s.l}</div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* RIGHT: form card */}
                <div id="formulario" style={{
                    background: '#fff', borderRadius: 16,
                    boxShadow: '0 12px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)',
                    padding: 26, position: 'relative',
                }}>
                    <div style={{ marginBottom: 18, textAlign: 'center' }}>
                        <h2 style={{
                            fontFamily: "'Roboto',sans-serif", fontWeight: 500, fontSize: 19,
                            color: '#2D2D2D', marginBottom: 4,
                        }}>
                            Agende sua avaliação gratuita
                        </h2>
                        <p style={{ fontFamily: "'Roboto',sans-serif", fontSize: 13, color: '#5B5B5B' }}>
                            Leva menos de <strong style={{ color: '#2D2D2D' }}>2 minutos</strong>. Sem compromisso.
                        </p>
                    </div>
                    <HeroForm />
                </div>
            </div>
        </section>
    );
}

Object.assign(window, { Hero });