/* v2 Hero — full-bleed forest photo with tech HUD overlay */

const V2Hero = () => {
  const clock = v2UseClock();
  return (
    <section className="v2-hero">
      <div className="v2-hero__media">
        <img src={V2_PHOTOS.heroForest} alt="" loading="eager"/>
      </div>
      <div className="v2-hero__overlay" />
      <div className="v2-hero__grid" />

      {/* HUD frame */}
      <span className="v2-bracket v2-bracket--tl" />
      <span className="v2-bracket v2-bracket--tr" />
      <span className="v2-bracket v2-bracket--bl" />
      <span className="v2-bracket v2-bracket--br" />

      {/* Top HUD */}
      <div className="v2-hero__hud-top">
        <span>
          <span className="v-dot" />
          <span className="v-accent">FORESTOS</span><span className="v-bar">|</span>v0.4<span className="v-bar">|</span>ACCÉS ANTICIPAT
        </span>
        <span>
          <span className="v-cyan">{clock}</span><span className="v-bar">|</span>GMT+1<span className="v-bar">|</span>CATALUNYA
        </span>
        <span>
          COMPATIBLE<span className="v-bar">|</span><span className="v-accent">CPF</span> · <span className="v-accent">SIDER</span><span className="v-bar">|</span>CA
        </span>
      </div>

      <div className="v2-container v2-hero__inner">
        <div className="v2-hero__copy">
          <div className="v2-hero__badges in-up">
            <span className="v2-hero__badge"><span className="pulse"/>Compatible amb SIDER i el CPF</span>
            <span className="v2-hero__badge v2-hero__badge--cyan"><span className="pulse"/>Bases reguladores 2024-2026</span>
          </div>
          <h1 className="in-up in-up-d-1">El sistema<br/>operatiu del<br/><em>bosc.</em></h1>
          <p className="v2-hero__lede in-up in-up-d-2">
            Plans, inventaris, ajuts SIDER i actuacions de finques privades i
            públiques — en una sola eina, amb traçabilitat completa de l'IOF a
            l'execució.
          </p>
          <div className="v2-hero__ctas in-up in-up-d-3">
            <V2Button variant="primary">Sol·licita accés anticipat</V2Button>
            <V2Button variant="ghost">Veure una demo</V2Button>
          </div>
        </div>

        <div className="v2-hero__side in-up in-up-d-2">
          <V2LiveFeed />
        </div>
      </div>

      {/* Bottom stat strip — real market data */}
      <div className="v2-hero__strip">
        <div className="v2-container">
          <div className="v2-hero__strip-inner">
            <div className="v2-hero__stat">
              <div className="v2-hero__stat-val v2-hero__stat-val--accent">4.400</div>
              <div className="v2-hero__stat-lbl">Instruments d'ordenació vigents</div>
              <div className="v2-hero__stat-delta">Catalunya · 2026</div>
            </div>
            <div className="v2-hero__stat">
              <div className="v2-hero__stat-val">500.000 ha</div>
              <div className="v2-hero__stat-lbl">Bosc sota gestió planificada</div>
              <div className="v2-hero__stat-delta">33% del bosc català</div>
            </div>
            <div className="v2-hero__stat">
              <div className="v2-hero__stat-val v2-hero__stat-val--cyan">1,39 M ha</div>
              <div className="v2-hero__stat-lbl">Bosc català sense IOF vigent</div>
              <div className="v2-hero__stat-delta">Mercat expansiu</div>
            </div>
            <div className="v2-hero__stat">
              <div className="v2-hero__stat-val">0</div>
              <div className="v2-hero__stat-lbl">Competidors SaaS verticals</div>
              <div className="v2-hero__stat-delta">Categoria buida</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.V2Hero = V2Hero;