// prumo-ui.jsx — componentes base da landing (nav, botões, badges, ícones, footer, reveal)

const Logo = ({size=19}) => (
  <span className="logo" style={{fontSize:size, gap:size*0.5}}>
    {/* marca oficial do Prumo: fio de prumo (var(--text)) + losango (var(--accent)).
        Geometria idêntica ao brand/Mark_Symbol.svg, mas inline para acompanhar tema e acento. */}
    <svg width={size*0.62} height={size*1.18} viewBox="15 6 18 34" style={{display:'block',overflow:'visible',flexShrink:0}}>
      <line x1="24" y1="8.77" x2="24" y2="24.95" stroke="var(--text)" strokeWidth="4" strokeLinecap="round"/>
      <path d="M25.23,21.35l5.12,6.59c.39.5.44,1.19.12,1.74l-5.12,8.78c-.6,1.03-2.09,1.03-2.69,0l-5.12-8.78c-.32-.55-.27-1.24.12-1.74l5.12-6.59c.62-.8,1.84-.8,2.46,0Z" fill="var(--accent)"/>
    </svg>
    Prumo
  </span>
);

const Btn = ({children, variant='primary', lg=false, href='#', onClick, style={}, className=''}) => (
  <a href={href} onClick={onClick} className={`btn btn-${variant}${lg?' btn-lg':''}${className?' '+className:''}`} style={style}>{children}</a>
);

const Badge = ({children, tone=''}) => <span className={`badge ${tone}`}>{children}</span>;

const Eyebrow = ({children}) => <div className="eyebrow"><span className="mark" aria-hidden="true">✦ </span>{children}</div>;

// ---- minimal line icons (simple strokes only) ----
const I = {
  grid:   "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
  rocket: "M12 3c3 1.5 5 4.5 5 8l-3 3-4 0-3-3c0-3.5 2-6.5 5-8zM12 8.5h.01M9 16l-2 4M15 16l2 4",
  receipt:"M6 3h12v18l-2-1.4L14 21l-2-1.4L10 21l-2-1.4L6 21zM9 8h6M9 12h6",
  folder: "M3 6h6l2 2h10v11H3zM3 8h18",
  calendar:"M4 5h16v15H4zM4 9h16M8 3v4M16 3v4",
  building:"M5 21V5l7-2 7 2v16M5 21h14M9 9h.01M9 13h.01M9 17h.01M15 9h.01M15 13h.01M15 17h.01",
  users:  "M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1M9.5 10.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 19v-1a4 4 0 0 0-3-3.8M16 4.7a3 3 0 0 1 0 5.8",
  team:   "M9 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM3 20a6 6 0 0 1 12 0M17 11a3 3 0 1 0-2-5.2M21 20a5.5 5.5 0 0 0-5-5",
  chart:  "M4 4v16h16M8 16v-4M12 16V9M16 16v-7M20 16v-2",
  wallet: "M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11M16 13h.01",
  gear:   "M12 9.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.3.9a7 7 0 0 0-2-1.2l-.4-2.5H8.8l-.4 2.5a7 7 0 0 0-2 1.2l-2.3-.9-2 3.4 2 1.5A7 7 0 0 0 4 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.4 2.3-.9a7 7 0 0 0 2 1.2l.4 2.5h6.4l.4-2.5a7 7 0 0 0 2-1.2l2.3.9 2-3.4-2-1.5c.1-.4.1-.8.1-1.2z",
  check:  "M4 12.5l5 5 11-12",
  arrow:  "M5 12h14M13 6l6 6-6 6",
  spark:  "M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3",
  layers: "M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 17l9 5 9-5",
};
const Icon = ({name, size=20, style={}}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" className="ico-stroke" style={style}>
    <path d={I[name]||I.grid}/>
  </svg>
);

// ---- screenshot real do produto ----
// Substitui os mockups desenhados em <div>: as imagens em img/ são capturas do
// app rodando com dados fictícios (Estúdio Lumen). width/height são os pixels
// reais do arquivo — sem eles a página reflui quando a imagem carrega (CLS).
// `priority` marca a imagem do hero, que é o LCP da página.
function Shot({src, alt, width, height, priority=false, style={}}){
  return (
    <div className="card" style={{overflow:'hidden',boxShadow:'var(--shadow)',...style}}>
      {/* fetchpriority em minúsculo: o React 18 não reconhece a forma
          camelCase e emite warning no console. */}
      <img src={src} alt={alt} width={width} height={height}
        loading={priority ? 'eager' : 'lazy'}
        decoding={priority ? 'sync' : 'async'}
        fetchpriority={priority ? 'high' : 'auto'}
        style={{display:'block',width:'100%',height:'auto'}}/>
    </div>
  );
}

// ---- waitlist: captura de beta testers (lista de espera / newsletter) ----
// Ainda não estamos abertos ao público — todo CTA de "começar" cai aqui em vez
// de ir pro app, até o produto sair do beta fechado.
const WAITLIST_ENDPOINT = 'https://api.prumotech.com/api/waitlist';

// Botão que abre o modal de lista de espera. `source` identifica o botão/página
// de origem (ex: "hero", "pricing_escritorio") pra dar contexto no futuro CRM.
function WaitlistBtn({children, source, ...props}){
  const openModal = (e)=>{
    e.preventDefault();
    window.dispatchEvent(new CustomEvent('prumo:waitlist-open',{detail:{source}}));
  };
  return <Btn {...props} href="#" onClick={openModal}>{children}</Btn>;
}

// Campo com rótulo acima do input. O placeholder some quando o usuário digita,
// então ele nunca é o único rótulo — leitor de tela e usuário vidente precisam
// dos dois.
function Field({id, label, hint, ...inputProps}){
  return (
    <div className="field">
      <label className="field-label" htmlFor={id}>
        {label}{hint && <span className="faint"> {hint}</span>}
      </label>
      <input id={id} className="field-input" {...inputProps}/>
    </div>
  );
}

// Modal de captura — ouve o evento global 'prumo:waitlist-open' disparado por
// qualquer WaitlistBtn da página. Renderizado uma única vez dentro do <Nav/>,
// que está presente em toda página do site.
function WaitlistModal(){
  const [open,setOpen]=React.useState(false);
  const [source,setSource]=React.useState('');
  const [status,setStatus]=React.useState('idle'); // idle | submitting | success | error
  const [errorMsg,setErrorMsg]=React.useState('');
  const [form,setForm]=React.useState({name:'',email:'',whatsapp:'',website:''});
  const dialogRef=React.useRef(null);
  const openerRef=React.useRef(null); // elemento que abriu o modal, para devolver o foco

  React.useEffect(()=>{
    const onOpen = (e)=>{
      openerRef.current = document.activeElement;
      setSource(e.detail?.source || '');
      setStatus('idle'); setErrorMsg('');
      setForm({name:'',email:'',whatsapp:'',website:''});
      setOpen(true);
    };
    window.addEventListener('prumo:waitlist-open', onOpen);
    return ()=>window.removeEventListener('prumo:waitlist-open', onOpen);
  },[]);

  // Esc fecha, Tab circula dentro do modal, o scroll do fundo trava e o foco
  // volta para o botão que abriu quando fecha.
  React.useEffect(()=>{
    if(!open) return;
    const node = dialogRef.current;
    const focusables = () => node
      ? [...node.querySelectorAll('a[href], button:not([disabled]), input:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')]
      : [];

    const onKey = (e)=>{
      if(e.key==='Escape'){ setOpen(false); return; }
      if(e.key!=='Tab') return;
      const els = focusables();
      if(!els.length) return;
      const first = els[0], last = els[els.length-1];
      // prende o Tab no modal: do último volta pro primeiro e vice-versa
      if(e.shiftKey && document.activeElement===first){ e.preventDefault(); last.focus(); }
      else if(!e.shiftKey && document.activeElement===last){ e.preventDefault(); first.focus(); }
    };

    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    // foca o primeiro campo, não o "fechar", para quem abriu já poder digitar
    (node?.querySelector('input:not([tabindex="-1"])') || focusables()[0])?.focus();

    return ()=>{
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
      openerRef.current?.focus?.();
    };
  },[open]);

  if(!open) return null;

  const submit = async (e)=>{
    e.preventDefault();
    setStatus('submitting'); setErrorMsg('');
    try{
      const res = await fetch(WAITLIST_ENDPOINT, {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
          name: form.name, email: form.email,
          whatsapp: form.whatsapp || undefined, source, website: form.website,
        }),
      });
      if(!res.ok){
        const data = await res.json().catch(()=>({}));
        throw new Error(data.message || 'Não foi possível enviar. Tente novamente.');
      }
      setStatus('success');
    }catch(err){
      setStatus('error');
      setErrorMsg(err.message || 'Não foi possível enviar. Tente novamente.');
    }
  };

  return (
    <div onClick={()=>setOpen(false)} style={{position:'fixed',inset:0,zIndex:100,display:'grid',placeItems:'center',
      background:'color-mix(in oklab, var(--bg) 70%, transparent)',backdropFilter:'blur(6px)',padding:20}}>
      <div ref={dialogRef} onClick={e=>e.stopPropagation()} className="card"
        role="dialog" aria-modal="true" aria-labelledby="waitlist-title"
        style={{position:'relative',width:'100%',maxWidth:440,
        padding:'32px 28px',background:'var(--surface)'}}>
        <button onClick={()=>setOpen(false)} aria-label="Fechar" style={{position:'absolute',top:16,right:16,
          width:32,height:32,borderRadius:9,border:'1px solid var(--border-2)',background:'transparent',color:'var(--text-2)',
          display:'grid',placeItems:'center',cursor:'pointer'}}>
          <svg width="14" height="14" viewBox="0 0 24 24" className="ico-stroke"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>

        {status==='success' ? (
          <div role="status" style={{textAlign:'center',padding:'12px 0'}}>
            <span style={{width:48,height:48,margin:'0 auto',borderRadius:'50%',background:'var(--accent)',
              display:'grid',placeItems:'center'}}>
              <svg width="22" height="22" viewBox="0 0 24 24" style={{stroke:'var(--bg)',fill:'none',strokeWidth:2.6,strokeLinecap:'round',strokeLinejoin:'round'}}><path d="M4 12.5l5 5 11-12"/></svg>
            </span>
            <h3 id="waitlist-title" className="h3" style={{fontSize:20,marginTop:18}}>Prontinho!</h3>
            <p className="muted" style={{fontSize:14.5,marginTop:8}}>
              Você entrou pra lista de beta testers. Avisamos assim que abrir uma vaga.
            </p>
            <Btn variant="subtle" style={{marginTop:20,justifyContent:'center'}} onClick={(e)=>{e.preventDefault();setOpen(false);}}>Fechar</Btn>
          </div>
        ) : (
          <React.Fragment>
            <Eyebrow>Lista de espera</Eyebrow>
            <h3 id="waitlist-title" className="h3" style={{fontSize:22,marginTop:12}}>Ainda em fase beta.</h3>
            <p className="muted" style={{fontSize:14.5,marginTop:8,lineHeight:1.55}}>
              O Prumo ainda não está aberto ao público — estamos com um grupo fechado de
              beta testers. Deixe seu contato e te chamamos assim que abrir uma vaga.
            </p>
            <form onSubmit={submit} style={{display:'flex',flexDirection:'column',gap:14,marginTop:22}}>
              {/* honeypot: campo invisível pra humanos; bots costumam preencher */}
              <input type="text" name="website" value={form.website} tabIndex={-1} autoComplete="off"
                onChange={e=>setForm(f=>({...f,website:e.target.value}))}
                style={{position:'absolute',left:-9999,width:1,height:1,opacity:0}} aria-hidden="true"/>
              <Field id="wl-nome" label="Nome" required autoComplete="name"
                placeholder="Como podemos te chamar?" value={form.name}
                onChange={e=>setForm(f=>({...f,name:e.target.value}))}/>
              <Field id="wl-email" label="E-mail" required type="email" autoComplete="email"
                placeholder="voce@escritorio.com.br" value={form.email}
                onChange={e=>setForm(f=>({...f,email:e.target.value}))}/>
              <Field id="wl-whats" label="WhatsApp" hint="(opcional)" type="tel" autoComplete="tel"
                placeholder="(41) 90000-0000" value={form.whatsapp}
                onChange={e=>setForm(f=>({...f,whatsapp:e.target.value}))}/>
              {/* role=alert: o erro precisa ser anunciado, não só aparecer.
                  Cor --danger e não --amber — âmbar é o acento da marca. */}
              {status==='error' && <p role="alert" style={{color:'var(--danger)',fontSize:13,margin:0}}>{errorMsg}</p>}
              <button type="submit" disabled={status==='submitting'} className="btn btn-primary"
                style={{justifyContent:'center',marginTop:4,opacity:status==='submitting'?.7:1}}>
                {status==='submitting' ? 'Enviando…' : 'Quero ser beta tester'}
              </button>
            </form>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

// Prefixo para âncoras que vivem na landing.
// Na própria landing retorna '' (âncora na mesma página); em qualquer outra
// página (ex.: contato) retorna o arquivo da landing para o link redirecionar até lá.
function landingBase(){
  const file = decodeURIComponent(location.pathname.split('/').pop() || '');
  const onLanding = file === '' || file === 'index.html';
  return onLanding ? '' : 'index.html';
}

// ---- top nav ----
function Nav(){
  const [open,setOpen]=React.useState(false);
  const base=landingBase(); // '' na landing, caminho da landing fora dela
  // "Módulos" e não "Para quem é": a âncora #publico leva à grade de módulos
  // ("Um módulo para cada parte do seu escritório"), não a uma seção de público.
  // O id #publico fica como está para não quebrar links já compartilhados.
  const links=[['Recursos','#recursos'],['Módulos','#publico'],['Preços','#precos'],['Sobre','Prumo%20-%20Sobre.html'],['Blog','Prumo%20-%20Blog.html']];
  // Âncoras (#) ganham o prefixo da landing fora dela; links de arquivo ficam como estão.
  const hrefFor = h => h.startsWith('#') ? base+h : h;
  const close=()=>setOpen(false);
  return (
    <React.Fragment>
    <header className="topnav">
      <div className="wrap topnav-inner">
        <a href={base+'#topo'} onClick={close}><Logo/></a>
        <nav className="flex center navlinks" style={{gap:24,marginLeft:8}} data-mobile-hide>
          {links.map(([t,h])=><a key={t} href={hrefFor(h)} className="navlink">{t}</a>)}
        </nav>
        <div className="flex center" style={{gap:10,marginLeft:'auto'}}>
          <a href="https://app.prumotech.com/login" className="navlink" data-mobile-hide style={{fontSize:14.5}}>Entrar</a>
          {/* "Lista de espera" e não "Começar grátis": o botão abre a lista do beta
              fechado, não um cadastro. Variante curta para caber ao lado de "Entrar". */}
          <WaitlistBtn source="nav" variant="primary" className="nav-cta" style={{padding:'9px 16px',fontSize:14}}>Lista de espera</WaitlistBtn>
          <button className="nav-burger" aria-label="Abrir menu" aria-expanded={open} onClick={()=>setOpen(o=>!o)}>
            <svg width="20" height="20" viewBox="0 0 24 24" className="ico-stroke" style={{strokeWidth:2}}>
              {open
                ? <path d="M6 6l12 12M18 6L6 18"/>
                : <path d="M3 7h18M3 12h18M3 17h18"/>}
            </svg>
          </button>
        </div>
      </div>
      <div className={'nav-sheet'+(open?' open':'')}>
        <div className="nav-sheet-inner">
          {links.map(([t,h])=><a key={t} href={hrefFor(h)} className="nav-sheet-link" onClick={close}>{t}</a>)}
          <a href="https://app.prumotech.com/login" className="nav-sheet-link" onClick={close}>Entrar</a>
        </div>
      </div>
    </header>
    <WaitlistModal/>
    </React.Fragment>
  );
}

// ---- footer ----
function Footer(){
  const base=landingBase(); // âncoras da landing também funcionam a partir de outras páginas
  // Apenas links que apontam para páginas/âncoras que realmente existem hoje.
  // Produto → âncoras da própria landing; Empresa → páginas institucionais reais.
  const cols=[
    ['Produto',[['Recursos','#recursos'],['Preços','#precos']]],
    ['Empresa',[['Sobre','Prumo%20-%20Sobre.html'],['Contato','Prumo%20-%20Contato.html'],['Blog','Prumo%20-%20Blog.html']]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="grid" style={{gridTemplateColumns:'1.6fr repeat(2,1fr)',gap:36}} data-foot-grid>
          <div>
            <Logo/>
            <p className="muted" style={{maxWidth:260,marginTop:14,fontSize:14.5}}>
              A plataforma de gestão para quem projeta, orça e constrói. Tudo no prumo.
            </p>
          </div>
          {cols.map(([h,items])=>(
            <div key={h}>
              <div className="mono" style={{fontSize:12,letterSpacing:'.1em',color:'var(--text-3)',textTransform:'uppercase',marginBottom:14}}>{h}</div>
              <div className="flex" style={{flexDirection:'column',gap:10}}>
                {/* cada item é [rótulo, href]; âncoras (#) ganham o prefixo da landing fora dela */}
                {items.map(([label,href])=>(
                  <a key={label} href={href.startsWith('#') ? base+href : href} className="navlink" style={{fontSize:14.5}}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <hr className="hairline" style={{margin:'40px 0 22px'}}/>
        <div className="flex between center" style={{flexWrap:'wrap',gap:12}}>
          <span className="faint mono" style={{fontSize:12.5}}>© 2026 Prumo · Curitiba, PR</span>
          <span className="faint" style={{fontSize:13}}>Feito para o canteiro de obras brasileiro.</span>
        </div>
      </div>
    </footer>
  );
}

// ---- reveal-on-scroll wrapper ----
function Reveal({children, delay=0, style={}, as='div'}){
  const ref=React.useRef(null);
  React.useEffect(()=>{
    const el=ref.current; if(!el) return;
    const io=new IntersectionObserver((es)=>{
      es.forEach(e=>{ if(e.isIntersecting){ setTimeout(()=>el.classList.add('in'),delay); io.unobserve(el); }});
    },{threshold:.12});
    io.observe(el); return ()=>io.disconnect();
  },[delay]);
  const Tag=as;
  return <Tag ref={ref} className="reveal" style={style}>{children}</Tag>;
}

Object.assign(window,{ Logo, Btn, Badge, Eyebrow, Icon, I, Nav, Footer, Reveal, Field, Shot, WaitlistBtn, WaitlistModal });
