// Como funciona + Depoimentos + Calendário + FAQ + Localização/Contato

// ─── Como funciona ───────────────────────────────────────────────────────
function ComoFunciona() {
  const steps = [
  {
    n: '01',
    title: 'Conversa inicial',
    desc: 'Você compartilha sua ideia, o tipo de experiência que deseja conduzir, número de participantes e período pretendido.'
  },
  {
    n: '02',
    title: 'Proposta personalizada',
    desc: 'Montamos uma proposta alinhada ao formato do seu encontro, considerando hospedagem, espaços e necessidades do grupo.'
  },
  {
    n: '03',
    title: 'Visita ao espaço',
    desc: 'Você pode visitar o Espaço Luna presencialmente ou realizar uma chamada guiada para sentir o ambiente antes da decisão.'
  },
  {
    n: '04',
    title: 'Reserva confirmada',
    desc: 'Com a confirmação, sua experiência já começa a ganhar forma. Organizamos os detalhes para que tudo aconteça com presença, fluidez e acolhimento.'
  }];


  return (
    <section id="como-funciona" style={{ padding: 'var(--section-y) 0', background: 'var(--bg)' }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.4fr)',
          gap: 80
        }} className="cf-grid">
          <div style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>04 · Como funciona</div>
            <h2 className="h2 serif" style={{ marginBottom: 28 }}>
              <span className="italic">Do primeiro contato</span>{' '}
              <span style={{ color: 'var(--gold)' }}>à sua imersão.</span>
            </h2>
            <p className="lede">
              Conduzimos cada etapa de forma próxima e personalizada, para que você possa focar no que realmente importa: a experiência que deseja criar.
            </p>
            <a href="#contato" className="btn btn-primary" style={{ marginTop: 32 }}>
              Planejar minha experiência <span className="btn-arrow"></span>
            </a>
          </div>

          <div>
            {steps.map((s, i) =>
            <div key={i} style={{
              padding: '36px 0',
              borderTop: '1px solid var(--line)',
              borderBottom: i === steps.length - 1 ? '1px solid var(--line)' : 'none',
              display: 'grid',
              gridTemplateColumns: '80px 1fr',
              gap: 24,
              alignItems: 'baseline'
            }}>
                <div className="serif" style={{
                fontSize: 32,
                color: 'var(--gold)',
                fontStyle: 'italic',
                fontWeight: 400
              }}>{s.n}</div>
                <div>
                  <h4 className="serif" style={{
                  fontSize: 24,
                  fontWeight: 500,
                  marginBottom: 10,
                  color: 'var(--ink)'
                }}>{s.title}</h4>
                  <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.7 }}>{s.desc}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .cf-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .cf-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>);

}

// ─── Depoimentos ─────────────────────────────────────────────────────────
function Depoimentos() {
  const testimonials = [
  {
    quote: 'O Espaço Luna é simplesmente maravilhoso! Proporciona uma imersão incrível com a natureza, nos convidando a desconectar da correria do dia a dia e conectar com a energia da natureza, apreciando cada detalhe — o nascer do sol, os pássaros e as borboletas. O chalé em que fiquei é adaptado para pessoa com deficiência e eles pensaram em cada detalhe. O salão do evento é lindo e aconchegante. Foram dias maravilhosos com a minha família. Já considero a minha segunda casa. Os anfitriões sempre dispostos a ajudar no que for preciso — são incríveis.',
    author: 'Serginho Lucas'
  },
  {
    quote: 'Atendimento e acolhimento são o diferencial. As experiências vividas neste lugar são para a vida.',
    author: 'Maria Cristini'
  },
  {
    quote: 'Parabéns, Tati e Marcelo, por terem concebido um espaço tão lindo e acolhedor. Foi uma honra participar do primeiro encontro no Espaço Luna, na Travessia dos 7 Portais com a Tati Pérez. Um lugar especial, repleto de energia, acolhimento e conexão com a natureza. Uma experiência transformadora, em um espaço que inspira paz e autoconhecimento.',
    author: 'Luci Spavinello'
  },
  {
    quote: 'Excelente! Super recomendo. Lugar perfeito para quem ama a natureza como eu. Marcelo e Tati são incríveis. Só vivendo a experiência.',
    author: 'Loivane Portela'
  },
  {
    quote: 'Espaço muito acolhedor, com forte conexão com a natureza. Existe uma beleza e energia maravilhosa por todos os lados. Ótimo lugar para refletir e se conectar consigo mesmo.',
    author: 'Joice Rodrigues da Silva'
  },
  {
    quote: 'Que energia incrível! Lugar tranquilo, espaço aconchegante e a conexão com a natureza é surreal.',
    author: 'Patrycia Bueno de Moraes'
  }];


  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % testimonials.length), 10000);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="depoimentos" style={{
      padding: 'var(--section-y) 0',
      background: 'var(--bg-2)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      overflow: 'hidden'
    }}>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>05 · Depoimentos</div>
          <h2 className="h2 serif">
            <span className="italic">Quem conduziu</span><br />
            <span style={{ color: 'var(--gold)' }}>aqui antes de você.</span>
          </h2>
        </div>

        {/* Big quote mark */}
        <div className="serif" style={{
          fontSize: 200,
          color: 'var(--gold)',
          opacity: 0.12,
          position: 'absolute',
          top: 'calc(var(--section-y) + 30px)',
          left: 'calc(var(--pad-x))',
          lineHeight: 1,
          pointerEvents: 'none',
          fontStyle: 'italic'
        }}>"</div>

        <div style={{ position: 'relative', maxWidth: 820, marginInline: 'auto', minHeight: 'clamp(320px, 38vh, 420px)' }}>
          {testimonials.map((t, i) =>
          <div key={i} style={{
            position: i === idx ? 'relative' : 'absolute',
            inset: i === idx ? 'auto' : 0,
            opacity: i === idx ? 1 : 0,
            transform: i === idx ? 'translateY(0)' : 'translateY(8px)',
            transition: 'opacity .8s ease, transform .8s ease',
            textAlign: 'center',
            pointerEvents: i === idx ? 'auto' : 'none'
          }}>
              <p className="serif italic" style={{
              fontSize: 'clamp(18px, 2.2vw, 26px)',
              lineHeight: 1.5,
              color: 'var(--ink)',
              marginBottom: 32
            }}>
                {t.quote}
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 32, height: 1, background: 'var(--gold)', marginBottom: 10 }} />
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)', letterSpacing: '0.04em' }}>{t.author}</div>
              </div>
            </div>
          )}
        </div>

        {/* Dots */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 48 }}>
          {testimonials.map((_, i) =>
          <button key={i} onClick={() => setIdx(i)} aria-label={`Depoimento ${i + 1}`} style={{
            width: i === idx ? 24 : 8,
            height: 8,
            borderRadius: 999,
            border: 0,
            background: i === idx ? 'var(--gold)' : 'rgba(244,237,224,.2)',
            cursor: 'pointer',
            transition: 'all .4s',
            padding: 0
          }} />
          )}
        </div>
      </div>
    </section>);

}

// ─── Calendário de disponibilidade ─────────────────────────────────────────
function Calendario() {
  const months = [
  { name: 'Junho', short: 'Jun', year: 2026, available: [4, 5, 6, 18, 19, 20], booked: [11, 12, 13, 14] },
  { name: 'Julho', short: 'Jul', year: 2026, available: [9, 10, 11, 23, 24, 25, 30, 31], booked: [16, 17, 18] },
  { name: 'Agosto', short: 'Ago', year: 2026, available: [1, 6, 7, 8, 20, 21, 22, 27, 28, 29], booked: [13, 14, 15] }];

  const [active, setActive] = React.useState(0);
  const m = months[active];

  // build simple month grid (days 1-30/31)
  const daysInMonth = { Junho: 30, Julho: 31, Agosto: 31 }[m.name];
  // first day of month — for layout simplicity use fixed Mon-start, 1st = column
  const firstColMap = { Junho: 0, Julho: 2, Agosto: 5 }; // arbitrary realistic-looking
  const firstCol = firstColMap[m.name];
  const cells = [];
  for (let i = 0; i < firstCol; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const status = (d) => {
    if (m.booked.includes(d)) return 'booked';
    if (m.available.includes(d)) return 'available';
    return 'closed';
  };

  return (
    <section id="disponibilidade" style={{ padding: 'var(--section-y) 0', background: 'var(--bg)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 720, marginInline: 'auto' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>06 · Disponibilidade</div>
          <h2 className="h2 serif">
            <span className="italic">Sua data</span> <span style={{ color: 'var(--gold)' }}>está aqui.</span>
          </h2>
          <p className="lede" style={{ marginInline: 'auto', marginTop: 20 }}>
            Datas com hospedagem disponíveis nos próximos meses. Para outros períodos ou eventos sem hospedagem, fale conosco.
          </p>
        </div>

        {/* month tabs */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginBottom: 40, flexWrap: 'wrap' }}>
          {months.map((mo, i) =>
          <button key={i} onClick={() => setActive(i)} style={{
            padding: '14px 28px',
            background: i === active ? 'var(--gold)' : 'transparent',
            color: i === active ? 'var(--bg)' : 'var(--ink)',
            border: '1px solid',
            borderColor: i === active ? 'var(--gold)' : 'var(--line)',
            borderRadius: 999,
            fontSize: 12,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            fontFamily: 'var(--sans)',
            cursor: 'pointer',
            transition: 'all .3s'
          }}>
              {mo.name} · {mo.year}
            </button>
          )}
        </div>

        <div style={{
          maxWidth: 720,
          marginInline: 'auto',
          background: 'var(--bg-2)',
          border: '1px solid var(--line)',
          borderRadius: 8,
          padding: 'clamp(24px, 4vw, 40px)'
        }}>
          {/* weekday header */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(7, 1fr)',
            gap: 4,
            marginBottom: 12,
            paddingBottom: 12,
            borderBottom: '1px solid var(--line)'
          }}>
            {['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'].map((w) =>
            <div key={w} style={{
              textAlign: 'center',
              fontSize: 10,
              letterSpacing: '0.18em',
              color: 'var(--muted)',
              textTransform: 'uppercase'
            }}>{w}</div>
            )}
          </div>

          {/* days */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
            {cells.map((d, i) => {
              if (!d) return <div key={i} />;
              const s = status(d);
              const styles = {
                available: { background: 'rgba(212,184,150,.12)', color: 'var(--gold)', border: '1px solid var(--gold)' },
                booked: { background: 'transparent', color: 'rgba(244,237,224,.3)', border: '1px solid var(--line)', textDecoration: 'line-through' },
                closed: { background: 'transparent', color: 'var(--muted)', border: '1px solid transparent' }
              }[s];
              const isAvail = s === 'available';
              return (
                <div key={i}
                title={isAvail ? 'Data disponível' : s === 'booked' ? 'Reservado' : 'Consultar'}
                style={{
                  aspectRatio: '1',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 14,
                  borderRadius: 4,
                  fontFamily: 'var(--sans)',
                  cursor: isAvail ? 'pointer' : 'default',
                  transition: 'transform .2s',
                  ...styles
                }}
                onMouseEnter={(e) => {if (isAvail) e.currentTarget.style.transform = 'scale(1.08)';}}
                onMouseLeave={(e) => {e.currentTarget.style.transform = 'scale(1)';}}>
                  {d}</div>);

            })}
          </div>

          {/* legend */}
          <div style={{
            marginTop: 28,
            paddingTop: 24,
            borderTop: '1px solid var(--line)',
            display: 'flex',
            gap: 28,
            flexWrap: 'wrap',
            justifyContent: 'center',
            fontSize: 12,
            color: 'var(--muted)'
          }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 14, height: 14, borderRadius: 3, background: 'rgba(212,184,150,.12)', border: '1px solid var(--gold)' }} />
              Disponível
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 14, height: 14, borderRadius: 3, border: '1px solid var(--line)' }} />
              Reservado
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 14, height: 14, borderRadius: 3 }} />
              Consultar
            </span>
          </div>
        </div>

        <p style={{ textAlign: 'center', marginTop: 32, fontSize: 13, color: 'var(--muted)' }}>
          Não viu sua data? <a href="#contato" style={{ color: 'var(--gold)', borderBottom: '1px solid currentColor' }}>Consulte outras possibilidades</a>
        </p>
      </div>
    </section>);

}

// ─── FAQ ─────────────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
  {
    q: 'Quantas pessoas o Espaço Luna comporta?',
    a: 'Hospedagem confortável para até 30 pessoas em quartos compartilhados nos lofts. O salão principal acolhe até 120 pessoas em formato auditório ou 40 em formato U.'
  },
  {
    q: 'A locação inclui refeições?',
    a: 'Oferecemos pacotes com pensão completa preparada por nossa cozinha. Também é possível locar o espaço sem refeições, mas a maioria dos facilitadores opta pelo pacote completo.'
  },
  {
    q: 'Qual a antecedência ideal para reservar?',
    a: 'Para datas de alta procura (feriados, finais de semana de outono e inverno) recomendamos 4 a 6 meses de antecedência. Para outras datas, 2 meses são suficientes.'
  },
  {
    q: 'Como funciona a política de cancelamento?',
    a: 'Cancelamentos com mais de 60 dias de antecedência: devolvemos 100% do sinal. Entre 30 e 60 dias: 50%. Menos de 30 dias: o sinal é mantido como crédito para nova data em até 12 meses.'
  },
  {
    q: 'Posso visitar o espaço antes de fechar?',
    a: 'Sim — recomendamos. Agendamos visitas presenciais aos finais de semana ou videochamadas guiadas em qualquer dia. É importante sentir o lugar antes de decidir.'
  },
  {
    q: 'Existe restrição de tipo de evento?',
    a: 'O Espaço Luna acolhe facilitadores de diferentes linhas. Pedimos apenas que a proposta esteja em sintonia com nossos valores: profundidade, responsabilidade e respeito ao espaço, à equipe e à natureza.'
  },
  {
    q: 'O que é o Templo Lunar?',
    a: 'Um espaço dedicado a rituais e práticas mais íntimas, dentro do terreno. É de uso livre durante sua estadia — fica à disposição do que sua programação propuser.'
  },
  {
    q: 'Como chego ao Espaço Luna?',
    a: 'Estamos em Gramado/RS, a 10 minutos do centro. Do aeroporto de Caxias do Sul são cerca de 50 minutos. Do aeroporto de Porto Alegre, 2 horas. Oferecemos suporte para grupos com transfer.'
  }];


  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ padding: 'var(--section-y) 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.4fr)',
          gap: 80,
          alignItems: 'start'
        }} className="faq-grid">
          <div style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>06 · Perguntas</div>
            <h2 className="h2 serif">
              <span className="italic">Antes</span> <span style={{ color: 'var(--gold)' }}>de você perguntar.</span>
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>
              Reunimos as dúvidas mais frequentes. Se a sua não está aqui, conversamos pelo WhatsApp.
            </p>
          </div>

          <div>
            {qs.map((it, i) =>
            <div key={i} style={{
              borderTop: i === 0 ? '1px solid var(--line)' : 'none',
              borderBottom: '1px solid var(--line)'
            }}>
                <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%',
                  background: 'transparent',
                  border: 0,
                  padding: '24px 0',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  gap: 20,
                  cursor: 'pointer',
                  color: 'var(--ink)',
                  textAlign: 'left'
                }}>
                
                  <span className="serif" style={{ fontSize: 'clamp(18px, 2vw, 22px)', fontWeight: 500, lineHeight: 1.3 }}>
                    {it.q}
                  </span>
                  <span style={{
                  flexShrink: 0,
                  width: 28, height: 28,
                  borderRadius: '50%',
                  border: '1px solid var(--gold)',
                  color: 'var(--gold)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  transition: 'transform .35s cubic-bezier(.2,.7,.3,1)',
                  fontSize: 18,
                  lineHeight: 1
                }}>+</span>
                </button>
                <div style={{
                maxHeight: open === i ? 500 : 0,
                overflow: 'hidden',
                transition: 'max-height .5s cubic-bezier(.2,.7,.3,1)'
              }}>
                  <p style={{
                  color: 'var(--muted)',
                  fontSize: 15,
                  lineHeight: 1.7,
                  paddingBottom: 24,
                  maxWidth: '64ch'
                }}>{it.a}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .faq-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>);

}

// ─── Localização / Contato ────────────────────────────────────────────────
function Contato({ whatsapp, instagram }) {
  const [sent, setSent] = React.useState(false);
  const cleanPhone = whatsapp.replace(/\D/g, '');
  const mapUrl = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3470.8!2d-50.86!3d-29.38!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zUi4gQW5nZWxpbm8gVG9tYXp6aSwgMTIzNCwgR3JhbWFkbyAtIFJT!5e0!3m2!1spt-BR!2sbr!4v1700000000000';

  const submit = (e) => {
    e.preventDefault();
    const f = e.target;
    const get = (n) => (f.elements[n] && f.elements[n].value || '').trim();

    const nome = get('nome');
    const email = get('email');
    const phone = get('phone');
    const tipo = get('tipo');
    const periodo = get('periodo');
    const pessoas = get('pessoas');
    const msg = get('msg');

    const linhas = [
      '*Nova proposta — Espaço Luna*',
      '',
      nome && `*Nome:* ${nome}`,
      email && `*E-mail:* ${email}`,
      phone && `*WhatsApp:* ${phone}`,
      tipo && `*Tipo de evento:* ${tipo}`,
      periodo && `*Período pretendido:* ${periodo}`,
      pessoas && `*Quantas pessoas:* ${pessoas}`,
      msg && `*Sobre a proposta:* ${msg}`
    ].filter(Boolean);

    const texto = encodeURIComponent(linhas.join('\n'));
    window.open(`https://wa.me/${cleanPhone}?text=${texto}`, '_blank', 'noopener,noreferrer');
    setSent(true);
  };

  return (
    <section id="contato" style={{
      padding: 'var(--section-y) 0 0',
      background: 'var(--bg)',
      borderTop: '1px solid var(--line)'
    }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 720, marginInline: 'auto' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>07 · Contato</div>
          <h2 className="h2 serif">
            <span className="italic">Talvez o seu próximo encontro</span>{' '}
            <span style={{ color: 'var(--gold)' }}>já tenha encontrado o lugar certo.</span>
          </h2>
        </div>

        {/* ─── Row 1: Contacts (Endereço, WhatsApp, Instagram) ─────────── */}
        <div style={{ maxWidth: 720, marginInline: 'auto', marginBottom: 'clamp(64px, 8vw, 96px)' }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <ContactRow
              icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 21s-7-6.5-7-12a7 7 0 1 1 14 0c0 5.5-7 12-7 12z" /><circle cx="12" cy="9" r="2.5" /></svg>}
              label="Endereço"
              value={<>R. Angelino Tomazzi, 1234 · Gramado · RS · 95670-000</>}
              href="https://www.google.com/maps/search/?api=1&query=R.+Angelino+Tomazzi+1234+Gramado+RS" />
            <ContactRow
              icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /></svg>}
              label="WhatsApp"
              value={whatsapp}
              href={`https://wa.me/${cleanPhone}`} />
            <ContactRow
              icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" /></svg>}
              label="Instagram"
              value="@espacolunars"
              href={instagram} />
          </div>
        </div>

        {/* ─── Row 2: Form (centered) ─────────────────────────────────── */}
        <div style={{ maxWidth: 720, marginInline: 'auto', marginBottom: 'clamp(64px, 8vw, 96px)' }}>
          {sent ?
          <div style={{
            background: 'var(--card)',
            border: '1px solid var(--gold)',
            borderRadius: 8,
            padding: 48,
            textAlign: 'center'
          }}>
              <div style={{
              width: 56, height: 56,
              borderRadius: '50%',
              background: 'var(--gold)',
              color: 'var(--bg)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginInline: 'auto',
              marginBottom: 24
            }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12" />
                </svg>
              </div>
              <h3 className="serif italic" style={{ fontSize: 28, marginBottom: 12 }}>
                Abrindo o WhatsApp...
              </h3>
              <p style={{ color: 'var(--muted)', fontSize: 15, marginBottom: 24 }}>
                Já preenchemos a mensagem com os seus dados. É só apertar enviar na conversa. Se o WhatsApp não abrir, use o botão abaixo.
              </p>
              <a href={`https://wa.me/${cleanPhone}`} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
                Conversar no WhatsApp
              </a>
            </div> :

          <form onSubmit={submit} style={{
            background: 'var(--card)',
            border: '1px solid var(--line)',
            borderRadius: 8,
            padding: 'clamp(28px, 4vw, 44px)'
          }}>
              <div style={{ display: 'grid', gap: 20 }}>
                <Field label="Nome" name="nome" required />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="form-row">
                  <Field label="E-mail" name="email" type="email" required />
                  <Field label="WhatsApp" name="phone" required />
                </div>
                <Field label="Tipo de evento" name="tipo" placeholder="Retiro, formação, imersão..." />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="form-row">
                  <Field label="Período pretendido" name="periodo" placeholder="Ex: Julho de 2026" />
                  <Field label="Quantas pessoas" name="pessoas" type="number" />
                </div>
                <Field label="Conte-nos sobre sua proposta" name="msg" multiline />
                <button type="submit" className="btn btn-primary" style={{ justifyContent: 'center', marginTop: 8 }}>
                  Enviar proposta <span className="btn-arrow"></span>
                </button>
              </div>
            </form>
          }
        </div>

        {/* ─── Row 3: "Onde encontrar" heading ──────────────────────────── */}
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <h3 className="serif italic" style={{ fontSize: 'clamp(28px, 3.5vw, 40px)' }}>
            Onde encontrar.
          </h3>
          <p style={{ color: 'var(--muted)', fontSize: 14, marginTop: 12 }}>
            R. Angelino Tomazzi, 1234 · Gramado · RS
          </p>
        </div>
      </div>

      {/* ─── Row 4: Map FULL BLEED (outside .container) ───────────────── */}
      <div style={{
        width: '100%',
        height: 'clamp(360px, 50vh, 560px)',
        position: 'relative',
        background: 'var(--bg-2)',
        borderTop: '1px solid var(--line)',
        borderBottom: '1px solid var(--line)'
      }}>
        <iframe
          src={mapUrl}
          width="100%" height="100%"
          style={{ border: 0, display: 'block' }}
          allowFullScreen=""
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="Mapa do Espaço Luna">
        </iframe>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .form-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

function Field({ label, name, type = 'text', placeholder, required, multiline }) {
  const base = {
    width: '100%',
    background: 'var(--bg)',
    border: '1px solid var(--line)',
    borderRadius: 6,
    padding: '12px 14px',
    color: 'var(--ink)',
    fontSize: 14,
    fontFamily: 'var(--sans)',
    transition: 'border-color .3s',
    outline: 'none',
    fontWeight: 400
  };
  const focus = (e) => {e.currentTarget.style.borderColor = 'var(--gold)';};
  const blur = (e) => {e.currentTarget.style.borderColor = 'var(--line)';};
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span style={{
        fontSize: 11,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: 'var(--muted)',
        fontWeight: 500
      }}>{label}{required && <span style={{ color: 'var(--gold)' }}> ·</span>}</span>
      {multiline ?
      <textarea name={name} placeholder={placeholder} required={required} rows={4}
      style={{ ...base, resize: 'vertical', minHeight: 100, fontFamily: 'var(--sans)' }}
      onFocus={focus} onBlur={blur} /> :


      <input name={name} type={type} placeholder={placeholder} required={required}
      style={base} onFocus={focus} onBlur={blur} />

      }
    </label>);

}

function ContactRow({ icon, label, value, href }) {
  return (
    <a href={href} target={href && href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer"
    style={{
      display: 'grid',
      gridTemplateColumns: '44px 1fr',
      gap: 16,
      alignItems: 'center',
      padding: '16px 0',
      borderBottom: '1px solid var(--line)',
      transition: 'color .2s'
    }}
    onMouseEnter={(e) => {e.currentTarget.style.color = 'var(--gold)';}}
    onMouseLeave={(e) => {e.currentTarget.style.color = 'var(--ink)';}}>
      
      <span style={{
        width: 44, height: 44,
        borderRadius: '50%',
        border: '1px solid var(--line)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'var(--gold)'
      }}>
        <span style={{ width: 18, height: 18, display: 'inline-block' }}>{icon}</span>
      </span>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--muted)', textTransform: 'uppercase' }}>{label}</span>
        <span style={{ fontSize: 15, color: 'inherit' }}>{value}</span>
      </div>
    </a>);

}

Object.assign(window, { ComoFunciona, Depoimentos, Calendario, FAQ, Contato });