// sections-bottom.jsx — Processo, Stack, Demo, Contatti, Footer (v2)

// ── COME LAVORIAMO ──────────────────────────────────────────────────────────
function Processo() {
  const steps = [
    { n: '01', title: 'Discovery',           t: '1 settimana',     d: "Capiamo il problema, mappiamo gli utenti, definiamo l'MVP." },
    { n: '02', title: 'Design & Arch',       t: '1 2 settimane',  d: 'UI premium, schema dati, integrazioni. Tutto prima del codice.' },
    { n: '03', title: 'Sviluppo AI first',   t: '4 12 settimane', d: 'Iterazioni rapide, AI dal giorno zero. Build settimanali.' },
    { n: '04', title: 'Lancio & Crescita',   t: 'Continuo',       d: 'Deploy, monitoraggio, evoluzione. Restiamo il tuo team tecnico.' },
  ];
  return (
    <section id="processo" className="section">
      <div className="container">
        <header className="sh">
          <div className="sh-l">
            <span className="eyebrow">Come lavoriamo</span>
            <h2 className="display-m">
              Quattro fasi.<br/>
              <em style={{ fontStyle: 'normal', background: 'var(--gradient)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>Niente burocrazia.</em>
            </h2>
          </div>
          <div className="sh-r">
            <p className="lead">
              Lavoriamo in modo iterativo e AI-native. Vedi l'output ogni
              settimana, non ogni trimestre. Decidi con dati, non con promesse.
            </p>
            <a href="processo.html" className="link-arrow" style={{ marginTop: 20 }}>
              Il processo completo <Icon name="arrow" size={14}/>
            </a>
          </div>
        </header>

        <div className="process-v2">
          {steps.map(s => (
            <article key={s.n} className="process-step">
              <div className="process-step-num">{s.n}</div>
              <h3 className="process-step-h">{s.title}</h3>
              <p className="process-step-d">{s.d}</p>
              <span className="process-step-t">{s.t}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── TECH STACK ──────────────────────────────────────────────────────────────
function Stack() {
  const items = [
    { name: 'Next.js',    role: 'Framework' },
    { name: 'TypeScript', role: 'Linguaggio' },
    { name: 'Supabase',   role: 'Database & Auth' },
    { name: 'Vercel',     role: 'Hosting EU' },
    { name: 'Stripe',     role: 'Pagamenti' },
    { name: 'OpenAI',     role: 'LLM' },
    { name: 'Claude',     role: 'Reasoning' },
    { name: 'LiveKit',    role: 'Voice realtime' },
  ];
  return (
    <section id="stack" className="section section-alt">
      <div className="container">
        <header className="sh">
          <div className="sh-l">
            <span className="eyebrow">Tech stack</span>
            <h2 className="display-m">Lo stack che <em style={{ fontStyle: 'normal', background: 'var(--gradient)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>amiamo</em>.</h2>
          </div>
          <div className="sh-r">
            <p className="lead">
              Strumenti maturi, hosting in Europa, GDPR ready.
              Nessuna sorpresa in produzione, nessun lock-in proprietario.
            </p>
            <a href="stack.html" className="link-arrow" style={{ marginTop: 20 }}>
              Stack completo <Icon name="arrow" size={14}/>
            </a>
          </div>
        </header>

        <div className="stack-marquee">
          <Marquee speed={55}>
            {items.concat(items).map((it, i) => (
              <span key={i} className="stack-mq-item">
                <span className="stack-mq-dot" style={{background:'var(--gradient)'}}></span>
                {it.name}
              </span>
            ))}
          </Marquee>
        </div>

        <div className="stack-grid">
          {items.map(it => (
            <div key={it.name} className="stack-pill">
              <span className="stack-dot" style={{background:'var(--gradient)'}}></span>
              <div className="stack-text">
                <b>{it.name}</b>
                <span>{it.role}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── DEMO (inline form, used in contatti.html via PageBoot) ──────────────────
function Demo({ formRef }) {
  const [state, setState] = React.useState({ nome:'', email:'', azienda:'', messaggio:'' });
  const [status, setStatus] = React.useState('idle');
  const set = (k) => (e) => setState({ ...state, [k]: e.target.value });
  const submit = () => {
    if (!state.nome.trim() || !state.email.trim() || !/.+@.+\..+/.test(state.email)) {
      setStatus('error'); return;
    }
    setStatus('sending');
    setTimeout(() => setStatus('sent'), 900);
  };

  return (
    <div className="demo-wrap" ref={formRef}>
      <div className="demo-form card">
        <h3 className="demo-form-title">Raccontaci il progetto</h3>
        <p className="demo-form-sub">
          Quindici minuti, zero impegno. Ti rispondiamo entro 24h lavorative.
        </p>
        <div className="form-grid">
          <Field label="Nome"    value={state.nome}      onChange={set('nome')}    placeholder="Mario Rossi"/>
          <Field label="Email"   type="email" value={state.email} onChange={set('email')}   placeholder="mario@azienda.it"/>
          <Field label="Azienda" value={state.azienda}   onChange={set('azienda')} placeholder="Acme S.r.l." full/>
          <Field label="Cosa vorresti costruire?" textarea value={state.messaggio} onChange={set('messaggio')} placeholder="Una piattaforma per…" full/>
        </div>
        <div className="form-cta">
          <button className="btn btn-grad btn-lg" onClick={submit} disabled={status==='sending'||status==='sent'}>
            {status === 'sending' ? 'Invio in corso…' :
             status === 'sent'    ? 'Inviato. Ti scriviamo a breve ✓' :
                                    <>Invia richiesta <Icon name="arrow" size={14}/></>}
          </button>
          {status === 'error' && <span className="form-err">Controlla nome ed email.</span>}
          <span className="form-note">Risposta entro 24h lavorative.</span>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <article className="card">
          <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-flex' }}>Email</span>
          <a href="mailto:hello@metawebstudio.it" style={{
            display: 'block',
            font: "500 clamp(20px, 2.4vw, 28px)/1 'Geist', sans-serif",
            letterSpacing: '-0.018em',
            color: 'var(--ink)',
          }}>hello@metawebstudio.it</a>
        </article>
        <article className="card">
          <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-flex' }}>Dove siamo</span>
          <div style={{ font: "500 22px/1.2 'Geist', sans-serif", color: 'var(--ink)' }}>
            Napoli, Italia
          </div>
          <p style={{ color: 'var(--muted)', fontSize: 14, marginTop: 8, marginBottom: 0 }}>
            Lavoriamo con clienti in tutta Europa, da remoto.
          </p>
        </article>
        <article className="card">
          <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-flex' }}>Orari</span>
          <div style={{ font: "500 22px/1.2 'Geist', sans-serif", color: 'var(--ink)' }}>
            Lun  Ven · 9  19
          </div>
          <p style={{ color: 'var(--muted)', fontSize: 14, marginTop: 8, marginBottom: 0 }}>
            Risposta entro 24h lavorative.
          </p>
        </article>
      </div>
    </div>
  );
}

function Field({ label, value, onChange, placeholder, type='text', textarea, full }) {
  return (
    <label className={'field ' + (full ? 'field-full' : '')}>
      <span className="field-label">{label}</span>
      {textarea ? (
        <textarea className="field-input" value={value} onChange={onChange}
                  placeholder={placeholder} rows="4"/>
      ) : (
        <input className="field-input" type={type} value={value} onChange={onChange}
               placeholder={placeholder}/>
      )}
    </label>
  );
}

// ── CONTATTI (used on homepage   short version) ────────────────────────────
function Contatti({ onDemoClick }) {
  return (
    <section id="contatti" className="section">
      <div className="container">
        <div className="cta-band">
          <h2 className="cta-band-title">
            Hai un'idea?<br/>
            <em style={{ fontStyle: 'normal', background: 'var(--gradient)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>Costruiamola insieme.</em>
          </h2>
          <p className="cta-band-sub">
            Quindici minuti, ti diciamo se possiamo aiutarti e come.
          </p>
          <div className="cta-band-actions">
            <a className="btn btn-grad btn-lg" href="contatti.html">
              Prenota una demo <Icon name="arrow" size={16}/>
            </a>
            <a className="btn btn-outline btn-lg" href="mailto:hello@metawebstudio.it">
              <Icon name="mail" size={16}/> Scrivici
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FOOTER (v2: minimal, big text) ──────────────────────────────────────────
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer-v2">
      <div className="footer-mesh" aria-hidden></div>
      <div className="container">
        <div className="footer-cta">
          <div className="footer-cta-eyebrow">
            <span style={{ width: 22, height: 1, background: 'linear-gradient(to right, var(--accent), transparent)' }}></span>
            Lavoriamo insieme
          </div>
          <h2 className="footer-cta-title">
            Costruiamo<br/>
            <em>qualcosa.</em>
          </h2>
          <a href="mailto:hello@metawebstudio.it" className="footer-cta-email">
            hello@metawebstudio.it
          </a>
        </div>

        <div className="footer-cols">
          <div className="footer-brand-block">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Logo size={32}/>
              <div className="footer-brand-name">MetaWeb Studio</div>
            </div>
            <div className="footer-brand-tag">
              Costruiamo SaaS AI-native, automazioni e siti premium.
            </div>
          </div>

          <FooterCol title="Studio" links={[
            ['Servizi',        'servizi.html'],
            ['Portfolio',      'portfolio.html'],
            ['Come lavoriamo', 'processo.html'],
            ['Stack',          'stack.html'],
          ]}/>
          <FooterCol title="Prodotti" links={[
            ['DomusFlow AI',   'domusflow.html'],
            ['LexAI',          'lexai.html'],
            ['MetaAgent',      'metaagent.html'],
            ['Tool gratuiti',  'tools.html'],
          ]}/>
          <FooterCol title="Contatti" links={[
            ['Email',          'mailto:hello@metawebstudio.it'],
            ['LinkedIn',       'https://linkedin.com/company/metawebstudio'],
            ['Prenota demo',   'contatti.html'],
          ]}/>
          <FooterCol title="Legale" links={[
            ['Privacy',  'privacy.html'],
            ['Cookie',   'cookie.html'],
            ['Termini',  'termini.html'],
          ]}/>
        </div>

        <div className="footer-bottom">
          <span>© {year} MetaWeb Studio · P.IVA <span style={{opacity:.55}}>[inserire]</span></span>
          <span>Napoli · Italia</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div className="footer-col">
      <h4>{title}</h4>
      <ul>
        {links.map(([label, href]) => (
          <li key={label}>
            <a href={href} onClick={(e)=>{
              if (href.startsWith('#')) {
                e.preventDefault();
                const el = document.querySelector(href);
                if (el) el.scrollIntoView({behavior:'smooth'});
              }
            }}>{label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, {
  Processo, Stack, Demo, Field, Contatti, Footer, FooterCol,
});