// Bottega — editorial warm variant
const { useState, useEffect, useRef } = React;

const SERVICES = [
  { id: 'interni',   num: '01', title: 'Tinteggiatura', italic: 'interni',    body: 'Pareti lisce, finiture lavabili, spatolati materici. Cantiere pulito, mobili coperti, tempi certi.', price: 'da €8/m²',     tag: 'interni',    details: {
      lede: 'Trasformare una casa con il colore giusto — senza polvere, senza sorprese.',
      points: ['Sopralluogo gratuito con campionature in loco','Protezione totale di mobili, pavimenti e battiscopa','Stuccatura, carteggiatura, primer e due mani di finitura','Smaltimento e pulizia a fine lavoro'],
      bullets: [ {k:'Tempi',v:'2–5 giorni per appartamento medio'}, {k:'Finiture',v:'Opaca, satinata, lavabile, effetto sabbia'}, {k:'Garanzia',v:'24 mesi sulla tenuta'} ]
    }},
  { id: 'esterni',   num: '02', title: 'Facciate', italic: '& esterni',    body: 'Ripristini, pitture silossaniche, protezione dai raggi UV. Ponteggi sicuri a norma.', price: 'da €18/m²',     tag: 'esterni',    details: {
      lede: 'Facciate che resistono al sole, alla pioggia e al tempo — per davvero.',
      points: ['Valutazione ammaloramenti e infiltrazioni','Idrolavaggio professionale','Fissativo consolidante + pittura silossanica traspirante','Ponteggio certificato, DPI, coordinatore sicurezza'],
      bullets:[ {k:'Durata',v:'10–15 anni media'}, {k:'Pitture',v:'Silossaniche, silicati, quarzo'}, {k:'Sicurezza',v:'Pratica SCIA inclusa'} ]
    }},
  { id: 'decorativo',num: '03', title: 'Finiture', italic: 'decorative',  body: 'Veneziano, calce, effetti metallici, stencil su misura. Dove il pennello diventa firma.',  price: 'preventivo', tag: 'arte',       details: {
      lede: 'Quando una parete diventa un pezzo unico.',
      points: ['Campionature su tavola vera','Stucchi veneziani, calce rasata, effetto cemento','Vernici metalliche, bronzo, rame, oro','Stencil e disegni custom per camerette'],
      bullets:[ {k:'Tempi',v:'3–7 giorni a seconda del formato'}, {k:'Materiali',v:'Calce naturale, resine, pigmenti'}, {k:'Prove',v:'Campionatura sempre inclusa'} ]
    }},
  { id: 'giardini',  num: '04', title: 'Manutenzione', italic: 'giardini', body: 'Potature, tagli erba, siepi, impianti di irrigazione. Giardini in ordine tutto l\'anno.',  price: 'da €35/h', tag: 'verde',      details: {
      lede: 'Il verde curato come si deve, stagione per stagione.',
      points: ['Taglio erba e rasatura di precisione','Potatura siepi e alberi fino a 6 metri','Impianti di irrigazione automatici','Trattamenti stagionali e concimazioni'],
      bullets:[ {k:'Cadenza',v:'Mensile, quindicinale, on-demand'}, {k:'Zona',v:'Pistoia e Firenze, 40 km'}, {k:'Smaltimento',v:'Incluso in bolletta'} ]
    }},
  { id: 'piccoli',   num: '05', title: 'Piccoli', italic: 'interventi', body: 'Ritocchi, una parete sola, un ripostiglio. Nessun lavoro è troppo piccolo.', price: 'da €120', tag: 'veloce', details: {
      lede: 'Un pomeriggio, una parete, un problema risolto.',
      points: ['Ritocchi dopo traslochi','Tinteggiatura singola stanza','Riparazione crepe e infiltrazioni leggere','Rinfrescare una parete prima di vendere casa'],
      bullets:[ {k:'Tempi',v:'Spesso in giornata'}, {k:'Minimo',v:'Nessun minimo d\'ordine'}, {k:'Pagamento',v:'Anche a fine lavoro'} ]
    }},
];

const PHOTOS = [
  'assets/lavori/img_5124.jpg',
  'assets/lavori/img_5125.jpg',
  'assets/lavori/img_5134.jpg',
  'assets/lavori/img_4673.jpg',
  'assets/lavori/img_4674.jpg',
  'assets/lavori/img_4675.jpg',
  'assets/lavori/img_4684.jpg',
  'assets/lavori/img_4685.jpg',
  'assets/lavori/img_4686.jpg',
];

const TESTIMONIALS = [
  { q:'Marco è arrivato in orario, ha coperto tutto, e tre giorni dopo casa sembrava un\'altra. Zero polvere, zero stress.', name:'Giulia Ravazzi', loc:'Pistoia · Appartamento 85 m²', initial:'G', rating:5 },
  { q:'Avevo chiesto quattro preventivi. Il suo non era il più basso, ma era l\'unico scritto bene. E si è visto.', name:'Renzo Marchesi', loc:'Firenze · Villa bifamiliare', initial:'R', rating:5 },
  { q:'Per il giardino di mia madre passano ogni quindici giorni. È una cosa che non devo più pensare — ed è oro.', name:'Cristina Bertoldo', loc:'Pistoia · Manutenzione annuale', initial:'C', rating:5 },
  { q:'Ho chiesto un effetto spatolato per il soggiorno. Mi ha fatto tre campionature vere, non foto. Scelta facile.', name:'Alessandro Pivetta', loc:'Scandicci (FI) · Ristrutturazione', initial:'A', rating:5 },
];

// ─── page transition hook ───
function usePageTransition() {
  const [page, setPage] = useState('home'); // home | service
  const [serviceId, setServiceId] = useState(null);
  const [transitioning, setTransitioning] = useState(false);

  const navigate = (target, sid = null) => {
    if (transitioning) return;
    setTransitioning(true);
    const curtain = document.getElementById('curtain');
    curtain.classList.add('in');
    setTimeout(() => {
      setPage(target);
      setServiceId(sid);
      window.scrollTo(0, 0);
      curtain.classList.remove('in');
      curtain.classList.add('out');
      setTimeout(() => {
        curtain.classList.remove('out');
        setTransitioning(false);
      }, 750);
    }, 750);
  };
  return { page, serviceId, navigate, transitioning };
}

// ─── reveal on scroll ───
function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// ─── TopBar ───
function TopBar({ page, navigate }) {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a className="brand" onClick={() => navigate('home')} style={{cursor:'pointer'}}>
          <img src="assets/logo.png" alt="" style={{width:38,height:38,objectFit:'contain',borderRadius:6}} />
          <div className="brand-text">
            <span className="a">Imbianchino Arte</span>
            <span className="b">bottega · dal 2011</span>
          </div>
        </a>
        <nav className="main">
          <span className={`nlink ${page==='home'?'active':''}`} onClick={()=>navigate('home')}><span className="num">01</span>Bottega</span>
          <a className="nlink" href="#servizi" onClick={(e)=>{if(page!=='home'){e.preventDefault();navigate('home');setTimeout(()=>document.getElementById('servizi')?.scrollIntoView({behavior:'smooth'}),1600)}}}><span className="num">02</span>Servizi</a>
          <a className="nlink" href="#testimonianze"><span className="num">03</span>Voci</a>
          <a className="nlink" href="#contatti"><span className="num">04</span>Contatti</a>
        </nav>
        <a className="cta" href="#contatti">
          <span className="dot"></span>
          <span>Disponibile — chiedi preventivo</span>
        </a>
      </div>
    </header>
  );
}

// ─── Hero ───
function Hero({ navigate }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-meta">
          <div className="l">
            <span className="eyebrow">N° 011 — Primavera MMXXVI</span>
            <span className="eyebrow" style={{opacity:.5}}>·</span>
            <span className="eyebrow">Pistoia & Firenze — Provincia</span>
          </div>
          <span className="eyebrow">Dal 2011 — 340+ cantieri</span>
        </div>

        <div className="grid-12" style={{alignItems:'start'}}>
          <h1 className="hero-title" style={{gridColumn:'1 / span 12'}}>
            Il colore<br/>
            che <span className="it">sa stare</span><br/>
            al suo posto.
          </h1>
        </div>

        <div className="hero-row2">
          <div className="hero-plate" aria-hidden="true">
            <div className="stamp">fatto<br/>a mano<br/>2026</div>
          </div>
          <div className="hero-stats">
            <div className="stat"><div className="n">15<sup>+</sup></div><div className="l">Anni di cantieri, privati e aziende</div></div>
            <div className="stat"><div className="n">340</div><div className="l">Case, ville, negozi e giardini seguiti</div></div>
            <div className="stat"><div className="n">4,9<sup>/5</sup></div><div className="l">Media recensioni verificate</div></div>
          </div>
        </div>

        <div className="grid-12">
          <p className="hero-sub" style={{gridColumn:'1 / span 5'}}>
            Sono <em>Marco</em>. Faccio l'imbianchino e il manutentore di giardini
            tra Pistoia e Firenze. Lavoro pulito, tempi rispettati, una mano sola — la mia.
            Se cerchi qualcuno che non scappi dopo il sopralluogo, sei nel posto giusto.
          </p>
          <div className="hero-cta" style={{gridColumn:'7 / span 6'}}>
            <a className="btn-primary" onClick={()=>document.getElementById('servizi')?.scrollIntoView({behavior:'smooth'})}>
              Vedi i servizi <span className="arrow">↓</span>
            </a>
            <a className="btn-ghost" onClick={()=>document.getElementById('contatti')?.scrollIntoView({behavior:'smooth'})}>
              Preventivo in 24h <span>→</span>
            </a>
          </div>
        </div>

        <div className="marquee" aria-hidden="true">
          <div className="track">
            <span>tinteggiatura</span><span className="sep">●</span>
            <span className="it">facciate</span><span className="sep">●</span>
            <span className="it">giardini</span><span className="sep">●</span>
            <span>spatolato</span><span className="sep">●</span>
            <span className="it">veneziano</span><span className="sep">●</span>
            <span>manutenzione</span><span className="sep">●</span>
            <span>tinteggiatura</span><span className="sep">●</span>
            <span className="it">facciate</span><span className="sep">●</span>
            <span className="it">giardini</span><span className="sep">●</span>
            <span>spatolato</span><span className="sep">●</span>
            <span className="it">veneziano</span><span className="sep">●</span>
            <span>manutenzione</span><span className="sep">●</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Servizi ───
function Servizi({ navigate }) {
  return (
    <section className="section" id="servizi">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker">
            <span className="idx">§ 02</span>
            <span className="lbl">Servizi</span>
          </div>
          <h2>Cinque cose<br/>che so fare <span className="it">bene.</span></h2>
        </div>
        <div className="services">
          {SERVICES.map(s => (
            <article className="service reveal" key={s.id} onClick={()=>navigate('service', s.id)}>
              <span className="num">— {s.num} / 05</span>
              <h3>{s.title} <span className="it">{s.italic}</span></h3>
              <p>{s.body}</p>
              <div className="meta">
                <span className="price">{s.price}</span>
                <span>Leggi <span className="arrow-sm">↗</span></span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Processo ───
function Processo() {
  const steps = [
    { n: 'i', t: 'Chiami o scrivi', p: 'Risposta in giornata. Una chiamata di 10 minuti basta per capirci.' },
    { n: 'ii', t: 'Passo a vedere', p: 'Sopralluogo gratuito, misure vere, consigli sul colore e sui tempi.' },
    { n: 'iii', t: 'Preventivo scritto', p: 'Entro 24 ore. Chiaro, dettagliato, senza sorprese dopo.' },
    { n: 'iv', t: 'Lavoro', p: 'Entro una settimana sono in cantiere. Cantiere pulito, tempi rispettati.' },
  ];
  return (
    <section className="section" id="processo">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="idx">§ 03</span><span className="lbl">Come lavoriamo</span></div>
          <h2>Quattro passi, <span className="it">senza fronzoli.</span></h2>
        </div>
        <div className="process reveal">
          {steps.map((s, i) => (
            <div className="process-item" key={i}>
              <div className="n">{s.n}.</div>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section className="section" id="lavori" style={{background:'var(--paper)'}}>
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="idx">§ 03b</span><span className="lbl">Lavori recenti</span></div>
          <h2>Ultimi <span className="it">cantieri.</span></h2>
        </div>
        <div className="reveal" style={{display:'grid',gridTemplateColumns:'repeat(12,1fr)',gap:16}}>
          {PHOTOS.map((p,i)=>{
            const spans=[6,3,3,4,4,4,6,6];
            return (
              <div key={i} style={{gridColumn:'span '+(spans[i]||4),aspectRatio:i%3===0?'4/5':'1/1',overflow:'hidden',borderRadius:2,border:'1px solid var(--rule-soft)',position:'relative'}}>
                <img src={p} alt="" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',display:'block',transition:'transform .6s ease'}} onMouseEnter={(e)=>e.currentTarget.style.transform='scale(1.04)'} onMouseLeave={(e)=>e.currentTarget.style.transform='scale(1)'} />
                <span style={{position:'absolute',left:12,bottom:12,background:'var(--paper)',padding:'4px 8px',fontFamily:'"JetBrains Mono",monospace',fontSize:10,color:'var(--ink)',border:'1px solid var(--rule-soft)'}}>FIG. {String(i+1).padStart(2,'0')}</span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Testimonianze ───
function Testimonianze() {
  const [active, setActive] = useState(0);
  const prev = () => setActive(a => (a - 1 + TESTIMONIALS.length) % TESTIMONIALS.length);
  const next = () => setActive(a => (a + 1) % TESTIMONIALS.length);

  return (
    <section className="section" id="testimonianze" style={{background:'var(--paper-2)'}}>
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="idx">§ 04</span><span className="lbl">Voci dal cantiere</span></div>
          <h2>Quello che dicono<br/>i <span className="it">clienti, davvero.</span></h2>
        </div>

        <div className="testimonials-wrap">
          <div className="testimonials-side reveal">
            <div className="big">“”</div>
            <p>Ogni fine cantiere chiedo due righe oneste. Le trovi qui, senza filtri e senza stock photo.</p>
            <div className="nav">
              <button onClick={prev} aria-label="Precedente">←</button>
              <button onClick={next} aria-label="Successivo">→</button>
            </div>
            <div className="mono" style={{marginTop:24,fontSize:11,color:'var(--ink-3)'}}>
              {String(active+1).padStart(2,'0')} / {String(TESTIMONIALS.length).padStart(2,'0')}
            </div>
          </div>

          <div className="testimonials-list">
            {TESTIMONIALS.map((t, i) => (
              <div className={`testimonial ${i===active?'active':''}`} key={i} onClick={()=>setActive(i)}>
                <div className="q">{t.q}</div>
                <div className="foot">
                  <div className="who">
                    <div className="avatar">{t.initial}</div>
                    <div>
                      <div className="name">{t.name}</div>
                      <div className="loc">{t.loc}</div>
                    </div>
                  </div>
                  <div className="rating">{'★'.repeat(t.rating)}{'☆'.repeat(5-t.rating)} · VERIFICATO</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer / CTA finale ───
function Footer() {
  return (
    <footer id="contatti">
      <div className="wrap">
        <div className="reveal">
          <div className="big">Chiedi<br/>un <span className="it">preventivo.</span></div>
          <div style={{marginTop:48,display:'flex',gap:16,flexWrap:'wrap'}}>
            <a className="btn-primary" style={{background:'var(--paper)',color:'var(--ink)'}} href="tel:+393384531102">
              ☎ +39 338 453 1102
            </a>
            <a className="btn-ghost" style={{borderColor:'rgba(242,237,228,.2)',color:'var(--paper)'}} href="mailto:marco.baldi.24@gmail.com">
              marco.baldi.24@gmail.com →
            </a>
          </div>
        </div>
        <div className="cols">
          <div className="col">
            <h5>Zona</h5>
            <p>Pistoia</p><p>Firenze e provincia</p><p>40 km dal cantiere</p>
          </div>
          <div className="col">
            <h5>Orari</h5>
            <p>Lun–Ven · 07:30–18:00</p><p>Sabato · su richiesta</p>
          </div>
          <div className="col">
            <h5>Servizi</h5>
            <a>Tinteggiatura interni</a><a>Facciate esterne</a><a>Finiture decorative</a><a>Manutenzione giardini</a>
          </div>
          <div className="col">
            <h5>Social</h5>
            <a>Instagram →</a><a>Facebook →</a><a>Google Business →</a>
          </div>
        </div>
        <div className="foot-row">
          <span>© MMXXVI Imbianchino Arte · Marco Baldi</span>
          <span>marco.baldi.24@gmail.com</span>
          <span>+39 338 453 1102</span>
        </div>
      </div>
    </footer>
  );
}

// ─── Pagina dettaglio servizio ───
function ServicePage({ serviceId, navigate }) {
  const s = SERVICES.find(x => x.id === serviceId) || SERVICES[0];
  return (
    <div className="inner-page">
      <div className="wrap">
        <div className="breadcrumbs">
          <a onClick={()=>navigate('home')} style={{cursor:'pointer'}}>Home</a>
          <span className="sep">/</span>
          <a onClick={()=>{navigate('home');setTimeout(()=>document.getElementById('servizi')?.scrollIntoView({behavior:'smooth'}),1600)}} style={{cursor:'pointer'}}>Servizi</a>
          <span className="sep">/</span>
          <span className="cur">{s.title} {s.italic}</span>
        </div>

        <div className="inner-head">
          <span className="eyebrow">Servizio N° {s.num} · {s.tag}</span>
          <h1>{s.title}<br/><span className="it">{s.italic}.</span></h1>
          <p className="lede">{s.details.lede}</p>
        </div>

        <div className="inner-body">
          <aside className="toc">
            <h6>In questa pagina</h6>
            <a href="#cosa">Cosa includiamo</a>
            <a href="#dettagli">Dettagli tecnici</a>
            <a href="#preventivo">Chiedi preventivo</a>
            <h6 style={{marginTop:40}}>Gli altri servizi</h6>
            {SERVICES.filter(x=>x.id!==s.id).slice(0,4).map(x => (
              <a key={x.id} onClick={()=>navigate('service', x.id)} style={{cursor:'pointer'}}>{x.title} {x.italic}</a>
            ))}
          </aside>

          <div className="content">
            <h3 id="cosa">Cosa è compreso</h3>
            <p>Tutto quello che serve perché il lavoro sia fatto bene la prima volta. Nessun "extra" a sorpresa, nessuna riga in piccolo.</p>
            <ul>
              {s.details.points.map((p,i) => (
                <li key={i}><span className="n">{String(i+1).padStart(2,'0')}</span><span className="t">{p}</span></li>
              ))}
            </ul>

            <h3 id="dettagli">Dettagli tecnici</h3>
            <ul>
              {s.details.bullets.map((b,i) => (
                <li key={i}><span className="n">—</span><span className="t"><strong style={{fontWeight:500}}>{b.k}.</strong> {b.v}</span></li>
              ))}
            </ul>

            <div className="quote-box" id="preventivo">
              <div>
                <h4>Un sopralluogo, <span className="it">zero impegno.</span></h4>
                <p>Compila due righe qui accanto, o chiamami direttamente. Rispondo in giornata, davvero.</p>
                <p style={{marginTop:20,fontFamily:'JetBrains Mono,monospace',fontSize:12}}>☎ +39 338 453 1102</p>
                <p style={{fontFamily:'JetBrains Mono,monospace',fontSize:12}}>@ marco.baldi.24@gmail.com</p>
              </div>
              <form onSubmit={(e)=>{e.preventDefault();alert('Grazie! Ti ricontatto entro 24 ore.')}}>
                <input className="field" placeholder="Il tuo nome" required />
                <input className="field" placeholder="Telefono o email" required />
                <div className="row">
                  <input className="field" placeholder="Comune" />
                  <input className="field" placeholder="Superficie (m²)" />
                </div>
                <textarea className="field" placeholder={'Descrivi il lavoro — es. "Due stanze, bianco, soffitto alto"'} rows="3"></textarea>
                <button type="submit">Chiedi preventivo →</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── App root ───
function App() {
  const { page, serviceId, navigate } = usePageTransition();
  useReveal();
  useEffect(()=>{ document.documentElement.classList.add('loaded'); }, []);

  return (
    <>
      <TopBar page={page} navigate={navigate} />
      <main className={`page show`} key={page+serviceId}>
        {page === 'home' && (
          <>
            <Hero navigate={navigate} />
            <Servizi navigate={navigate} />
            <Processo />
            <Gallery />
            <Testimonianze />
          </>
        )}
        {page === 'service' && <ServicePage serviceId={serviceId} navigate={navigate} />}
        <Footer />
      </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);