/* global React, Icon, Reveal, Eyebrow, Pill, Section */

const TESTIMONIALS = [
  { q: "Foi a melhor coisa que fiz!...me ajudou muito. Não poderia ser com outra pessoa.", n: "Dra. Bianca Schorn", r: "Médica Dermatologista" },
  { q: "Foi uma das melhores decisões que tomei para profissionalizar meu Instagram.", n: "Dra. Mari Bonilha", r: "Médica Tricologista" },
  { q: "O processo me deixou mais confiante diante da câmera.", n: "Dra. Fabiana Terra", r: "Médica Nutróloga" },
];

function Testimonials() {
  return (
    <Section id="depoimentos" style={{ background: "var(--gradient-soft)" }}>
      <Reveal>
        <div style={{ maxWidth: 640, marginBottom: 56 }}>
          <Eyebrow>Depoimentos</Eyebrow>
          <h2 className="vl-display-2" style={{ marginTop: 24 }}>O que dizem as marcas que confiaram <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>à</em> Vittalure.</h2>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }} className="vl-test-grid">
        {TESTIMONIALS.map((t, i) => (
          <Reveal key={t.n} delay={i * 80}>
            <figure style={{ margin: 0, padding: 36, borderRadius: 16, background: "var(--surface)", border: "1px solid var(--line)", boxShadow: "var(--shadow-soft)", height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column" }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 60, color: "var(--steel)", lineHeight: .5, height: 30, display: "block" }}>"</span>
              <blockquote style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(1.2rem,1.7vw,1.5rem)", color: "var(--graphite)", lineHeight: 1.32, margin: 0, flex: 1 }}>{t.q}</blockquote>
              <figcaption style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: "var(--graphite)" }}>{t.n}</div>
                <div className="vl-caption" style={{ marginTop: 4 }}>{t.r}</div>
              </figcaption>
            </figure>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function CtaBanner() {
  return (
    <Section>
      <Reveal>
        <div style={{ position: "relative", overflow: "hidden", borderRadius: 32, background: "var(--graphite)", color: "var(--champagne)", padding: "clamp(48px,8vw,80px)", textAlign: "center" }}>
          <div style={{ position: "absolute", top: -160, right: -160, width: 448, height: 448, borderRadius: "50%", background: "rgba(125,154,179,.4)", filter: "blur(80px)" }} />
          <div style={{ position: "absolute", bottom: -160, left: -160, width: 448, height: 448, borderRadius: "50%", background: "rgba(183,198,212,.3)", filter: "blur(80px)" }} />
          <div style={{ position: "relative", maxWidth: 760, margin: "0 auto" }}>
            <span className="vl-eyebrow" style={{ color: "var(--steel-light)" }}>Um convite</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.9rem,4vw,3.5rem)", lineHeight: 1.1, margin: "24px 0 36px", textWrap: "balance" }}>
              Se a sua marca já entrega valor, sua presença digital precisa <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel-light)" }}>comunicar isso</em> com a mesma força.
            </h2>
            <Pill variant="accent" icon="arrow-right" href="#contato">Falar com a Vittalure</Pill>
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

function Contact() {
  return (
    <Section id="contato" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "var(--gradient-hero)", opacity: .6, zIndex: -1 }} />
      <Reveal>
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
          <Eyebrow>Vamos conversar</Eyebrow>
          <h2 className="vl-display-2" style={{ marginTop: 24 }}>
            Sua marca pode ser percebida com mais <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--steel)" }}>clareza, beleza</em> e autoridade.
          </h2>
          <p className="vl-lead" style={{ maxWidth: 560, margin: "28px auto 0" }}>
            Conte-nos sobre seu momento. Em poucos dias retornamos com uma conversa diagnóstica e os próximos passos possíveis.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 14, justifyContent: "center", marginTop: 36 }}>
            <Pill variant="primary" href="https://wa.me/5551995672193?text=Ol%C3%A1%2C%20Vittalure!%20Gostaria%20de%20conversar%20sobre%20posicionamento%20digital." target="_blank" rel="noopener noreferrer"><Icon name="message-circle" size={16} /> WhatsApp</Pill>
            <Pill variant="outline" href="https://instagram.com/vittalure_" target="_blank" rel="noopener noreferrer"><Icon name="at-sign" size={16} /> Instagram</Pill>
            <Pill variant="outline" href="mailto:comercial@vittalure.com.br"><Icon name="mail" size={16} /> E-mail</Pill>
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

function Footer() {
  const linkStyle = { color: "var(--graphite-soft)", textDecoration: "none", fontSize: 14, lineHeight: 2 };
  return (
    <footer style={{ borderTop: "1px solid var(--line)", background: "rgba(250,248,244,.5)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "64px clamp(24px,5vw,40px)", display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 40 }} className="vl-foot-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img src="assets/vittalure-symbol.png" alt="Vittalure" style={{ height: 36, width: 36, objectFit: "contain" }} />
            <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 22, letterSpacing: ".18em", color: "var(--graphite)" }}>VITTALURE</div>
          </div>
          <p className="vl-body-sm" style={{ maxWidth: 280, marginTop: 16 }}>Agência digital de posicionamento, branding e presença digital para marcas de alto padrão.</p>
        </div>
        <div>
          <div className="vl-eyebrow" style={{ display: "block", marginBottom: 16 }}>Navegação</div>
          {[["Sobre", "#sobre"], ["Serviços", "#servicos"], ["Cases", "#cases"], ["Processo", "#processo"], ["Contato", "#contato"]].map(([l, h]) => <a key={l} href={h} style={{ ...linkStyle, display: "block" }}>{l}</a>)}
        </div>
        <div>
          <div className="vl-eyebrow" style={{ display: "block", marginBottom: 16 }}>Contato</div>
          <a href="mailto:comercial@vittalure.com.br" style={{ ...linkStyle, display: "block" }}>comercial@vittalure.com.br</a>
          <a href="https://instagram.com/vittalure_" target="_blank" rel="noopener noreferrer" style={{ ...linkStyle, display: "block" }}>@vittalure_</a>
          <a href="https://wa.me/5551995672193?text=Ol%C3%A1%2C%20Vittalure!%20Gostaria%20de%20conversar%20sobre%20posicionamento%20digital." target="_blank" rel="noopener noreferrer" style={{ ...linkStyle, display: "block" }}>WhatsApp · (51) 99567-2193</a>
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "24px clamp(24px,5vw,40px)", display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 12, fontSize: 12, color: "var(--graphite-soft)" }}>
          <span>© 2026 Vittalure. Todos os direitos reservados.</span>
          <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16 }}>Posicionamento com precisão. Presença com propósito.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Testimonials, CtaBanner, Contact, Footer });