/* Phrineffacc landing — Navbar + Hero */

const Nav = ({ active, onNav }) => {
  const [open, setOpen] = React.useState(false);
  const handle = (k) => { setOpen(false); onNav(k); };
  const labels = { home:'Início', servicos:'Serviços', valores:'Valores', contato:'Contato' };
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <img className="nav-logo" src="assets/logo-medium.png" alt="Phrineffacc" onClick={() => handle('home')} />
        <div className="nav-links">
          {Object.keys(labels).map(k => (
            <div key={k} className={'nav-link' + (active === k ? ' active' : '')} onClick={() => handle(k)}>{labels[k]}</div>
          ))}
          <button className="btn btn-primary" onClick={() => handle('contato')}>Fale Conosco</button>
        </div>
        <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
          {open
            ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M6 6 18 18M18 6 6 18"/></svg>
            : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>}
        </button>
      </div>
      <div className={'nav-mobile-panel' + (open ? ' open' : '')}>
        {Object.keys(labels).map(k => (
          <div key={k} className={'nav-link' + (active === k ? ' active' : '')} onClick={() => handle(k)}>{labels[k]}</div>
        ))}
        <button className="btn btn-primary btn-lg" onClick={() => handle('contato')}>Fale Conosco</button>
      </div>
    </nav>
  );
};

const Hero = ({ onCTA }) => (
  <section className="hero">
    <div className="hero-strip">PHRINEFFACC</div>
    <div className="container hero-grid">
      <div>
        <div className="hero-eyebrow"><span className="losango"></span>Hub de Contabilidade e Consultoria</div>
        <h1 className="hero-title">
          Contabilidade como <strong>linguagem de futuro.</strong>
          <em>D E C I S Ã O</em>
        </h1>
        <p className="hero-sub">
          Somos ponte entre estratégia e resultados. Traduzimos dados em decisões inteligentes
          que impulsionam negócios de pequeno e médio porte e ampliam horizontes — com mentalidade
          de abundância e energia criativa.
        </p>
        <div className="hero-actions">
          <button className="btn btn-primary btn-lg" onClick={onCTA}>Conheça o Hub</button>
          <button className="btn btn-ghost" onClick={onCTA}>Ver nossos serviços →</button>
        </div>
      </div>
      <div className="hero-mark">
        <img src="assets/logo-large.png" alt="" />
      </div>
    </div>
  </section>
);

Object.assign(window, { Nav, Hero });