/* App composition */

function Nav() {
  useNavShrink();
  return (
    <nav className="nav">
      <a className="brand" href="#top">
        <span className="glyph"></span>
        <span>Davide Arlotti</span>
      </a>
      <div className="links">
        <a href="#progetti">Progetti</a>
        <a href="#numeri">Numeri</a>
        <a href="#contatti">Contatti</a>
      </div>
      <a className="cta" href="#contatti">Iniziamo →</a>
    </nav>
  );
}

function HeroDeck({ projects }) {
  const ref1 = useMouseParallax(10);
  const ref2 = useMouseParallax(24);
  const ref3 = useMouseParallax(24);
  const [p1, p2, p3] = (projects || []).filter(p => p.featured).concat(projects || []).slice(0, 3);

  const frame = (p, ref, cls) => !p ? null : (
    <div className={`frame ${cls}`} key={cls}>
      <div ref={ref} style={{ willChange:'transform' }}>
        <BrowserFrame url={p.primaryUrl || p.url?.replace(/^https?:\/\//, '') || p.name} dark={p.dark}>
          <ImageFrame src={p.coverImage} palette={p.palette} kind={p.kind} />
        </BrowserFrame>
      </div>
    </div>
  );

  return (
    <div className="hero-deck">
      {frame(p2, ref2, 'f2')}
      {frame(p3, ref3, 'f3')}
      {frame(p1, ref1, 'f1')}
    </div>
  );
}

function Hero({ projects }) {
  return (
    <section className="hero" id="top">
      <div className="hero-blobs" aria-hidden="true">
        <span className="blob b1"></span>
        <span className="blob b2"></span>
        <span className="blob b3"></span>
      </div>

      <Reveal delay={50}>
        <div className="eyebrow-pill">
          <span className="badge">Aperto a nuovi progetti</span>
          <span>· Disponibile da Settembre 2026</span>
        </div>
      </Reveal>

      <h1>
        <span style={{ display:'block' }}><SplitText text="Siti web che" stagger={28} delay={150} /></span>
        <Reveal as="span" style={{ display:'block' }} delay={520} className="grad">non si dimenticano.</Reveal>
      </h1>

      <Reveal delay={750}>
        <p className="sub">
          Ciao, sono <b>Davide</b>. Progetto e sviluppo <b>siti web</b>, <b>web app</b> e <b>store online</b> su misura — veloci, ben disegnati e pensati per convertire.
        </p>
      </Reveal>

      <Reveal delay={850}>
        <Magnetic as="a" href="#progetti" className="hero-cta" strength={0.35}>
          Guarda i progetti
          <span className="arr">→</span>
        </Magnetic>
      </Reveal>

      <Reveal scale className="reveal-scale" delay={300}>
        <HeroDeck projects={projects} />
      </Reveal>
    </section>
  );
}

function LogosStrip({ projects }) {
  const items = projects || [];
  if (items.length === 0) return null;
  const track = items.concat(items);
  return (
    <div className="logos">
      <div className="logos-label">Hanno scelto me · {items.length}+ progetti consegnati</div>
      <div className="logos-track">
        {track.map((p, i) => (
          <span key={i}>
            {p.logo ? <img className="logo" src={p.logo} alt={p.name} /> : p.name}
          </span>
        ))}
      </div>
    </div>
  );
}

function ScreensStack({ primary, secondary, primaryUrl, secondaryUrl, dark, reverse }) {
  const primaryRef = useScrollParallax(-50);
  const secondaryRef = useScrollParallax(80);
  const tiltPrimaryRef = useTilt(5);
  return (
    <div className={`screens-stack ${reverse ? 'reverse' : ''}`}>
      <div className="screen secondary" ref={secondaryRef}>
        <BrowserFrame url={secondaryUrl} dark={dark}>{secondary}</BrowserFrame>
      </div>
      <div className="screen primary" ref={primaryRef}>
        <div ref={tiltPrimaryRef} style={{ willChange: 'transform' }}>
          <BrowserFrame url={primaryUrl} dark={dark}>{primary}</BrowserFrame>
        </div>
      </div>
    </div>
  );
}

function AgencyBadge({ agency }) {
  const As = agency.url ? 'a' : 'div';
  const linkProps = agency.url ? { href: agency.url, target: '_blank', rel: 'noopener noreferrer' } : {};
  return (
    <As className="agency-badge" style={{ '--ag-grad': agency.grad }} {...linkProps}>
      <span className="av">{agency.initials}</span>
      <span>Realizzato per <b>{agency.name}</b></span>
    </As>
  );
}

function Featured({ p, onOpen }) {
  const secondaryImg = (p.images && p.images[0]) || null;
  return (
    <section className={`feat ${p.bg}`}>
      <div className="feat-inner" style={p.reverse ? { gridTemplateColumns: '1.4fr 1fr' } : null}>
        <div className="feat-text" style={p.reverse ? { order: 2 } : null}>
          <Reveal><span className="tag">{p.n} · {p.tag}</span></Reveal>
          <Reveal delay={80}>
            <h3>
              {p.titleLead} <span className="accent" style={{ color: p.accent }}>{p.accentText}</span>
            </h3>
          </Reveal>
          <Reveal delay={160}><p>{(p.description || '').substring(0, 220)}…</p></Reveal>
          {p.agency ? (
            <Reveal delay={220}>
              <AgencyBadge agency={p.agency} />
            </Reveal>
          ) : null}
          <Reveal delay={320}>
            <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginTop:8 }}>
              <Magnetic as="button" className="visit" style={{ background: p.accent }} onClick={() => onOpen(p)} strength={0.3}>
                Vedi il progetto <span className="arr">↗</span>
              </Magnetic>
              <a
                href={p.url} target="_blank" rel="noopener noreferrer"
                style={{
                  display:'inline-flex', alignItems:'center', gap:8,
                  padding:'14px 22px', borderRadius:999,
                  background:'rgba(0,0,0,0.06)', fontSize:14, fontWeight:500,
                  color:'var(--ink)',
                }}
              >Visita il sito ↗</a>
            </div>
          </Reveal>
        </div>

        <Reveal scale style={Object.assign({ cursor:'pointer' }, p.reverse ? { order: 1 } : null)} onClick={() => onOpen(p)}>
          <ScreensStack
            primary={<ImageFrame src={p.coverImage} palette={p.palette} kind={p.kind} />}
            secondary={<ImageFrame src={secondaryImg?.url} palette={p.palette} kind={p.kind} />}
            primaryUrl={p.primaryUrl || p.url?.replace(/^https?:\/\//, '')}
            secondaryUrl={p.secondaryUrl || p.primaryUrl || p.url?.replace(/^https?:\/\//, '')}
            dark={p.dark}
            reverse={p.reverse}
          />
        </Reveal>
      </div>
    </section>
  );
}

function FeaturedSections({ projects, onOpen }) {
  const items = (projects || []).filter(p => p.featured);
  return (
    <div id="progetti">
      {items.map(p => <Featured key={p.id} p={p} onOpen={onOpen} />)}
    </div>
  );
}

function Stats({ items }) {
  const stats = items || [];
  if (stats.length === 0) return null;
  return (
    <section className="stats" id="numeri">
      <Reveal className="section-head" style={{ paddingTop: 0 }}>
        <h2>I numeri, <span className="grad">brevemente.</span></h2>
        <p>Otto anni costruendo sul web — agenzie, founder e studi. Performance e cura del dettaglio non sono optional.</p>
      </Reveal>
      <div className="stats-grid">
        {stats.map((s, i) => (
          <Reveal scale className="stat" key={s.id} delay={i * 100} style={{ '--stat-c': s.color, '--stat-c2': s.color2 }}>
            <div className="num"><Counter to={s.value} suffix={s.suffix} /></div>
            <div className="lbl">{s.label}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function ProjectGrid({ projects, onOpen }) {
  const items = (projects || []).filter(p => !p.featured);
  const sizes = ['size-lg','size-md','size-md','size-md','size-md','size-lg'];

  return (
    <section>
      <Reveal className="section-head">
        <h2>Altri <span className="grad">progetti recenti.</span></h2>
        <p>Lavori dal 2023 ad oggi. Alcuni come consulente diretto, altri come collaboratore tecnico per agenzie e studi.</p>
      </Reveal>

      <div className="grid">
        {items.map((p, i) => (
          <Reveal scale className={`card ${sizes[i % sizes.length]}`} key={p.id} delay={i * 60} onClick={() => onOpen(p)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') onOpen(p); }}>
            <div className="preview">
              <ImageFrame src={p.coverImage} palette={p.palette} kind={p.kind} />
            </div>
            <div className="pad">
              <div className="meta-row">
                <div className="left-row">
                  <span className="tag-c">{p.tag}</span>
                  {p.agency ? (
                    <span className="agency-c" style={{ '--ag-c': p.agency.c }}>
                      <span className="dot"></span>per {p.agency.name}
                    </span>
                  ) : null}
                </div>
                <span className="yr">{p.year} / {p.n}</span>
              </div>
              <div className="name-c">
                {p.name}
                <span className="sub-c">{p.sub}</span>
              </div>
            </div>
            <div className="arrow-c">↗</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = React.useState({ name:'', email:'', project:'' });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [serverError, setServerError] = React.useState('');
  const onChange = (e) => setForm(f => ({ ...f, [e.target.name]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = 'Manca il tuo nome';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = 'Email non valida';
    if (form.project.trim().length < 6) er.project = 'Raccontami qualcosa di più';
    setErrs(er);
    setServerError('');
    if (Object.keys(er).length > 0) return;

    setSending(true);
    try {
      await window.api.submitContact(form);
      setSent(true);
      setTimeout(() => { setSent(false); setForm({ name:'', email:'', project:'' }); }, 4500);
    } catch (err) {
      setServerError(err.message || 'Invio non riuscito. Riprova.');
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact" id="contatti">
      <div className="contact-inner">
        <Reveal>
          <div className="eyebrow-pill" style={{ marginBottom: 28 }}>
            <span className="badge" style={{ background: '#ff5b1f' }}>Hai un'idea?</span>
            <span>· Risposta in 24h</span>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h2>Costruiamo<br/><span className="grad">qualcosa insieme.</span></h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="sub-c">
            Raccontami il tuo progetto. Ti rispondo personalmente entro 24h con prime impressioni, tempi e budget realistico. Lavoro sia direttamente con i clienti che white-label per agenzie.
          </p>
        </Reveal>
        <Reveal delay={230}>
          <a className="contact-email-pill" href="mailto:info@davidearlotti.it">
            ✉️ info@davidearlotti.it
          </a>
        </Reveal>

        <Reveal scale delay={250}>
          <form className="form-card" onSubmit={submit} noValidate>
            <div className="form-row">
              <div className={`field-2 ${errs.name ? 'err' : ''}`}>
                <label>Nome</label>
                <input name="name" value={form.name} onChange={onChange} placeholder="Mario Rossi" />
                <div className="err-msg">{errs.name}</div>
              </div>
              <div className={`field-2 ${errs.email ? 'err' : ''}`}>
                <label>Email</label>
                <input type="email" name="email" value={form.email} onChange={onChange} placeholder="mario@studio.com" />
                <div className="err-msg">{errs.email}</div>
              </div>
            </div>
            <div className={`field-2 ${errs.project ? 'err' : ''}`} style={{ marginTop: 16 }}>
              <label>Il tuo progetto</label>
              <textarea name="project" value={form.project} onChange={onChange} placeholder="Sito vetrina, e-commerce, web app… raccontami pure tutto." rows={4} />
              <div className="err-msg">{errs.project}</div>
            </div>
            {serverError ? <div className="err-msg" style={{ display:'block', marginTop: 10 }}>{serverError}</div> : null}
            <button type="submit" className={`submit-btn ${sent ? 'sent' : ''}`} disabled={sending}>
              {sent ? '✓ Richiesta inviata — a presto!' : sending ? 'Invio…' : 'Invia richiesta →'}
            </button>
          </form>
        </Reveal>

        <Reveal delay={400}>
          <div className="contact-extra">
            <a href="#">LinkedIn</a>
            <a href="#">GitHub</a>
            <a href="#">Read.cv</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <span>© 2026 Davide Arlotti</span>
      <span>Costruito a mano · Italia</span>
      <a href="#top">Torna su ↑</a>
    </footer>
  );
}

function App() {
  const [projects, setProjects] = React.useState(null);
  const [stats, setStats] = React.useState([]);
  const [error, setError] = React.useState(null);
  const [openProject, setOpenProject] = React.useState(null);

  const fetchAll = React.useCallback(() => {
    setError(null);
    Promise.all([loadProjects(), window.api.getStats()])
      .then(([projectsData, statsData]) => { setProjects(projectsData); setStats(statsData); })
      .catch((err) => setError(err.message || 'Errore di caricamento'));
  }, []);

  React.useEffect(() => { fetchAll(); }, [fetchAll]);

  if (error) {
    return (
      <div className="app-error">
        <p>Impossibile caricare i progetti dal server.<br/>{error}</p>
        <button onClick={fetchAll}>Riprova</button>
      </div>
    );
  }

  if (!projects) {
    return <div className="app-loading">Caricamento…</div>;
  }

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero projects={projects} />
        <LogosStrip projects={projects} />
        <FeaturedSections projects={projects} onOpen={setOpenProject} />
        <Stats items={stats} />
        <ProjectGrid projects={projects} onOpen={setOpenProject} />
        <Contact />
      </main>
      <Footer />
      <ProjectModal project={openProject} onClose={() => setOpenProject(null)} />
    </React.Fragment>
  );
}

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