https://universoparalello.org/src/sections-hospedagem.jsx

1// HOSPEDAGEM
2function SectionHospedagem() {
3  const t = useT('hospedagem');
4  return (
5    <section id="hospedagem" style={{ padding: '120px 0 100px', background: 'var(--ink)', position: 'relative', overflow: 'hidden' }}>
6      <div className="container">
7        <Reveal>
8          <Label num="06">{t.label}</Label>
9          <Display>{t.title}<em style={{ fontFamily: 'var(--f-display)' }}>{t.titleEm}</em></Display>
10          <p style={{ fontFamily: 'var(--f-serif)', fontSize: 22, lineHeight: 1.55, color: 'var(--mist)', maxWidth: 620, marginTop: 12, textWrap: 'pretty' }}>
11            {t.lead}
12          </p>
13        </Reveal>
14
15        {/* Camping incluso */}
16        <Reveal>
17          <div style={{
18            marginTop: 50, padding: '28px 36px',
19            border: '1px solid var(--lime)',
20            borderRadius: 14,
21            background: 'color-mix(in srgb, var(--lime) 7%, transparent)',
22            display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap',
23          }}>
24            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--lime)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
25              <path d="M3 20L12 4l9 16H3z"/><path d="M7.5 20L12 12l4.5 8"/>
26            </svg>
27            <div>
28              <span className="mono upper" style={{ fontSize: 10, letterSpacing: '0.28em', color: 'var(--lime)' }}>{t.campingBadge}</span>
29              <div className="serif" style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(24px,3vw,40px)', lineHeight: 1.05, color: 'var(--sand)', margin: '8px 0 10px' }}>
30                {t.campingTitle}
31              </div>
32              <p style={{ fontFamily: 'var(--f-serif)', margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--mist)' }}>
33                {t.campingBody}
34              </p>
35            </div>
36          </div>
37        </Reveal>
38
39        {/* Vila Mundo */}
40        <Reveal>
41          <div style={{
42            marginTop: 70, padding: '40px 44px',
43            border: '1px solid var(--turq)',
44            borderRadius: 16,
45            background: 'color-mix(in srgb, var(--turq) 8%, transparent)',
46            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 36, flexWrap: 'wrap',
47          }}>
48            <div style={{ flex: 1, minWidth: 260 }}>
49              <div className="mono upper" style={{ fontSize: 10, letterSpacing: '0.3em', color: 'var(--turq)', marginBottom: 12 }}>{t.vilaLabel}</div>
50              <div className="serif" style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(28px,3.5vw,48px)', lineHeight: 1.05, color: 'var(--sand)', marginBottom: 14 }}>
51                {t.vilaTitle}
52              </div>
53              <p style={{ fontFamily: 'var(--f-serif)', fontSize: 18, lineHeight: 1.65, color: 'var(--mist)', margin: 0, maxWidth: 580, textWrap: 'pretty' }}>
54                {t.vilaBody}
55              </p>
56            </div>
57            <a href="https://vilamundo.com/universoparalello/" target="_blank" rel="noopener noreferrer" className="vila-btn" style={{
58              padding: '16px 30px', borderRadius: 10,
59              border: '1px solid var(--turq)', color: 'var(--turq)',
60              fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
61              transition: 'background 200ms, color 200ms',
62              maxWidth: '100%', wordBreak: 'break-word', textAlign: 'center',
63              alignSelf: 'flex-start',
64            }}
65            onMouseEnter={e => { e.currentTarget.style.background = 'var(--turq)'; e.currentTarget.style.color = 'var(--ink)'; }}
66            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--turq)'; }}
67            >vilamundo.com/universoparalello →</a>
68          </div>
69        </Reveal>
70
71        {/* Hotéis, Pousadas e Casas */}
72        <Reveal>
73          <div style={{
74            marginTop: 24, padding: '40px 44px',
75            border: '1px solid var(--line-strong)', borderRadius: 16,
76            background: 'var(--ink-2)',
77            display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 36, flexWrap: 'wrap',
78          }}>
79            <div style={{ flex: 1, minWidth: 260 }}>
80              <div className="mono upper" style={{ fontSize: 10, letterSpacing: '0.3em', color: 'var(--electric)', marginBottom: 12 }}>{t.regionalLabel}</div>
81              <div className="serif" style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(28px,3.5vw,48px)', lineHeight: 1.05, color: 'var(--sand)', marginBottom: 14, whiteSpace: 'pre-line' }}>
82                {t.regionalTitle}
83              </div>
84              <p style={{ fontFamily: 'var(--f-serif)', fontSize: 18, lineHeight: 1.65, color: 'var(--mist)', margin: '0 0 24px', textWrap: 'pretty' }}>
85                {t.regionalBody}
86              </p>
87              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
88                <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: 'var(--sand)', fontFamily: 'var(--f-mono)' }}>
89                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.55, flexShrink: 0 }}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"/></svg>
90                  +55 73 9 8102-8102
91                </div>
92                <div style={{ display: 'flex', gap: 16, alignItems: 'center', paddingLeft: 2 }}>

93                  <a href="mailto:[email protected]" title="[email protected]" style={{ color: 'var(--mist)', transition: 'color 150ms' }}
94                    onMouseEnter={e => e.currentTarget.style.color = 'var(--electric)'}
95                    onMouseLeave={e => e.currentTarget.style.color = 'var(--mist)'}
96                  >
97                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
98                  </a>
99                  <a href="https://instagram.com/jusceliacarvalhosousa" target="_blank" rel="noopener noreferrer" title="@jusceliacarvalhosousa" style={{ color: 'var(--mist)', transition: 'color 150ms' }}
100                    onMouseEnter={e => e.currentTarget.style.color = 'var(--electric)'}
101                    onMouseLeave={e => e.currentTarget.style.color = 'var(--mist)'}
102                  >
103                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/></svg>
104                  </a>
105                </div>
106              </div>
107            </div>
108          </div>
109        </Reveal>
110      </div>
111    </section>
112  );
113}
114
115Object.assign(window, { SectionHospedagem });