/* global React */
const { useState, useEffect } = React;

// ---- Icons (1.5px stroke, square 24 viewBox) ----
const I = ({ d, size = 18, sw = 1.6 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={sw}
       strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const IcLayers   = (p) => <I {...p} d={<><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/></>} />;
const IcFlame    = (p) => <I {...p} d={<path d="M12 3c2.5 3 4.5 6 4.5 9a4.5 4.5 0 0 1-9 0c0-2 1-4 2.5-6 0 1.2.7 2 1.5 2.4-.2-2 .5-3.7 2.5-5.4z"/>} />;
const IcSprout   = (p) => <I {...p} d={<><path d="M7 20h10"/><path d="M12 20v-9"/><path d="M12 11C9 11 7 9 7 5c4 0 5 2.5 5 6z"/><path d="M12 11c3 0 5-2 5-5-3 0-5 1.5-5 5z"/></>} />;
const IcBuild    = (p) => <I {...p} d={<><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h6"/></>} />;
const IcWind     = (p) => <I {...p} d={<path d="M3 8h12a3 3 0 1 0-3-3M3 12h17a3 3 0 1 1-3 3M3 16h10a3 3 0 1 1-3 3"/>} />;
const IcFlask    = (p) => <I {...p} d={<path d="M9 3h6v6l4 8a3 3 0 0 1-3 4H8a3 3 0 0 1-3-4l4-8V3z"/>} />;
const IcArr      = (p) => <I {...p} d={<path d="M5 12h14M13 5l7 7-7 7"/>} />;
const IcMail     = (p) => <I {...p} d={<><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>} />;
const IcPhone    = (p) => <I {...p} d={<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/>} />;
const IcPin      = (p) => <I {...p} d={<><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></>} />;
const IcLink     = (p) => <I {...p} d={<><rect x="2" y="2" width="20" height="20" rx="3"/><path d="M7 10v7M7 7v.01M11 17v-4a2 2 0 0 1 4 0v4M11 10v7"/></>} />;

// ---- Nav ----
function Nav() {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="#" className="nav-logo">
          <span className="glyph">C</span>
          <span>CCM<span style={{ color: "var(--fg-4)", marginLeft: 6, fontWeight: 400 }}>Carbon Capture Materials</span></span>
        </a>
        <div className="nav-links">
          <a href="#" className="active">Home</a>
          <a href="#about">About</a>
          <a href="#solutions">Solutions</a>
          <a href="#news">News</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-cta">
          <span className="lang">EN · DE</span>
          <a href="#contact" className="btn">Get Started <IcArr size={13} sw={2} /></a>
        </div>
      </div>
    </nav>
  );
}

// ---- Ticker ----
function Ticker() {
  return (
    <div className="ticker">
      <span className="dot" />
      <span style={{ color: "var(--fg-3)" }}>NOTICE / 11.2025 —</span>
      <span>Office relocated to Kienberger Allee 4, D-12529 Schönefeld</span>
    </div>
  );
}

// ---- Hero ----
function Hero() {
  return (
    <section className="hero">
      <div className="bg-grid" />
      <div className="glow" />
      <div className="shell">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="dot" />
              <span className="badge">CCM / EST. 2011</span>
              <span>Carbon Capture &amp; Utilisation</span>
            </div>
            <h1>
              Turning industrial <em>CO₂</em> into <span className="it">high‑value</span> sustainable materials.
            </h1>
            <p className="hero-lede">
              We capture CO₂ and waste streams from heavy industry and agriculture, then convert
              them — through a patented CCU process — into low‑carbon fertilisers, biochar,
              biocomposites and construction materials that plug into existing supply chains.
            </p>
            <div className="hero-cta">
              <a href="#solutions" className="btn-pill">Explore solutions <IcArr size={14} sw={2} /></a>
              <a href="#contact" className="btn-ghost">Contact us</a>
            </div>
          </div>

          <aside className="hero-visual" aria-hidden>
            <div className="hero-visual-head">
              <span>CCM · SPECIMEN</span>
              <div className="dot-row"><span /><span /><span /></div>
            </div>
            <div className="hero-visual-img">
              <img src="assets/images/hero-home-3.jpg" alt="" />
              <span className="hv-crosshair tl" />
              <span className="hv-crosshair tr" />
              <span className="hv-crosshair bl" />
              <span className="hv-crosshair br" />
              <div className="hv-tag">
                <span className="hv-tag-l">REF / 03 — BIOCHAR + REGENERATIVE GROWTH</span>
                <span className="hv-tag-v">+400% capture efficiency</span>
              </div>
            </div>
          </aside>
        </div>

        <div className="hero-stats">
          <div>
            <div className="v">400<em>%</em></div>
            <div className="l">Capture efficiency</div>
          </div>
          <div>
            <div className="v">14<em> yrs</em></div>
            <div className="l">In carbon R&amp;D</div>
          </div>
          <div>
            <div className="v">6</div>
            <div className="l">Product lines</div>
          </div>
          <div>
            <div className="v">4<em> /5</em></div>
            <div className="l">Continents served</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Ticker, Hero, IcLayers, IcFlame, IcSprout, IcBuild, IcWind, IcFlask, IcArr, IcMail, IcPhone, IcPin, IcLink });