/* SECTION 06 — Depoimentos / prova social. */
function TestimonialsSection() {
  const items = [
    ["A Carina foi muito mais do que uma corretora. Explicou tudo com paciência, indicou o bairro certo e a gente fechou em menos de 30 dias. Recomendo demais!", "Maria T.", "Compradora · Gurupi-TO"],
    ["Meu imóvel estava há meses sem vender. Chamei a Carina, ela fez um trabalho profissional com fotos, avaliação correta e em 3 semanas fechou o negócio. Incrível.", "João R.", "Vendedor · Gurupi-TO"],
    ["Ela me ajudou a entender que eu podia comprar meu imóvel próprio, mesmo achando que não tinha condições. Organizou tudo, me orientou no crédito e hoje tenho minha casa.", "Ana P.", "Compradora · Gurupi-TO"]
  ];
  return (
    <section id="depoimentos" className="cn-light-section" style={{ background: "var(--ivory-50)", padding: "clamp(72px, 9vw, 120px) 0", scrollMarginTop: "var(--header-h)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        <Reveal><SectionHead center eyebrow="Prova social" title="O que dizem quem já realizou o sonho com a Carina" /></Reveal>
        <div className="cn-3col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 26, marginTop: 54 }}>
          {items.map(([quote, name, role], i) => (
            <Reveal key={name} delay={i * 80}>
              <figure style={{
                background: "var(--bg-card)", border: "1px solid var(--border-gold)", borderRadius: "var(--r-md)",
                padding: "34px 32px", height: "100%", display: "flex", flexDirection: "column", margin: 0, boxShadow: "var(--shadow-sm)"
              }}>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 58, lineHeight: 0.6, color: "var(--gold-800)", height: 28 }}>“</div>
                <div aria-label="5 de 5 estrelas" style={{ color: "var(--accent)", fontSize: 16, letterSpacing: "0.18em", margin: "6px 0 14px" }}>★★★★★</div>
                <blockquote style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: 19, color: "var(--fg)", lineHeight: 1.55, margin: 0, flex: 1 }}>{quote}</blockquote>
                <figcaption style={{ marginTop: 26, paddingTop: 20, borderTop: "1px solid var(--surface-line)", display: "flex", alignItems: "center", gap: 14 }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: "50%", flex: "none", border: "1px solid var(--border-gold-strong)",
                    background: "linear-gradient(150deg,#2a2418,#16110a)", display: "flex", alignItems: "center", justifyContent: "center"
                  }}><span style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: 17, color: "var(--accent)" }}>{name[0]}</span></div>
                  <div>
                    <div style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14.5, color: "var(--fg)" }}>{name}</div>
                    <div style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 13.5, color: "var(--fg-muted)", marginTop: 2 }}>{role}</div>
                  </div>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* SECTION 07 — Bio / autoridade. */
function BioSection() {
  return (
    <section id="bio" className="cn-light-section" style={{ background: "var(--ivory-50)", borderTop: "1px solid var(--border-gold)", padding: "clamp(72px, 9vw, 120px) 0", scrollMarginTop: "var(--header-h)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        <div className="cn-bio" style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr", gap: 64, alignItems: "stretch" }}>
          <Reveal style={{ height: "100%" }}>
            <div className="cn-bio-photo-card" style={{ position: "relative", height: "100%", borderRadius: "var(--r-md)", overflow: "hidden", border: "1px solid var(--border-gold)" }}>
              <Photo
                src="assets/carina.webp"
                alt="Carina — corretora de imóveis em Gurupi"
                watermark={false}
                corner={false}
              />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(10,9,8,0.78), transparent 58%)", pointerEvents: "none" }} />
              <div style={{ position: "absolute", left: 28, bottom: 26, zIndex: 2 }}>
                <div style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", letterSpacing: "0.16em", fontSize: 22, color: "var(--cream)" }}>Carina</div>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 13.5, letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--accent)", marginTop: 6 }}>Corretora · Creci 39.689 GO</div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <SectionHead eyebrow="A Carina" title="Quem está do seu lado nessa decisão" />
            <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 22 }}>
              <p style={bioP}>Meu nome é Carina, tenho 29 anos e atuo no mercado imobiliário de Gurupi. Entrei no setor em 2016 e desde então dedico minha carreira a transformar sonhos em patrimônio real.</p>
              <p style={bioP}>Acredito que imóvel é muito mais do que um bem — é aposentadoria, é herança, é segurança de vida. Por isso trato cada cliente como se fosse minha família tomando a decisão mais importante da vida financeira.</p>
              <p style={bioP}>A Carina Imóveis nasceu da combinação de estudo, dedicação e amor genuíno pelo que faço. Seja para comprar o primeiro imóvel, vender com agilidade ou investir de forma inteligente — eu conheço o caminho e vou caminhar com você.</p>
            </div>
            <div style={bioCredential}>
              <div style={{
                width: 46, height: 46, flex: "none", display: "grid", placeItems: "center",
                border: "1px solid var(--border-gold-strong)", borderRadius: "var(--r-sm)",
                background: "rgba(209,169,90,0.08)", color: "var(--accent)"
              }}>
                <Icon name="property-assessment" size={23} color="currentColor" strokeWidth={1.35} />
              </div>
              <div>
                <div style={bioCredentialTitle}>Perita avaliadora · CNAI 045433</div>
                <p style={bioCredentialText}>
                  Além da intermediação imobiliária, realizo avaliações judiciais e extrajudiciais com análise técnica,
                  leitura de mercado e documentação organizada para decisões, negociações e processos que exigem segurança.
                </p>
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", margin: "26px 0 30px", fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.5, letterSpacing: "0.04em", color: "var(--ink-200)" }}>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="marker" size={16} color="var(--accent)" /> Gurupi-TO</span>
              <span style={{ color: "var(--ink-600)" }}>·</span>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="badge-check" size={16} color="var(--accent)" /> Creci 39.689 GO</span>
              <span style={{ color: "var(--ink-600)" }}>·</span>
              <span style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon name="property-assessment" size={16} color="var(--accent)" /> CNAI 045433</span>
            </div>
            <PrimaryCTA label="Quero falar com a Carina" href={window.CARINA_WHATS_SITE} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}
const bioP = { fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 17, color: "var(--ink-200)", lineHeight: 1.82, margin: 0 };
const bioCredential = {
  display: "flex", alignItems: "flex-start", gap: 18, marginTop: 26, padding: "20px 22px",
  background: "var(--bg-card)", border: "1px solid var(--border-gold)", borderRadius: "var(--r-md)",
  boxShadow: "0 18px 58px -52px rgba(10,9,8,.34)"
};
const bioCredentialTitle = {
  fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 12.5, letterSpacing: "0.13em",
  textTransform: "uppercase", color: "var(--accent)", lineHeight: 1.4
};
const bioCredentialText = {
  fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 16, color: "var(--fg-muted)",
  lineHeight: 1.72, margin: "8px 0 0", textWrap: "pretty"
};

/* SECTION 07.5 — YouTube / canal da Carina. */
function YouTubeSection() {
  const trackRef = React.useRef(null);
  const [videos, setVideos] = React.useState(window.CARINA_SEED_YOUTUBE || []);

  React.useEffect(() => {
    let alive = true;
    window.CARINA_LOAD_YOUTUBE().then(nextVideos => {
      if (alive && Array.isArray(nextVideos) && nextVideos.length) {
        setVideos(nextVideos);
      }
    });
    return () => { alive = false; };
  }, []);

  const scrollVideos = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    el.scrollBy({ left: dir * Math.min(520, el.clientWidth * 0.86), behavior: reduceMotion ? "auto" : "smooth" });
  };

  const formatDate = (value) => {
    if (!value) return "Vídeo do canal";
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return "Vídeo do canal";
    return new Intl.DateTimeFormat("pt-BR", { month: "short", year: "numeric" }).format(date);
  };

  return (
    <section id="youtube" className="cn-youtube-section" aria-labelledby="youtube-title">
      <div className="cn-youtube-shell">
        <Reveal>
          <div className="cn-youtube-head">
            <div>
              <div className="cn-eyebrow">Canal no YouTube</div>
              <h2 id="youtube-title" className="cn-youtube-title">
                Conteúdo para comprar melhor, investir com clareza e entender o mercado.
              </h2>
            </div>
            <div className="cn-youtube-copy">
              <p>
                No canal, a Carina fala de imóveis, consórcio, investimento e decisões financeiras com uma linguagem direta. É um bom próximo passo para quem quer sair da dúvida antes de conversar sobre um imóvel.
              </p>
              <div className="cn-youtube-actions">
                <a href={window.CARINA_YOUTUBE_CHANNEL} target="_blank" rel="noopener" className="cn-primary-cta">
                  <span className="cn-primary-cta__label">Conhecer o canal</span>
                </a>
                <div className="cn-youtube-arrows" aria-label="Navegar pelos vídeos">
                  <button type="button" aria-label="Ver vídeos anteriores" onClick={() => scrollVideos(-1)}>
                    <Icon name="chevron-left" size={20} color="currentColor" />
                  </button>
                  <button type="button" aria-label="Ver próximos vídeos" onClick={() => scrollVideos(1)}>
                    <Icon name="chevron-right" size={20} color="currentColor" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        <div ref={trackRef} className="cn-youtube-track" aria-label="Vídeos recentes do canal da Carina">
          {videos.map((video, index) => (
            <Reveal key={video.id || video.url} delay={index * 60} style={{ display: "flex" }}>
              <a className="cn-youtube-card" href={video.url} target="_blank" rel="noopener">
                <span className="cn-youtube-thumb">
                  <img src={video.thumbnail} alt="" width="480" height="360" loading="lazy" decoding="async" />
                  <span className="cn-youtube-play" aria-hidden="true">
                    <Icon name="youtube" size={28} color="currentColor" />
                  </span>
                </span>
                <span className="cn-youtube-meta">
                  <span>{formatDate(video.published)}</span>
                  <span>Assistir no YouTube</span>
                </span>
                <span className="cn-youtube-card-title">{video.title}</span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* SECTION 08 — FAQ. */
function FaqSection() {
  const [openIndex, setOpenIndex] = React.useState(0);
  const faqs = [
    [
      "A Carina atende apenas quem quer comprar?",
      "Não. A Carina acompanha compra, venda e investimento em imóveis em Gurupi e região. A conversa inicial serve para entender seu momento e indicar o caminho mais seguro."
    ],
    [
      "Preciso ter financiamento aprovado para começar?",
      "Não precisa. Antes de procurar o imóvel ideal, a Carina ajuda você a entender orçamento, documentação e possibilidades reais de crédito para evitar perda de tempo."
    ],
    [
      "Como funciona a escolha do bairro?",
      "A escolha considera rotina, acesso, valorização, escola, comércio, segurança percebida e objetivo do imóvel. A ideia é comprar com contexto, não apenas por foto ou preço."
    ],
    [
      "A Carina também ajuda quem quer vender?",
      "Sim. Para venda, o trabalho passa por avaliação de mercado, posicionamento do imóvel, orientação de apresentação, atendimento aos interessados e condução da negociação."
    ],
    [
      "Quais documentos preciso separar?",
      "Depende se você vai comprar, vender ou financiar. Em geral, documentos pessoais, comprovantes de renda, matrícula do imóvel e certidões entram na análise. A Carina orienta cada etapa."
    ],
    [
      "Consigo visitar imóveis antes de decidir?",
      "Sim. Depois da curadoria inicial, as visitas são organizadas para você comparar opções com clareza e sem agenda confusa."
    ],
    [
      "A primeira conversa tem custo?",
      "Não. A primeira conversa é para entender seu caso, tirar dúvidas e avaliar se a Carina pode ajudar você com segurança."
    ]
  ];

  return (
    <section id="faq" className="cn-light-section" style={{
      background: "var(--ivory-50)", borderTop: "1px solid var(--border-gold)",
      padding: "clamp(72px, 9vw, 118px) 0", scrollMarginTop: "var(--header-h)"
    }}>
      <div className="cn-faq-wrap" style={{ padding: "0 40px", textAlign: "center" }}>
        <Reveal>
          <SectionHead
            center
            eyebrow="Perguntas frequentes"
            title="Dúvidas comuns antes de comprar ou vender"
            sub="Respostas diretas para você entender o processo com mais segurança antes da primeira conversa."
          />
        </Reveal>

        <div className="cn-faq-list">
          {faqs.map(([question, answer], index) => {
            const isOpen = openIndex === index;
            const panelId = `faq-panel-${index}`;
            const buttonId = `faq-button-${index}`;

            return (
              <article key={question} className="cn-faq-item" data-open={isOpen ? "true" : "false"}>
                <button
                  id={buttonId}
                  className="cn-faq-button"
                  type="button"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpenIndex(isOpen ? -1 : index)}
                >
                  <span>{question}</span>
                  <span className="cn-faq-icon">
                    <Icon name={isOpen ? "x" : "chevron-down"} size={18} color="currentColor" />
                  </span>
                </button>
                {isOpen && (
                  <div id={panelId} role="region" aria-labelledby={buttonId} className="cn-faq-panel">
                    <p>{answer}</p>
                  </div>
                )}
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* SECTION 09 — CTA final. */
function FinalCTA({ onAll }) {
  const [status, setStatus] = React.useState("");

  const handleLeadSubmit = (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    if (!form.reportValidity()) return;

    const data = new FormData(form);
    const get = (key) => String(data.get(key) || "").trim();
    const fallback = (key, value = "Não informado") => get(key) || value;

    const message = [
      "Olá, Carina! Vim pelo site e quero atendimento.",
      "",
      "Dados do lead:",
      `Nome: ${fallback("nome")}`,
      `Telefone: ${fallback("telefone")}`,
      `Objetivo: ${fallback("objetivo")}`,
      `Tipo de imóvel: ${fallback("tipo")}`,
      `Bairro/região: ${fallback("bairro")}`,
      `Faixa de investimento: ${fallback("orcamento")}`,
      `Prazo para decidir: ${fallback("prazo")}`,
      `Financiamento: ${fallback("financiamento")}`,
      "",
      `Mensagem: ${fallback("mensagem", "Quero entender minhas opções com segurança.")}`
    ].join("\n");

    setStatus("Abrindo WhatsApp com suas informações já formatadas...");
    window.open(window.CARINA_WHATS_LINK(message), "_blank", "noopener");
  };

  return (
    <section id="contato" className="cn-light-section cn-lead-cta" style={{ scrollMarginTop: "var(--header-h)" }}>
      <div className="cn-lead-shell">
        <div className="cn-lead-grid">
          <Reveal>
            <div className="cn-lead-copy">
              <Flourish style={{ marginBottom: 26 }} />
              <div className="cn-eyebrow">Atendimento personalizado</div>
              <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: "clamp(34px, 5vw, 56px)", color: "var(--fg)", margin: "16px 0 0", lineHeight: 1.06, textWrap: "balance" }}>
                Conte seu momento e receba uma orientação mais <span style={{ fontStyle: "italic", color: "var(--accent)" }}>certeira.</span>
              </h2>
              <p style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 17, color: "var(--fg-muted)", margin: "22px 0 0", maxWidth: 560, lineHeight: 1.72, textWrap: "pretty" }}>
                Em vez de começar com uma conversa solta, envie as informações principais e a Carina já recebe seu caso organizado para responder com mais precisão.
              </p>

              <div className="cn-lead-proof" aria-label="Vantagens do primeiro contato">
                <div className="cn-lead-proof-item">
                  <span className="cn-lead-proof-icon"><Icon name="shield-check" size={18} /></span>
                  <h3 className="cn-lead-proof-title">Mais segurança</h3>
                  <p className="cn-lead-proof-text">A conversa começa com objetivo, prazo e orçamento claros.</p>
                </div>
                <div className="cn-lead-proof-item">
                  <span className="cn-lead-proof-icon"><Icon name="marker" size={18} /></span>
                  <h3 className="cn-lead-proof-title">Curadoria real</h3>
                  <p className="cn-lead-proof-text">Bairro, perfil e tipo de imóvel entram na orientação.</p>
                </div>
                <div className="cn-lead-proof-item">
                  <span className="cn-lead-proof-icon"><Icon name="calendar-check" size={18} /></span>
                  <h3 className="cn-lead-proof-title">Próximo passo</h3>
                  <p className="cn-lead-proof-text">Você sai do formulário direto para o WhatsApp.</p>
                </div>
              </div>

              <button className="cn-lead-secondary" type="button" onClick={onAll}>
                <Icon name="building-2" size={16} /> Ver imóveis disponíveis antes
              </button>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <form className="cn-lead-form" onSubmit={handleLeadSubmit}>
              <div className="cn-lead-form-head">
                <div className="cn-eyebrow">Diagnóstico inicial</div>
                <h3 className="cn-lead-form-title">Preencha para falar com a Carina pelo WhatsApp</h3>
                <p className="cn-lead-form-sub">
                  As respostas serão formatadas automaticamente em uma mensagem pronta para envio.
                </p>
              </div>

              <div className="cn-lead-form-grid">
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-name">Nome</label>
                  <input className="cn-lead-control" id="lead-name" name="nome" type="text" autoComplete="name" placeholder="Seu nome completo" required />
                </div>
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-phone">Telefone</label>
                  <input className="cn-lead-control" id="lead-phone" name="telefone" type="tel" inputMode="tel" autoComplete="tel" placeholder="(63) 99999-9999" required />
                </div>
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-goal">Objetivo</label>
                  <select className="cn-lead-control cn-lead-select" id="lead-goal" name="objetivo" defaultValue="" required>
                    <option value="" disabled>Selecionar</option>
                    <option>Comprar imóvel</option>
                    <option>Vender imóvel</option>
                    <option>Investir em imóvel</option>
                    <option>Entender possibilidades</option>
                  </select>
                </div>
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-type">Tipo de imóvel</label>
                  <select className="cn-lead-control cn-lead-select" id="lead-type" name="tipo" defaultValue="">
                    <option value="">Ainda não sei</option>
                    <option>Casa</option>
                    <option>Apartamento</option>
                    <option>Terreno</option>
                    <option>Comercial</option>
                  </select>
                </div>
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-region">Bairro ou região</label>
                  <input className="cn-lead-control" id="lead-region" name="bairro" type="text" autoComplete="address-level3" placeholder="Ex.: centro, Gurupi..." />
                </div>
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-budget">Investimento</label>
                  <select className="cn-lead-control cn-lead-select" id="lead-budget" name="orcamento" defaultValue="">
                    <option value="">Selecionar faixa</option>
                    <option>Até R$ 250 mil</option>
                    <option>R$ 250 mil a R$ 450 mil</option>
                    <option>R$ 450 mil a R$ 700 mil</option>
                    <option>Acima de R$ 700 mil</option>
                    <option>Quero vender meu imóvel</option>
                  </select>
                </div>
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-timing">Prazo</label>
                  <select className="cn-lead-control cn-lead-select" id="lead-timing" name="prazo" defaultValue="">
                    <option value="">Selecionar</option>
                    <option>Agora</option>
                    <option>Nos próximos 30 a 60 dias</option>
                    <option>Em 3 a 6 meses</option>
                    <option>Sem pressa</option>
                  </select>
                </div>
                <div className="cn-lead-field">
                  <label className="cn-lead-label" htmlFor="lead-financing">Financiamento</label>
                  <select className="cn-lead-control cn-lead-select" id="lead-financing" name="financiamento" defaultValue="">
                    <option value="">Selecionar</option>
                    <option>Já tenho crédito aprovado</option>
                    <option>Preciso simular financiamento</option>
                    <option>Compra à vista</option>
                    <option>Ainda não sei</option>
                  </select>
                </div>
                <div className="cn-lead-field cn-lead-field--full">
                  <label className="cn-lead-label" htmlFor="lead-message">O que você precisa resolver?</label>
                  <textarea className="cn-lead-control" id="lead-message" name="mensagem" autoComplete="off" placeholder="Conte se você quer comprar, vender, investir, sair do aluguel ou entender melhor seu momento." />
                </div>
              </div>

              <button className="cn-primary-cta cn-primary-cta--block cn-lead-submit" type="submit">
                <span className="cn-primary-cta__label">Enviar para WhatsApp</span>
              </button>
              <div className="cn-lead-status" aria-live="polite">
                {status || "Suas informações serão enviadas somente pelo WhatsApp."}
              </div>
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TestimonialsSection, BioSection, YouTubeSection, FaqSection, FinalCTA });
