/* global React, ReactDOM, Header, Footer, BrandMark */

const { useState: useStateC } = React;

/* ============================================================
   Icons (inline SVG, brand-aligned)
   ============================================================ */
const Icon = {
  mail: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <polyline points="3 7 12 13 21 7" />
    </svg>
  ),
  phone: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  ),
  clock: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  ),
  pin: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  shield: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <polyline points="9 12 11 14 15 10" />
    </svg>
  ),
  check: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
};

/* ============================================================
   Hero — Contato
   ============================================================ */
function ContatoHero() {
  return (
    <section className="contato-hero" id="top">
      <div className="container">
        <div className="contato-hero-inner">
          <div style={{ display: "grid", gap: 24 }}>
            <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>
              CONTATO · MINERSUITE
            </span>
            <h1>
              Fale com a equipe <span className="gold">MinerSuite.</span>
            </h1>
            <p className="lede">
              Tire dúvidas, solicite uma demonstração ou converse sobre condições
              comerciais e planos personalizados para a sua consultoria em
              mineração.
            </p>
            <p className="sub">
              Nosso time conhece a rotina técnica e operacional do setor mineral.
              Conte sobre o estágio da sua consultoria — clientes, equipe,
              projetos em andamento — e indicaremos o caminho mais adequado.
            </p>
          </div>
          <div className="contato-hero-meta">
            <div className="m">
              <span className="icon">{Icon.mail}</span>
              <div>
                <span className="k">E-MAIL DIRETO</span>
                <div className="v">contato@minersuite.com.br</div>
              </div>
              <span className="badge">ATIVO</span>
            </div>
            <div className="m">
              <span className="icon">{Icon.clock}</span>
              <div>
                <span className="k">RESPOSTA EM</span>
                <div className="v">Até 1 dia útil</div>
              </div>
              <span className="badge">SLA</span>
            </div>
            <div className="m">
              <span className="icon">{Icon.shield}</span>
              <div>
                <span className="k">DADOS</span>
                <div className="v">Confidenciais · LGPD</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Form
   ============================================================ */
const ASSUNTOS = [
  "Solicitar demonstração",
  "Dúvida comercial",
  "Plano Enterprise · sob consulta",
  "Suporte ao cliente",
  "Parcerias",
  "Outro assunto",
];

const PORTES = [
  "Engenheiro autônomo",
  "Consultoria · até 3 pessoas",
  "Consultoria · 4 a 10 pessoas",
  "Consultoria · 11 a 25 pessoas",
  "Consultoria · 26+ pessoas",
];

function ContactForm() {
  const [sent, setSent] = useStateC(false);
  const [form, setForm] = useStateC({
    nome: "",
    email: "",
    empresa: "",
    cargo: "",
    telefone: "",
    porte: "",
    assunto: "Solicitar demonstração",
    mensagem: "",
    consent: false,
  });

  function handle(field, value) {
    setForm((f) => ({ ...f, [field]: value }));
  }

  function submit(e) {
    e.preventDefault();
    // Mock: in production, POST to backend.
    setSent(true);
    window.scrollTo({ top: window.scrollY, behavior: "instant" });
  }

  if (sent) {
    const ref = "MS-" + Math.random().toString(36).slice(2, 8).toUpperCase();
    return (
      <div className="form-success">
        <span className="icon">{Icon.check}</span>
        <h3>Mensagem recebida. Obrigado pelo contato.</h3>
        <p>
          A equipe MinerSuite vai analisar o seu pedido e retornar em até <strong>1 dia útil</strong> pelo
          e-mail informado. Se a solicitação for sobre demonstração, vamos agendar um horário
          conforme a sua disponibilidade.
        </p>
        <div className="ref">
          PROTOCOLO · {ref} · {new Date().toLocaleDateString("pt-BR")} · ENCAMINHADO
        </div>
        <div style={{ display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" }}>
          <button type="button" className="btn btn--ghost" onClick={() => { setSent(false); setForm({ nome:"",email:"",empresa:"",cargo:"",telefone:"",porte:"",assunto:"Solicitar demonstração",mensagem:"",consent:false}); }}>
            Enviar outra mensagem
          </button>
          <a href="planos.html" className="btn btn--ink">Ver planos<span className="arrow">→</span></a>
        </div>
      </div>
    );
  }

  return (
    <div className="contact-form-wrap">
      <div className="contact-form-head">
        <span className="eyebrow">FORMULÁRIO · MENSAGEM DIRETA</span>
        <h2>Conte sobre a sua consultoria.</h2>
        <p>
          Preencha os campos abaixo. Quanto mais contexto sobre a operação, mais preciso será o retorno da equipe.
        </p>
      </div>
      <form className="contact-form" onSubmit={submit}>
        <div className="field field--row">
          <div className="field">
            <label htmlFor="nome">Nome completo <span className="req">*</span></label>
            <input id="nome" name="nome" type="text" required value={form.nome}
              onChange={(e) => handle("nome", e.target.value)} placeholder="Ex.: Marília Carvalho" />
          </div>
          <div className="field">
            <label htmlFor="email">E-mail corporativo <span className="req">*</span></label>
            <input id="email" name="email" type="email" required value={form.email}
              onChange={(e) => handle("email", e.target.value)} placeholder="voce@consultoria.com.br" />
          </div>
        </div>

        <div className="field field--row">
          <div className="field">
            <label htmlFor="empresa">Empresa / consultoria</label>
            <input id="empresa" name="empresa" type="text" value={form.empresa}
              onChange={(e) => handle("empresa", e.target.value)} placeholder="Ex.: Aurélia Mineração" />
          </div>
          <div className="field">
            <label htmlFor="cargo">Cargo / função</label>
            <input id="cargo" name="cargo" type="text" value={form.cargo}
              onChange={(e) => handle("cargo", e.target.value)} placeholder="Ex.: Engenheira de minas" />
          </div>
        </div>

        <div className="field field--row">
          <div className="field">
            <label htmlFor="telefone">Telefone / WhatsApp</label>
            <input id="telefone" name="telefone" type="tel" value={form.telefone}
              onChange={(e) => handle("telefone", e.target.value)} placeholder="(31) 90000-0000" />
          </div>
          <div className="field">
            <label htmlFor="porte">Porte da operação</label>
            <select id="porte" name="porte" value={form.porte} onChange={(e) => handle("porte", e.target.value)}>
              <option value="">Selecione</option>
              {PORTES.map((p) => <option key={p} value={p}>{p}</option>)}
            </select>
          </div>
        </div>

        <div className="field">
          <label htmlFor="assunto">Assunto <span className="req">*</span></label>
          <select id="assunto" name="assunto" required value={form.assunto}
            onChange={(e) => handle("assunto", e.target.value)}>
            {ASSUNTOS.map((a) => <option key={a} value={a}>{a}</option>)}
          </select>
        </div>

        <div className="field">
          <label htmlFor="mensagem">Mensagem <span className="req">*</span></label>
          <textarea id="mensagem" name="mensagem" required rows="5" value={form.mensagem}
            onChange={(e) => handle("mensagem", e.target.value)}
            placeholder="Descreva brevemente o estágio da consultoria, os módulos de maior interesse e o que pretende organizar com a plataforma." />
        </div>

        <label className="consent">
          <input type="checkbox" required checked={form.consent}
            onChange={(e) => handle("consent", e.target.checked)} />
          <span>
            Autorizo a equipe MinerSuite a entrar em contato sobre este pedido, em conformidade com a
            <a href="#privacidade"> Política de Privacidade</a> e a Lei Geral de Proteção de Dados.
          </span>
        </label>

        <div className="form-actions">
          <span className="hint">CAMPOS COM <span style={{ color: "var(--ms-gold)" }}>*</span> SÃO OBRIGATÓRIOS</span>
          <button type="submit" className="btn btn--primary btn-submit">
            Enviar mensagem
            <span className="arrow">→</span>
          </button>
        </div>
      </form>
    </div>
  );
}

/* ============================================================
   Channels (right column)
   ============================================================ */
function Channels() {
  return (
    <div className="channels">
      <div className="channels-head">
        <span className="eyebrow">CANAIS · DIRETOS</span>
        <h3 style={{ marginTop: 12 }}>Prefere falar fora do formulário?</h3>
        <p>Escolha o canal mais adequado. Todos chegam ao mesmo time, com tempo de resposta de até 1 dia útil.</p>
      </div>

      <div className="channel">
        <span className="icon">{Icon.mail}</span>
        <div>
          <span className="k">COMERCIAL</span>
          <div className="v"><a href="mailto:contato@minersuite.com.br">contato@minersuite.com.br</a></div>
          <div className="sub">Demonstração, planos, condições comerciais e parcerias.</div>
        </div>
      </div>

      <div className="channel">
        <span className="icon">{Icon.mail}</span>
        <div>
          <span className="k">SUPORTE</span>
          <div className="v"><a href="mailto:suporte@minersuite.com.br">suporte@minersuite.com.br</a></div>
          <div className="sub">Para clientes ativos · dúvidas técnicas, atualizações e configuração.</div>
        </div>
      </div>

      <div className="channel">
        <span className="icon">{Icon.phone}</span>
        <div>
          <span className="k">TELEFONE · WHATSAPP</span>
          <div className="v">+55 (31) 99000-0000</div>
          <div className="sub">Atendimento humano para urgências comerciais.</div>
        </div>
      </div>

      <div className="channel">
        <span className="icon">{Icon.pin}</span>
        <div>
          <span className="k">ENDEREÇO</span>
          <div className="v">Belo Horizonte · MG · Brasil</div>
          <div className="sub">Operação remota, atendendo consultorias em todo o país.</div>
        </div>
      </div>

      <div className="channel-info">
        <span className="k">HORÁRIO DE ATENDIMENTO</span>
        <div className="v">Segunda a sexta · 09h às 18h (UTC−3)</div>
        <span className="k" style={{ marginTop: 6 }}>FORA DO HORÁRIO</span>
        <div className="v" style={{ fontWeight: 400, fontSize: 13.5, color: "rgba(246,244,238,0.78)" }}>
          Mensagens recebidas são respondidas no próximo dia útil.
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Form + channels section
   ============================================================ */
function ContatoMain() {
  return (
    <section className="section contato-main" id="formulario">
      <div className="container contato-grid">
        <ContactForm />
        <Channels />
      </div>
    </section>
  );
}

/* ============================================================
   Steps — what to expect after submitting
   ============================================================ */
const STEPS = [
  {
    n: "01",
    t: "Recebemos sua mensagem",
    p: "Você recebe uma confirmação automática no e-mail informado, junto com o número de protocolo do contato.",
    d: "Imediato",
  },
  {
    n: "02",
    t: "Análise pela equipe",
    p: "Identificamos o estágio da sua consultoria e o assunto da mensagem, e direcionamos para a pessoa certa do time.",
    d: "Em até 4 horas úteis",
  },
  {
    n: "03",
    t: "Retorno e próximos passos",
    p: "Você recebe a resposta por e-mail. Se for demonstração, agendamos um horário conforme sua disponibilidade.",
    d: "Em até 1 dia útil",
  },
];

function Steps() {
  return (
    <section className="section steps">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">FLUXO · O QUE ESPERAR</span>
          <h2>O que acontece depois que você envia a mensagem.</h2>
          <p className="lede">
            Sem fila genérica de atendimento. Cada contato é analisado pela
            equipe e direcionado ao especialista mais adequado.
          </p>
        </div>
        <div className="steps-grid">
          {STEPS.map((s) => (
            <article key={s.n} className="step-card">
              <span className="step-id">{s.n}</span>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
              <span className="duration">⌁ {s.d}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Quick options — alternative paths
   ============================================================ */
function QuickOptions() {
  return (
    <section className="section quick-options">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">ATALHOS · OUTRAS OPÇÕES</span>
          <h2>Talvez você esteja procurando por isto.</h2>
        </div>
        <div className="quick-grid">
          <a href="contato.html" className="quick-cell">
            <span className="k">DEMONSTRAÇÃO</span>
            <h4>Quero ver o sistema em funcionamento</h4>
            <p>Agende uma sessão guiada com a equipe para conhecer os módulos aplicados à sua consultoria.</p>
            <span className="link">Solicitar demonstração <span className="arrow">→</span></span>
          </a>
          <a href="planos.html" className="quick-cell">
            <span className="k">PLANOS</span>
            <h4>Quero comparar valores e recursos</h4>
            <p>Confira a tabela completa com Starter, Essencial, Profissional, Business e Enterprise.</p>
            <span className="link">Ver todos os planos <span className="arrow">→</span></span>
          </a>
          <a href="index.html#modulos" className="quick-cell">
            <span className="k">MÓDULOS</span>
            <h4>Quero entender os módulos do sistema</h4>
            <p>Veja como cada módulo resolve um pedaço da rotina da consultoria mineral.</p>
            <span className="link">Conhecer módulos <span className="arrow">→</span></span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CTA Final
   ============================================================ */
function ContatoCTAFinal() {
  return (
    <section className="section cta-final" id="demonstracao">
      <div className="container">
        <div className="cta-final-inner">
          <span className="eyebrow" style={{ color: "var(--ms-gold-soft)" }}>
            PRÓXIMO PASSO
          </span>
          <h2>
            Pronto para organizar a sua consultoria em mineração com
            <span style={{ color: "var(--ms-gold)" }}> inteligência e controle?</span>
          </h2>
          <p className="lede">
            Solicite uma demonstração e veja como o MinerSuite centraliza
            clientes, propostas, contratos, financeiro e projetos técnicos.
          </p>
          <div className="cta-buttons">
            <a href="#formulario" className="btn btn--primary">
              Solicitar demonstração
              <span className="arrow">→</span>
            </a>
            <a href="planos.html" className="btn btn--ghost btn--on-dark">
              Ver planos
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Page
   ============================================================ */
function ContatoPage() {
  return (
    <>
      <Header />
      <main>
        <ContatoHero />
        <ContatoMain />
        <Steps />
        <QuickOptions />
        <ContatoCTAFinal />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContatoPage />);