// ORIGENS — marketing website (UI kit). Self-contained; mirrors DS primitives.
const { useState, useEffect, useRef } = React;
const ASSET = 'assets/';

/* Reveal-on-scroll helper — a small, purposeful entrance. */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    document.documentElement.classList.add('js-anim');
    const els = ref.current ? Array.from(ref.current.querySelectorAll('.reveal')) : [];
    const show = (el) => { el.style.transitionDelay = (el.dataset.delay || 0) + 'ms'; el.classList.add('in'); };
    let io;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((es) => {
        es.forEach((e) => { if (e.isIntersecting) { show(e.target); io.unobserve(e.target); } });
      }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
      els.forEach((el) => io.observe(el));
    }
    // Guaranteed fallback — never leave content hidden if IO doesn't fire.
    const t = setTimeout(() => els.forEach(show), 700);
    return () => { if (io) io.disconnect(); clearTimeout(t); };
  }, []);
  return ref;
}

function Icon({ name, ...rest }) { return <i data-lucide={name} {...rest} />; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['Soluções', '#solucoes'], ['Processo', '#processo'], ['Atuação', '#atuacao'], ['Sobre', '#sobre'], ['Dúvidas', '#duvidas']];
  return (
    <header className={'nav' + (scrolled ? ' nav--scrolled' : '')}>
      <div className="wrap wrap--wide nav__bar">
        <a href="#topo" className="ogn-logo-mark" style={{ display: 'flex', alignItems: 'center', gap: '.6em' }}>
          <img className="nav__logoimg" src={ASSET + 'symbol.png'} alt="" style={{ height: 34 }} />
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 19, letterSpacing: '-.02em', color: 'inherit' }}>ORIGENS</span>
            <span className="nav__logosub" style={{ fontWeight: 600, fontSize: 7.5, letterSpacing: '.22em', color: 'var(--text-muted)' }}>PARCERIAS AGRÍCOLAS</span>
          </span>
        </a>
        <nav className="nav__links">
          {links.map(([t, h]) => <a key={h} href={h} className="nav__link">{t}</a>)}
          <a href="#contato" className="btn nav__cta">Fale com a gente</a>
        </nav>
        <button className="nav__burger" onClick={() => setOpen(o => !o)} aria-label="Menu"><Icon name={open ? 'x' : 'menu'} /></button>
      </div>
      {open && (
        <div className="nav__mobile">
          {links.map(([t, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
          <a href="#contato" onClick={() => setOpen(false)} style={{ fontWeight: 700 }}>Fale com a gente →</a>
        </div>
      )}
    </header>
  );
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
function Hero() {
  const ref = useReveal();

  return (
    <section id="topo" className="hero" ref={ref}>
      <div className="hero__bg">
        <video
          autoPlay muted loop playsInline
          onError={(e) => { e.currentTarget.style.display = 'none'; }}
        >
          <source src="https://videos.pexels.com/video-files/2758322/2758322-uhd_3840_2160_30fps.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="hero__lines" aria-hidden="true" />

      <div className="wrap wrap--wide">
        <div className="hero__grid">
          <div>
            <span className="eyebrow reveal"><span className="rule" />Parcerias Agrícolas</span>
            <h1 className="h-display reveal" data-delay="80">Parcerias que nascem de raízes sólidas.</h1>
            <p className="lead hero__lead reveal" data-delay="160">Conectamos produtores e mercado com estrutura, transparência e relações construídas para o longo prazo — do campo à colheita.</p>
            <div className="hero__cta reveal" data-delay="240">
              <a href="#contato" className="btn btn--lg">Fale com a gente <span className="arr">→</span></a>
              <a href="#solucoes" className="btn btn--secondary btn--lg" style={{ '--_fg': 'var(--paper)', '--_bd': 'rgba(255,255,255,.55)' }}>Conheça as soluções</a>
            </div>
            <div className="hero__meta reveal" data-delay="320">
              <span className="mono">DO CAMPO AO MERCADO</span>
              <span className="mono">SAFRA 24/25</span>
              <span className="mono">5 ESTADOS</span>
            </div>
          </div>
          <div className="hero__sym reveal" data-delay="120"><img src={ASSET + 'symbol.png'} alt="Símbolo ORIGENS" /></div>
        </div>
      </div>
    </section>
  );
}


/* ── Services ─────────────────────────────────────────────────────────── */
function Services() {
  const ref = useReveal();
  const items = [
    ['01', 'land-plot', 'Variabilidade espacial e zonas de manejo', 'Mapeamento da variabilidade do talhão e definição de zonas de manejo para decisões sítio-específicas.'],
    ['02', 'tractor', 'Mecanização agrícola', 'Ajuste de máquinas e operações para mais eficiência e menos custo em cada passada no campo.'],
    ['03', 'shovel', 'Amostragem de solo', 'Coleta georreferenciada e estruturada para uma leitura precisa da fertilidade de cada área.'],
    ['04', 'user-round', 'Consultoria agronômica', 'Acompanhamento técnico de perto, da semeadura à colheita, com recomendações sob medida.'],
    ['05', 'sprout', 'Assessoria em fertilidade do solo', 'Diagnóstico e estratégia de correção e adubação para construir e manter solos produtivos.'],
    ['06', 'clipboard-list', 'Assessoria em planejamento agrícola', 'Planejamento de safra, rotação e recursos para uma operação previsível e bem dimensionada.'],
    ['07', 'satellite', 'Pesquisa em geoprocessamento', 'Sensoriamento remoto e dados geoespaciais aplicados ao monitoramento da lavoura.'],
    ['08', 'flask-conical', 'Pesquisa aplicada', 'Ensaios e validação em campo que transformam dados em prática agronômica.'],
  ];
  return (
    <section id="solucoes" className="section" ref={ref}>
      <div className="wrap wrap--wide">
        <div className="head reveal">
          <span className="eyebrow"><span className="rule" />O que fazemos</span>
          <h2 className="h2">Soluções técnicas para<br />cada etapa da lavoura.</h2>
          <p className="lead">Da análise do solo ao dado geoespacial — frentes que se complementam para uma agricultura mais precisa, produtiva e previsível.</p>
        </div>
        <div className="svc reveal" data-delay="80">
          {items.map(([n, ico, t, d]) => (
            <div className="svc__card" key={n}>
              <span className="svc__idx">{n}</span>
              <span className="svc__ico"><Icon name={ico} /></span>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Manifesto (dark) ─────────────────────────────────────────────────── */
function Manifesto() {
  const ref = useReveal();
  return (
    <section id="sobre" className="section manifesto origens-dark" ref={ref}>
      <div className="manifesto__photo" aria-hidden="true" />
      <div className="wrap wrap--wide">
        <span className="eyebrow reveal"><span className="rule" />Nossa origem</span>
        <blockquote className="manifesto__q reveal" data-delay="100">
          O crescimento acima do solo depende de bases fortes abaixo dele. <em>Resultados sustentáveis nascem de relacionamentos sólidos.</em>
        </blockquote>
        <div className="hero__meta reveal" data-delay="180" style={{ marginTop: 48, borderTopColor: 'var(--border)' }}>
          <span className="mono" style={{ fontSize: '.72rem', color: 'var(--text-subtle)', textTransform: 'uppercase' }}>ORIGENS — Parcerias Agrícolas</span>
        </div>
      </div>
    </section>
  );
}

/* ── Process ──────────────────────────────────────────────────────────── */
function Process() {
  const ref = useReveal();
  const steps = [
    ['01', 'Diagnóstico', 'Entendemos a operação, a cultura e os objetivos de cada produtor.'],
    ['02', 'Estruturação', 'Desenhamos o acordo, a logística e as garantias de forma transparente.'],
    ['03', 'Execução', 'Acompanhamos cada etapa, do plantio ao escoamento da produção.'],
    ['04', 'Resultado', 'Medimos, ajustamos e fortalecemos a parceria para a próxima safra.'],
  ];
  return (
    <section id="processo" className="section" style={{ background: 'var(--bg-soft)', borderBlock: '1px solid var(--border)' }} ref={ref}>
      <div className="wrap wrap--wide">
        <div className="head reveal">
          <span className="eyebrow"><span className="rule" />Como trabalhamos</span>
          <h2 className="h2">Um processo, quatro raízes.</h2>
        </div>
        <div className="steps">
          {steps.map(([n, t, d], i) => (
            <div className="step reveal" data-delay={i * 70} key={n}>
              <span className="step__n">{n}</span>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Áreas de atuação (mapa) ──────────────────────────────────────────── */
const ATU = {
  states: { MT: 'Mato Grosso', MS: 'Mato Grosso do Sul', GO: 'Goiás', TO: 'Tocantins', DF: 'Distrito Federal' },
  totals: { mun: 26, ha: 230000, pesquisa: 500 },
  culturas: ['Soja', 'Milho', 'Algodão'],
};
const NAME2UF = {
  'Acre': 'AC', 'Alagoas': 'AL', 'Amapá': 'AP', 'Amazonas': 'AM', 'Bahia': 'BA', 'Ceará': 'CE',
  'Distrito Federal': 'DF', 'Espírito Santo': 'ES', 'Goiás': 'GO', 'Maranhão': 'MA',
  'Mato Grosso': 'MT', 'Mato Grosso do Sul': 'MS', 'Minas Gerais': 'MG', 'Pará': 'PA',
  'Paraíba': 'PB', 'Paraná': 'PR', 'Pernambuco': 'PE', 'Piauí': 'PI', 'Rio de Janeiro': 'RJ',
  'Rio Grande do Norte': 'RN', 'Rio Grande do Sul': 'RS', 'Rondônia': 'RO', 'Roraima': 'RR',
  'Santa Catarina': 'SC', 'São Paulo': 'SP', 'Sergipe': 'SE', 'Tocantins': 'TO',
};
const GEO_URL = 'https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/brazil-states.geojson';
const GEO_CACHE = 'origens_br_geojson_v1';
const fmtBR = (n) => n.toLocaleString('pt-BR');

function Atuacao() {
  const ref = useReveal();
  const mapRef = useRef(null);
  const tipRef = useRef(null);

  useEffect(() => {
    const wrap = mapRef.current, tip = tipRef.current;
    if (!wrap || !window.d3) return;
    let alive = true;

    const ufOf = (p) => p.sigla || p.SIGLA || NAME2UF[p.name] || NAME2UF[p.NOME] || '';

    const draw = (geo) => {
      if (!alive) return;
      wrap.innerHTML = '';
      const d3 = window.d3, W = 760, H = 720;
      const svg = d3.create('svg').attr('class', 'atu-map').attr('viewBox', `0 0 ${W} ${H}`).attr('role', 'img')
        .attr('aria-label', 'Mapa do Brasil com os estados de atuação da ORIGENS destacados');
      const defs = svg.append('defs');
      const f = defs.append('filter').attr('id', 'atuShadow').attr('x', '-30%').attr('y', '-30%').attr('width', '160%').attr('height', '160%');
      f.append('feDropShadow').attr('dx', 0).attr('dy', 6).attr('stdDeviation', 8).attr('flood-color', '#46B5AD').attr('flood-opacity', .35);

      const projection = d3.geoMercator().fitExtent([[24, 24], [W - 24, H - 24]], geo);
      const path = d3.geoPath(projection);
      const gBase = svg.append('g'), gOp = svg.append('g').attr('filter', 'url(#atuShadow)'), gLabels = svg.append('g');

      const showTip = (e, uf, name) => {
        tip.innerHTML = `${name}<span class="uf">${uf}</span>`;
        tip.style.left = e.clientX + 'px'; tip.style.top = e.clientY + 'px'; tip.style.opacity = '1';
      };
      const hideTip = () => { tip.style.opacity = '0'; };

      geo.features.forEach((feat) => {
        const uf = ufOf(feat.properties);
        const op = !!ATU.states[uf];
        const name = (op && ATU.states[uf]) || feat.properties.name || uf;
        const node = (op ? gOp : gBase).append('path')
          .attr('d', path(feat))
          .attr('class', 'atu-state' + (op ? ' is-op' : ''))
          .attr('fill', op ? 'var(--turquesa-500)' : '#232222')
          .attr('stroke', op ? '#0c2b28' : '#3a3938')
          .attr('stroke-width', op ? 1 : .75)
          .attr('vector-effect', 'non-scaling-stroke');
        if (op) {
          node
            .on('mousemove', (e) => showTip(e, uf, name))
            .on('mouseenter', function (e) { showTip(e, uf, name); d3.select(this).attr('fill', 'var(--turquesa-400)'); })
            .on('mouseleave', function () { hideTip(); d3.select(this).attr('fill', 'var(--turquesa-500)'); });
          const c = path.centroid(feat);
          if (!isNaN(c[0])) {
            gLabels.append('text').attr('class', 'atu-uflabel')
              .attr('x', uf === 'DF' ? c[0] + 14 : c[0]).attr('y', c[1])
              .attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
              .attr('pointer-events', 'none').text(uf);
          }
        }
      });
      wrap.appendChild(svg.node());
    };

    let cached = null;
    try { cached = JSON.parse(localStorage.getItem(GEO_CACHE) || 'null'); } catch (e) { }
    if (cached && cached.features) { draw(cached); }
    else {
      fetch(GEO_URL).then((r) => { if (!r.ok) throw new Error(r.status); return r.json(); })
        .then((geo) => { try { localStorage.setItem(GEO_CACHE, JSON.stringify(geo)); } catch (e) { } draw(geo); })
        .catch(() => { if (alive && mapRef.current) mapRef.current.innerHTML = '<p class="mono" style="color:var(--text-subtle);text-align:center;padding:60px 0">Não foi possível carregar o mapa.</p>'; });
    }
    return () => { alive = false; };
  }, []);

  const t = ATU.totals;
  return (
    <section id="atuacao" className="section origens-dark atuacao" ref={ref}>
      <div className="wrap wrap--wide">
        <div className="head reveal">
          <span className="eyebrow"><span className="rule" />Onde estamos</span>
          <h2 className="h2">Áreas de atuação.</h2>
          <p className="lead">Atuação técnica concentrada no coração agrícola do Brasil — Centro-Oeste e Tocantins, onde está a maior fronteira produtiva do país.</p>
        </div>
        <div className="atu-grid reveal" data-delay="80">
          <div className="atu-mapwrap" ref={mapRef} />
          <aside className="atu-panel">
            <div className="atu-panel__tag">Visão geral</div>
            <div className="atu-panel__name">Coração agrícola</div>
            <div className="atu-panel__sub">{Object.keys(ATU.states).length} estados · Centro-Oeste &amp; Tocantins</div>
            <div className="atu-rows">
              <div className="atu-row"><span className="atu-row__k">Municípios atendidos</span><span className="atu-row__v">{t.mun}</span></div>
              <div className="atu-row"><span className="atu-row__k">Área de atuação</span><span className="atu-row__v">{fmtBR(t.ha)}<sup>ha</sup></span></div>
              <div className="atu-row"><span className="atu-row__k">Pesquisa em parcerias</span><span className="atu-row__v">{t.pesquisa}<sup>ha</sup></span></div>
            </div>
            <div className="atu-cult">Principais culturas</div>
            <div className="atu-chips">{ATU.culturas.map((c) => <span className="atu-chip" key={c}>{c}</span>)}</div>
          </aside>
        </div>
        <div className="atu-legend reveal" data-delay="120">
          <span><i className="sw-op" /> Estado com atuação</span>
          <span><i className="sw-no" /> Demais estados</span>
        </div>
        <div className="atu-stats reveal" data-delay="160">
          <div><div className="atu-stat__v">+{t.mun}</div><div className="atu-stat__l">Municípios atendidos</div></div>
          <div><div className="atu-stat__v">+{fmtBR(t.ha)}<sup>ha</sup></div><div className="atu-stat__l">Área de atuação</div></div>
          <div><div className="atu-stat__v">+{fmtBR(t.pesquisa)}<sup>ha</sup></div><div className="atu-stat__l">Pesquisa em parcerias</div></div>
          <div><div className="atu-stat__v is-cult">{ATU.culturas.join(' · ')}</div><div className="atu-stat__l">Principais culturas</div></div>
        </div>
      </div>
      <div className="atu-tip" ref={tipRef} />
    </section>
  );
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
function Faq() {
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  const items = [
    ['Como funcionam as parcerias da ORIGENS?', 'Estruturamos acordos de longo prazo entre produtores e o mercado, com transparência em cada etapa — da originação à entrega.'],
    ['Quais culturas vocês atendem?', 'Trabalhamos com as principais commodities agrícolas, com foco em grãos como soja, milho e algodão.'],
    ['Em quais regiões a ORIGENS atua?', 'Atendemos produtores em 5 estados — Mato Grosso, Mato Grosso do Sul, Goiás, Tocantins e o Distrito Federal — com estrutura logística distribuída para reduzir prazos e custos.'],
    ['Como começar uma parceria?', 'Fale com a gente pelo formulário abaixo. Fazemos um diagnóstico da sua operação antes de propor qualquer estrutura.'],
  ];
  return (
    <section id="duvidas" className="section" ref={ref}>
      <div className="wrap wrap--wide">
        <div className="head reveal"><span className="eyebrow"><span className="rule" />Dúvidas frequentes</span><h2 className="h2">Boas relações começam<br />com clareza.</h2></div>
        <div className="acc reveal" data-delay="80">
          {items.map(([q, a], i) => (
            <div className={'acc__item' + (open === i ? ' open' : '')} key={i}>
              <button className="acc__head" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q}</span><span className="acc__ico" aria-hidden="true" />
              </button>
              <div className="acc__panel"><div><div className="acc__body">{a}</div></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Contact ──────────────────────────────────────────────────────────── */
function Contact() {
  const ref = useReveal();
  return (
    <section id="contato" className="section origens-dark" style={{ background: 'var(--chumbo-900)', color: 'var(--text)' }} ref={ref}>
      <div className="wrap wrap--wide"><div className="contact__grid">
        <div className="reveal">
          <span className="eyebrow"><span className="rule" />Fale com a gente</span>
          <h2 className="h2" style={{ marginTop: 18 }}>Vamos cultivar<br />uma parceria.</h2>
          <p className="lead" style={{ marginTop: 22, maxWidth: '38ch' }}>Conte sobre a sua operação. Respondemos em até um dia útil.</p>
          <dl className="contact__info" style={{ marginTop: 40 }}>
            <dt>E-mail</dt><dd>administrativo@origens.agr.br</dd>
            <dt>Telefone</dt><dd>(66) 3423-3264</dd>
          </dl>
        </div>
        <div className="reveal" data-delay="100" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1, paddingBottom: 40 }}>
            <img src={ASSET + 'logo-stacked-white.png'} alt="ORIGENS" style={{ height: 160, opacity: 0.4 }} />
          </div>
          <a href="#" target="_blank" rel="noopener noreferrer" className="btn btn--lg" style={{ width: '100%', marginTop: 'auto' }}>
            Falar pelo WhatsApp <span className="arr">→</span>
          </a>
        </div>
      </div></div>
    </section>
  );
}

/* ── Footer ───────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap wrap--wide">
        <div className="footer__top">
          <div>
            <img src={ASSET + 'logo-stacked-white.png'} alt="ORIGENS" style={{ height: 110 }} />
          </div>
          <div className="footer__cols">
            <h5>CONTATO</h5>
            <span style={{ color: '#9596a0', display: 'block', marginBottom: 8, fontSize: '0.92rem' }}>(66) 3423-3264</span>
            <a href="mailto:administrativo@origens.agr.br" style={{ textDecoration: 'underline', fontSize: '0.92rem', marginBottom: 16 }}>administrativo@origens.agr.br</a>
            <div style={{ display: 'flex', gap: 16 }}>
              <a href="https://www.instagram.com/origens_parcerias_agricolas/" aria-label="Instagram" style={{ color: '#fff' }}><Icon name="instagram" size={20} /></a>
              <a href="https://www.linkedin.com/company/origens-parcerias-agricolas/" aria-label="LinkedIn" style={{ color: '#fff' }}><Icon name="linkedin" size={20} /></a>
            </div>
          </div>
          <div className="footer__cols">
            <h5>ENDEREÇO</h5>
            <span style={{ color: '#9596a0', lineHeight: 1.6, display: 'block', fontSize: '0.92rem' }}>
              Avenida Lions Internacional 1105, Sala 7,<br />
              Edifício Eldorado, Rondonópolis, Mato Grosso<br />
              78740-126, BR
            </span>
          </div>
        </div>
        <div className="footer__bottom" style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ color: '#9596a0', fontSize: '0.85rem' }}>2024 © Todos os direitos reservados. Origens Parcerias Agrícolas</span>
          <a href="#" style={{ color: '#9596a0', fontSize: '0.85rem', textDecoration: 'underline' }}>Desenvolvido por Nexus Solutions</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (<><Nav /><main><Hero /><Services /><Atuacao /><Manifesto /><Process /><Faq /><Contact /></main><Footer /></>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);