/* v2 TrustBar + CTA + Footer */

const V2TrustBar = () => (
  <section className="v2-trust">
    <div className="v2-container v2-trust__inner">
      <span className="v2-trust__lbl">Compatible amb</span>
      <div className="v2-trust__items">
        <span className="v2-trust__item">Centre de la <strong>Propietat Forestal</strong></span>
        <span className="v2-trust__sep" />
        <span className="v2-trust__item"><strong>SIDER</strong> · Generalitat de Catalunya</span>
        <span className="v2-trust__sep" />
        <span className="v2-trust__item">PEPAC <strong>2023-2027</strong></span>
        <span className="v2-trust__sep" />
        <span className="v2-trust__item">Intervencions <strong>FEADER</strong></span>
        <span className="v2-trust__sep" />
        <span className="v2-trust__item">ACC/1917/2024 · <strong>ARP/836/2026</strong></span>
      </div>
    </div>
  </section>
);

const V2CTA = () => {
  const onSubmit = (e) => {
    e.preventDefault();
    // Demo: no real backend. Could wire to a real endpoint later.
    const btn = e.currentTarget.querySelector("button[type=submit]");
    if (btn) {
      const original = btn.textContent;
      btn.textContent = "Gràcies — et contactem aviat";
      btn.disabled = true;
      setTimeout(() => { btn.textContent = original; btn.disabled = false; }, 3000);
    }
  };
  return (
    <section className="v2-cta">
      <div className="v2-cta__media">
        <img src={V2_PHOTOS.forestMist} alt="" loading="lazy"/>
      </div>
      <div className="v2-container v2-cta__inner reveal">
        <V2Eyebrow>Accés anticipat</V2Eyebrow>
        <h2>Cada any surten convocatòries.<br/>Tu no hauries de <em>perseguir-les</em>.</h2>
        <p>
          ForestOS s'està construint amb enginyers que gestionen IOFs cada dia. Si
          vols formar part del primer grup d'usuaris, deixa'ns les teves dades i et
          contactem aquest mes.
        </p>

        <form className="v2-form" onSubmit={onSubmit}>
          <div className="v2-form__field">
            <label className="v2-form__label" htmlFor="f-nom">Nom</label>
            <input className="v2-form__input" id="f-nom" name="nom" type="text" placeholder="Nom i cognoms" required />
          </div>
          <div className="v2-form__field">
            <label className="v2-form__label" htmlFor="f-email">Email</label>
            <input className="v2-form__input" id="f-email" name="email" type="email" placeholder="tu@empresa.cat" required />
          </div>
          <div className="v2-form__field">
            <label className="v2-form__label" htmlFor="f-empresa">Empresa o col·legi</label>
            <input className="v2-form__input" id="f-empresa" name="empresa" type="text" placeholder="Consultora, cooperativa, col·legi…" />
          </div>
          <div className="v2-form__field">
            <label className="v2-form__label" htmlFor="f-comarca">Comarca</label>
            <input className="v2-form__input" id="f-comarca" name="comarca" type="text" placeholder="Bages, Garrotxa, Selva…" />
          </div>
          <div className="v2-form__submit-row">
            <button type="submit" className="v2-btn v2-btn--primary">Reservar accés
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </button>
            <p className="v2-form__note">
              Cap correu comercial. Només una resposta personal d'un enginyer de l'equip.
            </p>
          </div>
        </form>

        <div className="v2-cta__meta">
          <span>Català</span>
          <span style={{ color: "var(--v2-text-faint)" }}>·</span>
          <span>Catalunya 2026</span>
          <span style={{ color: "var(--v2-text-faint)" }}>·</span>
          <span>Sense compromís</span>
        </div>
      </div>
    </section>
  );
};

const V2Footer = () => (
  <footer className="v2-footer">
    <div className="v2-container">
      <div className="v2-footer__grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18, color: "var(--v2-text)" }}>
            <span style={{ width: 30, height: 30, background: "var(--v2-accent)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--v2-bg-void)" }}>
              <V2Mark size={18}/>
            </span>
            <span style={{ fontFamily: "var(--v2-font-display)", fontWeight: 600, fontSize: 19 }}>Forest<span style={{color:"var(--v2-accent)"}}>OS</span></span>
          </div>
          <p className="v2-footer__about">
            El sistema operatiu del bosc. Una eina per a enginyers, cooperatives i
            administracions que gestionen finques forestals a Catalunya.
          </p>
          <div style={{ marginTop: 22, display: "flex", gap: 18, fontFamily: "var(--v2-font-mono)", fontSize: 11, color: "var(--v2-text-muted)", letterSpacing: "0.08em" }}>
            <span>Fet a</span><span>·</span><span>CATALUNYA</span>
          </div>
        </div>
        <div>
          <h4>Producte</h4>
          <ul>
            <li><a href="#funcionalitats">Funcionalitats</a></li>
            <li><a href="#cicle">Cicle del pla</a></li>
            <li><a href="#sider">Tràmits SIDER</a></li>
            <li><a href="#ecosistema">Ecosistema</a></li>
          </ul>
        </div>
        <div>
          <h4>Per a qui</h4>
          <ul>
            <li><a href="#perfils">Enginyers forestals</a></li>
            <li><a href="#perfils">Cooperatives</a></li>
            <li><a href="#perfils">Ens locals</a></li>
            <li><a href="#confianca">Confiança</a></li>
          </ul>
        </div>
        <div>
          <h4>Contacte</h4>
          <ul>
            <li><a href="#cta">Sol·licita accés</a></li>
            <li><a href="mailto:hola@forestos.cat">hola@forestos.cat</a></li>
            <li><a href="#">Avís legal</a></li>
            <li><a href="#">Privacitat</a></li>
          </ul>
        </div>
      </div>
      <div className="v2-footer__legal">
        <span>© 2026 ForestOS · Catalunya</span>
        <span className="sp" />
        <span>El sistema operatiu del bosc</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { V2TrustBar, V2CTA, V2Footer });