function Hero({ onNav }) {
  return (
    <section className="as-hero">
      <div className="as-hero-img" />
      <div className="as-hero-overlay" />
      <div className="as-container as-hero-inner">
        <span className="as-eyebrow as-eyebrow-light">STUDIO DI CONSULENZA · LIPARI</span>
        <h1 className="as-hero-title">
          Consulenza del lavoro,<br />vicina come una persona di famiglia.
        </h1>
        <p className="as-hero-lead">
          Modello 730, F24, patronato e pratiche INPS. La accompagniamo dalla raccolta
          dei documenti all'invio telematico, con la calma di chi conosce ogni scadenza.
        </p>
        <div className="as-hero-cta">
          <button className="btn btn-primary btn-lg" onClick={() => onNav('contatti')}>Prenoti un appuntamento</button>
          <a className="btn btn-link-light" href="#" onClick={(e) => { e.preventDefault(); document.getElementById('as-services')?.scrollIntoView({ behavior: 'smooth' }); }}>Scopri i servizi →</a>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  {
    eb: 'CAF',
    title: 'Modello 730',
    body: 'La accompagniamo dalla raccolta documenti all\'invio. Rimborsi e conguagli sulla busta paga.',
  },
  {
    eb: 'CAF',
    title: 'F24 / Imposte',
    body: 'IMU, TARI, contributi: calcolo, compilazione e invio telematico nei tempi giusti.',
  },
  {
    eb: 'PATRONATO',
    title: 'Pensioni & INPS',
    body: 'Domanda di pensione, NASpI, assegno unico, invalidità civile. Senza burocrazia inutile.',
  },
  {
    eb: 'PATRONATO',
    title: 'Pratiche INAIL',
    body: 'Infortuni, malattie professionali, ricorsi e richiami amministrativi.',
  },
  {
    eb: 'CONSULENZA',
    title: 'Buste paga & contratti',
    body: 'Per piccoli datori di lavoro: contratti, cedolini, contributi, TFR.',
  },
  {
    eb: 'CONSULENZA',
    title: 'Successioni',
    body: 'Pratica di successione completa: documenti, dichiarazione, voltura catastale.',
  },
];

function Services({ onNav }) {
  return (
    <section id="as-services" className="as-section as-section-cream">
      <div className="as-container">
        <div className="as-section-head">
          <span className="as-eyebrow">I NOSTRI SERVIZI</span>
          <h2>Tutto quello che serve, in un solo studio.</h2>
        </div>
        <div className="as-grid-3">
          {SERVICES.map(s => (
            <article key={s.title} className="as-card">
              <span className="as-card-eb">{s.eb}</span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <a className="as-card-link" href="#" onClick={(e) => { e.preventDefault(); onNav('contatti'); }}>
                Maggiori informazioni →
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FullBleedQuote() {
  return (
    <section className="as-quote">
      <div className="as-quote-img" />
      <div className="as-quote-overlay" />
      <div className="as-container as-quote-inner">
        <span className="as-eyebrow as-eyebrow-light">A.M.P.I. POINT — LIPARI</span>
        <h2 className="as-quote-h">
          Una persona, non un call-center.<br />Risposte in 24 ore.
        </h2>
        <p className="as-quote-lead">
          Riceviamo su appuntamento. Lun · Mer · Ven 9:00–13:00 · Mar · Gio 15:00–19:00.
        </p>
      </div>
    </section>
  );
}

function CTABand({ onNav }) {
  return (
    <section className="as-section as-section-paper">
      <div className="as-container as-cta-band">
        <div>
          <span className="as-eyebrow">UN PRIMO INCONTRO È SEMPRE GRATUITO</span>
          <h2>Ci scriva. Le risponderemo entro 24 ore.</h2>
          <p className="lead">Studio Anna Serra · Vicolo Grappa, 21 · Lipari (ME)</p>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => onNav('contatti')}>
          Vai al modulo contatti
        </button>
      </div>
    </section>
  );
}

function HomePage({ onNav }) {
  return (
    <>
      <Hero onNav={onNav} />
      <Services onNav={onNav} />
      <FullBleedQuote />
      <CTABand onNav={onNav} />
    </>
  );
}

window.HomePage = HomePage;