/* global React, IcLayers, IcFlame, IcSprout, IcBuild, IcWind, IcFlask, IcArr */

// ---- About ----
function About() {
  const items = [
    { num: "01", h: "What is CCM", p: "A suite of advanced carbon capture & utilisation technologies designed to convert industrial CO₂ emissions into high‑value sustainable products at commercial scale." },
    { num: "02", h: "Vision",      p: "A world where carbon capture is seamlessly integrated into industry and urban infrastructure — invisible, default, and contributing to a carbon‑neutral future." },
    { num: "03", h: "Mission",     p: "To accelerate the low‑carbon transition with cutting‑edge capture solutions that are both technically effective and commercially sustainable." },
  ];
  return (
    <section className="sec" id="about">
      <div className="shell">
        <div className="sec-head">
          <div className="index">
            <span>§ 01 · About</span>
            <b>The company</b>
          </div>
          <div>
            <h2>A research‑led <em>CCU</em> company, turning emissions into materials since 2011.</h2>
            <p className="lede">
              Founded in Leipzig and built around a decade of work in carbon chemistry, CCM operates
              at the intersection of industrial decarbonisation and circular materials science.
            </p>
            <div className="actions">
              <a href="#" className="btn-link">Read more <span className="arr">→</span></a>
            </div>
          </div>
        </div>
        <div className="about-grid">
          {items.map(it => (
            <div className="about-card" key={it.num}>
              <div className="num">{it.num}</div>
              <h3>{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Process ----
function Process() {
  const steps = [
    { n: "01", t: "Capture",   p: "CO₂ and waste gases are captured at the point of emission — industrial flue stacks and agricultural sources." },
    { n: "02", t: "Convert",   p: "Captured carbon is paired with secondary waste streams (ammonia, phosphate) through our patented CCU process." },
    { n: "03", t: "Create",    p: "The reaction produces stable, high‑value outputs: low‑carbon fertilisers, biochar and composite feedstocks." },
    { n: "04", t: "Integrate", p: "Products are formatted to drop directly into existing supply chains — no retooling, no friction, immediate scale." },
  ];
  return (
    <section className="sec compact" id="process" style={{ background: "var(--bg-1)" }}>
      <div className="shell">
        <div className="sec-head">
          <div className="index">
            <span>§ 02 · Process</span>
            <b>How it works</b>
          </div>
          <div>
            <h2>From waste stream to product, in <em>four steps</em>.</h2>
            <p className="lede">
              Every CCM solution is built on the same closed loop: capture, convert, create, integrate.
              The output is always a product that someone will pay for — that's what makes it scale.
            </p>
          </div>
        </div>
        <div className="process">
          {steps.map(s => (
            <div className="proc" key={s.n}>
              <div className="step"><b>{s.n}</b><span>STAGE</span></div>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Solutions (tabular) ----
function Solutions() {
  const rows = [
    { Ic: IcLayers, name: "Biocomposites",            desc: "Carbon‑negative composites engineered for construction, aerospace and next‑gen manufacturing.", tags: ["High‑Performance", "Biodegradable", "Circular"] },
    { Ic: IcFlame,  name: "Biochar",                  desc: "High‑performance biochar that captures and stores CO₂ while enhancing soil fertility.",            tags: ["Permanent Sequestration", "Regenerative", "AI‑Optimised"] },
    { Ic: IcSprout, name: "Carbon‑Infused Fertiliser",desc: "Fertilisers integrating carbon capture materials to lift yields while cutting agricultural emissions.", tags: ["Higher Yields", "Lower GHG", "Net‑Zero Ag"] },
    { Ic: IcBuild,  name: "Sustainable Construction", desc: "Carbon‑embedded materials redefining urban development and infrastructure.",                      tags: ["CO₂‑Sequestering", "Durable", "Net‑Zero Cities"] },
    { Ic: IcWind,   name: "AI‑Powered Fuel Drying",   desc: "Low‑energy drying that improves fuel performance and reduces upstream emissions.",                tags: ["Higher Output", "IoT‑Integrated", "Lower Footprint"] },
    { Ic: IcFlask,  name: "Carbon Capture",           desc: "Capture technology paired with a blockchain‑backed carbon credit registry.",                       tags: ["High‑Efficiency", "Blockchain Credits", "AI Monitoring"] },
  ];
  return (
    <section className="sec" id="solutions">
      <div className="shell">
        <div className="sec-head">
          <div className="index">
            <span>§ 03 · Solutions</span>
            <b>Product lines</b>
          </div>
          <div>
            <h2>Six product lines, one <em>carbon supply chain</em>.</h2>
            <p className="lede">
              CCM technologies span the full lifecycle of captured carbon — from the moment it's
              taken out of the air to the moment it's locked into a building, a soil, or a battery.
            </p>
          </div>
        </div>

        <div className="solutions">
          {rows.map((r, i) => (
            <a className="sol-row" key={r.name} href="#">
              <span className="idx">{String(i + 1).padStart(2, "0")} /</span>
              <span className="name">
                <span className="ic"><r.Ic size={18} /></span>
                {r.name}
              </span>
              <span className="desc">{r.desc}</span>
              <span className="tags">
                {r.tags.map(t => <span key={t}>{t}</span>)}
                <span className="arr-link">→</span>
              </span>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 32, display: "flex", justifyContent: "flex-end" }}>
          <a href="#" className="btn-link">All solutions <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ---- Evidence (numbers strip) ----
function Evidence() {
  return (
    <section className="sec compact" id="evidence" style={{ background: "var(--bg-1)" }}>
      <div className="shell">
        <div className="sec-head" style={{ marginBottom: 32 }}>
          <div className="index">
            <span>§ 04 · Evidence</span>
            <b>By the numbers</b>
          </div>
          <div>
            <h2>Decarbonisation, <em>measured</em>.</h2>
          </div>
        </div>
        <div className="evidence">
          <div>
            <div className="v"><em>4×</em></div>
            <div className="l">Capture efficiency vs. baseline absorbents</div>
          </div>
          <div>
            <div className="v">CO₂ <em>→</em> $</div>
            <div className="l">Every output is a commercial product</div>
          </div>
          <div>
            <div className="v"><em>0</em> retool</div>
            <div className="l">Drops into existing supply chains</div>
          </div>
          <div>
            <div className="v"><em>14</em> yrs</div>
            <div className="l">In carbon chemistry R&amp;D</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Funded Programme (ZIM Feasibility Study) ----
function Programme() {
  const rows = [
    { k: "Funding programme",                  v: "ZIM Feasibility Study" },
    { k: "Type of funding",                    v: "Non‑repayable grant" },
    { k: "Eligible cost cap (single‑company)", v: "Up to 125,000 EUR" },
    { k: "Maximum funding rate (small co.)",   v: "Up to 70 %" },
    { k: "Internal project cost basis",        v: "97,380 EUR" },
  ];
  return (
    <section className="sec compact" id="programme">
      <div className="shell">
        <div className="sec-head">
          <div className="index">
            <span>§ 05 · Active Programme</span>
            <b>Funded research</b>
          </div>
          <div>
            <h2>Phosphorus recovery from <em>sewage sludge biochar.</em></h2>
            <p className="lede">
              CCM is preparing a ZIM feasibility study for phosphorus recovery from sewage
              sludge biochar — establishing the technical and economic basis for a later
              R&amp;D project.
            </p>
          </div>
        </div>

        <div className="prog-grid">
          <div className="prog-spec">
            <div className="prog-spec-head">
              <span className="mono-l">PROJECT SPEC</span>
              <span className="mono-l accent">ZIM · DE</span>
            </div>
            <dl className="prog-table">
              {rows.map(r => (
                <div className="prog-row" key={r.k}>
                  <dt>{r.k}</dt>
                  <dd>{r.v}</dd>
                </div>
              ))}
            </dl>
            <div className="prog-status">
              <span className="dot-status" />
              <span>Final grant amount still subject to formal confirmation.</span>
            </div>
          </div>

          <div className="prog-figures">
            <div className="prog-fig">
              <span className="mono-l">CALCULATED GRANT · 70 % OF BASIS</span>
              <div className="prog-fig-v">
                <em>68,166</em><span>EUR</span>
              </div>
              <p>Calculated funding amount, computed at the current maximum 70 % rate for small companies applied to the 97,380 EUR project cost basis.</p>
            </div>
            <div className="prog-fig alt">
              <span className="mono-l">COMPANY CONTRIBUTION · 30 %</span>
              <div className="prog-fig-v">
                <em>29,214</em><span>EUR</span>
              </div>
              <p>Corresponding company contribution at the 70 % funding rate. Figures are based on the current internal cost basis and the published ZIM framework as of 15 May 2026.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- News ----
function News() {
  const items = [
    {
      cat: "Research", time: "12 min", date: "2025.03.04",
      img: "assets/images/biochar-senegal.jpg",
      h: "Can biochar restore degraded lands and combat desertification?",
      p: "A look at the potential of biochar to reverse land degradation across the Sahel and other arid regions."
    },
    {
      cat: "Energy", time: "15 min", date: "2025.03.03",
      img: "assets/images/battery-charcoal-green.jpg",
      h: "Biochar in energy storage: a sustainable solution for the future",
      p: "How biochar‑based materials are reshaping electrode chemistry and grid‑scale storage."
    },
    {
      cat: "Company", time: "5 min", date: "2025.01.20",
      img: "assets/images/biochar.jpg",
      h: "Revolutionising carbon capture: the CCM approach",
      p: "From organic waste to profit — the circular economy model behind every CCM technology."
    },
  ];
  return (
    <section className="sec" id="news">
      <div className="shell">
        <div className="sec-head">
          <div className="index">
            <span>§ 06 · News</span>
            <b>Latest</b>
          </div>
          <div>
            <h2>Field notes from <em>the lab</em> and beyond.</h2>
            <p className="lede">
              Research updates, industry briefings and progress reports from our deployments.
            </p>
            <div className="actions"><a href="#" className="btn-link">All articles <span className="arr">→</span></a></div>
          </div>
        </div>
        <div className="news-grid">
          {items.map(a => (
            <a className="news-card" key={a.h} href="#">
              <div className="img"><img src={a.img} alt="" /></div>
              <div className="meta">
                <b>{a.cat}</b><span className="sep">/</span><span>{a.time}</span><span className="sep">/</span><span>{a.date}</span>
              </div>
              <h4>{a.h}</h4>
              <p>{a.p}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- CTA + Footer ----
function CTA() {
  return (
    <section className="sec" id="contact" style={{ paddingBlock: 0 }}>
      <div className="shell">
        <div className="cta-block">
          <h2>Ready to turn carbon into <em>opportunity?</em></h2>
          <div className="right">
            <p>
              Whether you're in agriculture, construction or heavy industry, our technologies
              can help you reduce emissions and unlock new revenue. Let's build the loop.
            </p>
            <div className="actions">
              <a href="#" className="btn-pill">Get in touch <IcArr size={14} sw={2} /></a>
              <a href="#solutions" className="btn-ghost">View solutions</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="shell foot-grid">
        <div className="brand">
          <div className="glyph-row">
            <span className="glyph">C</span>
            <b>CCM</b>
          </div>
          <p>
            Carbon Capture Materials. Transforming captured CO₂ and waste streams into
            high‑value sustainable materials for a circular economy.
          </p>
        </div>
        <div>
          <h5>Navigate</h5>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#solutions">Solutions</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h5>Solutions</h5>
          <ul>
            <li><a href="#">Biocomposites</a></li>
            <li><a href="#">Biochar</a></li>
            <li><a href="#">Fertiliser</a></li>
            <li><a href="#">Construction</a></li>
            <li><a href="#">Carbon Capture</a></li>
            <li><a href="#">Fuel Drying</a></li>
          </ul>
        </div>
        <div className="contact">
          <h5>Contact</h5>
          <div className="li"><IcMail size={14} sw={1.6} /><a href="mailto:j.uhlig@ccm-technology.com">j.uhlig@ccm-technology.com</a></div>
          <div className="li"><IcPhone size={14} sw={1.6} /><a href="tel:+493419288128">(+49) 341 92881289</a></div>
          <div className="li"><IcPin size={14} sw={1.6} /><span>Kienberger Allee 4<br/>D‑12529 Schönefeld, Germany</span></div>
          <div className="li" style={{ marginTop: 4 }}><IcLink size={14} sw={1.6} /><a href="https://www.linkedin.com/company/ccm-carbon/" target="_blank" rel="noopener noreferrer">LinkedIn</a></div>
        </div>
      </div>
      <div className="shell foot-bottom">
        <span>© 2026 CCM CARBON CAPTURE MATERIALS · ALL RIGHTS RESERVED</span>
        <div className="links">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Imprint</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { About, Process, Solutions, Evidence, Programme, News, CTA, Footer });