/* ============================================================
   Borges — Página inicial institucional (landing)
   Estilo editorial / Pininfarina: monocromático, fios de
   cabelo, cantos retos, muito respiro, marcas de índice.
   Exposta como window.HomeScreen.
   ============================================================ */
const { useState: useStateH } = React;

const WHATSAPP = '5549991128184';
const WHATS_LABEL = '(49) 99112-8184';
const EMAIL = 'projetos@bescritorio.com';
const ADDRESS = 'Rua Almirante Tamandaré, 1480 · Centro · São Miguel do Oeste — SC';
const WA_LINK = (msg) => `https://wa.me/${WHATSAPP}?text=${encodeURIComponent(msg || 'Olá! Vim pelo site da Borges Engenharia e gostaria de mais informações.')}`;

function HomeScreen({ onDemo, onLogin, apiFetch }) {
  return (
    <div className="bz-home">
      <HomeNav onLogin={onLogin} onDemo={onDemo} />
      <HomeHero onDemo={onDemo} onLogin={onLogin} />
      <HomeCapabilities />
      <HomeQuote onDemo={onDemo} apiFetch={apiFetch} />
      <HomeCareers apiFetch={apiFetch} />
      <HomeFooter />
      <a className="bz-wa-float" href={WA_LINK()} target="_blank" rel="noopener" title="Falar no WhatsApp">
        <Icon name="message-circle" size={22} />
      </a>
    </div>
  );
}

/* ---------- nav ---------- */
function HomeNav({ onLogin, onDemo }) {
  const go = (id) => () => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };
  return (
    <header className="bz-nav">
      <div className="bz-nav-in">
        <div className="bz-row" style={{ gap: 12 }}>
          <img src="assets/borges-mark-black.png" alt="Borges" className="bz-nav-mark" />
          <span className="bz-nav-name">BORGES</span>
          <span className="bz-nav-sub">Engenharia &amp; Agrimensura</span>
        </div>
        <nav className="bz-nav-links">
          <button onClick={go('servicos')}>Serviços</button>
          <button onClick={go('orcamento')}>Orçamento</button>
          <button onClick={go('carreiras')}>Trabalhe conosco</button>
          <button onClick={go('contato')}>Contato</button>
          <button className="bz-nav-demo" onClick={onDemo}>Ver demonstração</button>
          <button className="bz-nav-login" onClick={onLogin}>Portal do cliente</button>
        </nav>
      </div>
    </header>
  );
}

/* ---------- hero ---------- */
function HomeHero({ onDemo, onLogin }) {
  return (
    <section className="bz-hero">
      <div className="bz-hero-text">
        <p className="bz-eyebrow">Engenharia Civil · Agrimensura · BIM</p>
        <h1 className="bz-hero-h1">
          Seu projeto em 3D,<br />no navegador.
        </h1>
        <p className="bz-hero-lead">
          A Borges Engenharia &amp; Agrimensura entrega projetos de arquitetura e
          engenharia que você visualiza, mede e comenta em tempo real — sem instalar
          nada. Precisão de obra, transparência com o cliente.
        </p>
        <div className="bz-hero-cta">
          <button className="bz-btn-ink" onClick={onDemo}>
            <Icon name="box" size={17} />Ver demonstração 3D
          </button>
          <button className="bz-btn-line" onClick={onLogin}>
            Acessar meu projeto<Icon name="arrow-right" size={15} />
          </button>
        </div>
      </div>

      <div className="bz-hero-vis" onClick={onDemo} title="Abrir demonstração">
        <span className="bz-crop tl" /><span className="bz-crop tr" />
        <span className="bz-crop bl" /><span className="bz-crop br" />
        <div className="bz-hero-cube">
          <span className="f f1" /><span className="f f2" /><span className="f f3" />
        </div>
        <div className="bz-hero-vis-foot">
          <span className="bz-mono">MODELO IFC · INTERATIVO</span>
          <span className="bz-play"><Icon name="play" size={13} /> Iniciar</span>
        </div>
        <span className="bz-vis-idx bz-mono">DEMO ·01</span>
      </div>
    </section>
  );
}

/* ---------- capabilities ---------- */
function HomeCapabilities() {
  const items = [
    ['01', 'compass', 'Agrimensura', 'Levantamentos planialtimétricos, georreferenciamento e demarcação com equipamentos de alta precisão.'],
    ['02', 'ruler', 'Projetos & BIM', 'Projetos estruturais e arquitetônicos modelados em BIM/IFC, prontos para execução e compatibilização.'],
    ['03', 'box', 'Visualização 3D', 'Portal exclusivo onde o cliente explora o modelo, mede distâncias e acompanha cada etapa da obra.'],
  ];
  return (
    <section className="bz-cap" id="servicos">
      <div className="bz-sec-head">
        <span className="bz-eyebrow">O que fazemos</span>
        <span className="bz-mono bz-faint">BORGES · 02</span>
      </div>
      <div className="bz-cap-grid">
        {items.map(([n, ic, t, d]) => (
          <div className="bz-cap-card" key={n}>
            <div className="bz-cap-top">
              <Icon name={ic} size={22} />
              <span className="bz-mono bz-faint">{n}</span>
            </div>
            <h3 className="bz-cap-title">{t}</h3>
            <p className="bz-cap-desc">{d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- quote / orçamento ---------- */
function HomeQuote({ apiFetch }) {
  const [form, setForm] = useStateH({ name: '', email: '', phone: '', message: '' });
  const [status, setStatus] = useStateH('idle'); // idle | sending | ok | error
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || (!form.email.trim() && !form.phone.trim())) {
      setStatus('error'); return;
    }
    setStatus('sending');
    const payload = { ...form, kind: 'orcamento' };
    try {
      if (apiFetch) {
        await apiFetch('/api/contato', { method: 'POST', body: JSON.stringify(payload) });
      } else {
        throw new Error('no-api');
      }
      setStatus('ok');
      setForm({ name: '', email: '', phone: '', message: '' });
    } catch (err) {
      // graceful fallback: open WhatsApp with the message pre-filled
      const msg = `Solicitação de orçamento\nNome: ${form.name}\nE-mail: ${form.email}\nTelefone: ${form.phone}\n\n${form.message}`;
      window.open(WA_LINK(msg), '_blank');
      setStatus('ok');
    }
  };

  return (
    <section className="bz-quote" id="orcamento">
      <div className="bz-quote-aside">
        <span className="bz-eyebrow">Orçamento</span>
        <h2 className="bz-quote-h2">Vamos tirar seu projeto do papel.</h2>
        <p className="bz-quote-lead">
          Conte um pouco sobre a obra. Retornamos com uma proposta por e-mail ou WhatsApp,
          normalmente em até 1 dia útil.
        </p>
        <div className="bz-quote-direct">
          <a href={WA_LINK('Olá! Gostaria de solicitar um orçamento.')} target="_blank" rel="noopener" className="bz-direct">
            <Icon name="message-circle" size={16} /> WhatsApp {WHATS_LABEL}
          </a>
          <a href={`mailto:${EMAIL}?subject=Solicitação de orçamento`} className="bz-direct">
            <Icon name="mail" size={16} /> {EMAIL}
          </a>
        </div>
      </div>

      <form className="bz-form" onSubmit={submit}>
        <label className="bz-field"><span>Nome *</span>
          <input value={form.name} onChange={set('name')} placeholder="Seu nome ou empresa" /></label>
        <div className="bz-field-row">
          <label className="bz-field"><span>E-mail</span>
            <input type="email" value={form.email} onChange={set('email')} placeholder="voce@email.com" /></label>
          <label className="bz-field"><span>Telefone</span>
            <input value={form.phone} onChange={set('phone')} placeholder="(00) 00000-0000" /></label>
        </div>
        <label className="bz-field"><span>Sobre o projeto</span>
          <textarea rows={3} value={form.message} onChange={set('message')}
            placeholder="Tipo de obra, localização, prazo desejado…" /></label>
        {status === 'error' && <p className="bz-form-msg bz-err">Informe ao menos o nome e um contato (e-mail ou telefone).</p>}
        {status === 'ok' && <p className="bz-form-msg bz-ok">Solicitação enviada. Em breve entraremos em contato.</p>}
        <button type="submit" className="bz-btn-ink bz-form-btn" disabled={status === 'sending'}>
          {status === 'sending' ? 'Enviando…' : 'Solicitar orçamento'}
          {status !== 'sending' && <Icon name="arrow-right" size={15} />}
        </button>
      </form>
    </section>
  );
}

/* ---------- careers ---------- */
function HomeCareers({ apiFetch }) {
  const [open, setOpen] = useStateH(false);
  const [form, setForm] = useStateH({ name: '', email: '', phone: '', message: '' });
  const [status, setStatus] = useStateH('idle');
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || (!form.email.trim() && !form.phone.trim())) {
      setStatus('error'); return;
    }
    setStatus('sending');
    try {
      if (apiFetch) {
        await apiFetch('/api/contato', { method: 'POST', body: JSON.stringify({ ...form, kind: 'carreira' }) });
      } else {
        throw new Error('no-api');
      }
      setStatus('ok');
      setForm({ name: '', email: '', phone: '', message: '' });
    } catch (err) {
      const msg = `Candidatura — Trabalhe conosco\nNome: ${form.name}\nE-mail: ${form.email}\nTelefone: ${form.phone}\n\n${form.message}`;
      window.open(WA_LINK(msg), '_blank');
      setStatus('ok');
    }
  };

  return (
    <section className="bz-careers" id="carreiras">
      <div className="bz-careers-in">
        <div>
          <span className="bz-eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>Trabalhe conosco</span>
          <h2 className="bz-careers-h2">Faça parte da equipe Borges.</h2>
          <p className="bz-careers-lead">
            Buscamos engenheiros, técnicos e estagiários apaixonados por precisão.
            Envie seu currículo — analisamos todas as candidaturas.
          </p>
        </div>
        {!open ? (
          <button className="bz-btn-paper" onClick={() => setOpen(true)}>
            <Icon name="paperclip" size={16} /> Enviar currículo
          </button>
        ) : (
          <form className="bz-career-form" onSubmit={submit}>
            <input placeholder="Seu nome *" value={form.name} onChange={set('name')} required />
            <input placeholder="E-mail" type="email" value={form.email} onChange={set('email')} />
            <input placeholder="Telefone" value={form.phone} onChange={set('phone')} />
            <textarea rows={2} placeholder="Área de interesse, experiência..." value={form.message} onChange={set('message')} />
            {status === 'error' && <p className="bz-form-msg bz-err" style={{ color: '#fca5a5' }}>Informe o nome e um contato.</p>}
            {status === 'ok' && <p className="bz-form-msg" style={{ color: '#86efac' }}>Candidatura enviada com sucesso.</p>}
            <div style={{ display: 'flex', gap: 10 }}>
              <button type="submit" className="bz-btn-paper" disabled={status === 'sending'}>
                {status === 'sending' ? 'Enviando...' : 'Enviar candidatura'}
              </button>
              <a className="bz-btn-paper" href={`mailto:${EMAIL}?subject=Trabalhe conosco — currículo&body=Olá, segue meu currículo em anexo.`}
                style={{ opacity: 0.7, fontSize: 13 }}>
                <Icon name="mail" size={14} /> Ou envie por e-mail
              </a>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

/* ---------- footer / contato ---------- */
function HomeFooter() {
  return (
    <footer className="bz-footer" id="contato">
      <div className="bz-footer-grid">
        <div className="bz-footer-brand">
          <img src="assets/borges-logo-black.png" alt="Borges" className="bz-footer-logo" />
          <p className="bz-footer-tag">Engenharia &amp; Agrimensura</p>
        </div>
        <div className="bz-footer-col">
          <span className="bz-mono bz-faint">Endereço</span>
          <p>{ADDRESS}</p>
        </div>
        <div className="bz-footer-col">
          <span className="bz-mono bz-faint">Contato</span>
          <a href={WA_LINK()} target="_blank" rel="noopener">WhatsApp {WHATS_LABEL}</a>
          <a href={`mailto:${EMAIL}`}>{EMAIL}</a>
        </div>
      </div>
      <div className="bz-footer-base">
        <span className="bz-mono bz-faint">© {new Date().getFullYear()} BORGES · ENGENHARIA &amp; AGRIMENSURA</span>
        <span className="bz-credit bz-mono">Desenvolvido por Laura Raíssa</span>
      </div>
    </footer>
  );
}

Object.assign(window, { HomeScreen });