/* global React */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* =========================================================
   About / mission
   ========================================================= */
function About() {
  return (
    <section id="about" className="section-pad" style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="about-grid reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>About · Our mission</div>
            <h2 className="display display-lg" style={{ margin: '0 0 32px' }}>
              The internet<br/>
              has a <span className="green-highlight">carbon problem</span>.
            </h2>
          </div>
          <div>
            <p className="lede" style={{ marginBottom: 20 }}>
              If the web were a country, it would be the 4th-largest polluter on Earth.
              Every page view, every scroll, every animation, it all burns energy.
            </p>
            <p className="lede" style={{ marginBottom: 20, color: 'var(--ink-2)' }}>
              We think the next generation of websites should be measured not just by how they look,
              but by what they take from the planet. So we built a web builder that does both ,
              beautiful, fast, and <strong style={{ color: 'var(--ink-0)' }}>carbon-negative by default</strong>.
            </p>
            <p className="lede" style={{ color: 'var(--ink-2)' }}>
              Ree is made for freelancers, small businesses, and startups who care where their pixels live.
            </p>
          </div>
        </div>

        <div className="about-stats reveal-stagger">
          <Stat big="4.1%" lbl="of global emissions come from the web, more than all airlines combined"/>
          <Stat big="4.6g" lbl="average CO₂ per page view on a typical site"/>
          <Stat big="0.09g" lbl="CO₂ per page view on a Ree-hosted site" highlight/>
          <Stat big="98%" lbl="less carbon than the industry average"/>
        </div>
      </div>

      <style>{`
        .about-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(40px, 8vw, 120px);
          align-items: start;
          margin-bottom: clamp(60px, 8vw, 120px);
        }
        .about-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: var(--line);
          border: 1px solid var(--line);
          border-radius: var(--r-lg);
          overflow: hidden;
        }
        @media (max-width: 860px) {
          .about-grid { grid-template-columns: 1fr; }
          .about-stats { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </section>
  );
}

function Stat({ big, lbl, highlight = false }) {
  return (
    <div style={{
      background: highlight ? 'rgba(159,232,112,0.06)' : 'var(--bg-1)',
      padding: 'clamp(28px, 3vw, 40px)',
      minHeight: 180,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      gap: 16,
    }}>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(36px, 4vw, 56px)',
        fontWeight: 700,
        letterSpacing: '-0.03em',
        color: highlight ? 'var(--mint)' : 'var(--ink-0)',
        lineHeight: 1,
      }}>{big}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>{lbl}</div>
    </div>
  );
}

/* =========================================================
   Sustainability proof, badge + cert bar
   ========================================================= */
function Sustainability() {
  return (
    <section id="sustainability" className="section-pad" style={{
      background: 'linear-gradient(180deg, var(--bg-0) 0%, var(--forest-2) 50%, var(--bg-0) 100%)',
      borderTop: '1px solid var(--line)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="container">
        <div className="sus-grid reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Sustainability · Verified</div>
            <h2 className="display display-lg" style={{ margin: '0 0 24px' }}>
              Green by<br/>
              default.<br/>
              <span className="green-highlight">Certified</span> by design.
            </h2>
            <p className="lede" style={{ marginBottom: 36 }}>
              Every Ree site runs on 100% renewable infrastructure, with carbon offsets baked into every plan.
              We report our numbers publicly, every month.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-ghost" href="#">
                Read our 2026 climate report
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </div>
          </div>
          <GreenBadge />
        </div>

        <div className="certs reveal-stagger">
          <CertPill icon="leaf" title="Green Web Foundation" sub="Verified renewable hosting"/>
          <CertPill icon="earth" title="B Corp, pending" sub="Certification Q4 2026"/>
          <CertPill icon="tree" title="1% for the Planet" sub="1% of revenue to reforestation"/>
          <CertPill icon="bolt" title="100% Renewable" sub="Solar + wind powered DCs"/>
        </div>
      </div>

      <style>{`
        .sus-grid {
          display: grid;
          grid-template-columns: 1.2fr 1fr;
          gap: clamp(40px, 8vw, 100px);
          align-items: center;
          margin-bottom: clamp(60px, 8vw, 100px);
        }
        .certs {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        @media (max-width: 860px) {
          .sus-grid { grid-template-columns: 1fr; }
          .certs { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </section>
  );
}

function GreenBadge() {
  // Cleaner stamp-style badge: double ring, rotating text on outer, crisp mint type,
  // centered REE logo + stat, small seal notches at 4 cardinal points.
  return (
    <div className="green-badge">
      {/* Outer ring with rotating label text */}
      <div className="badge-ring">
        <svg viewBox="0 0 200 200" width="100%" height="100%" aria-hidden="true">
          <defs>
            {/* Using a circle path, startOffset 0 at 3 o'clock. We rotate the path so text reads from the top. */}
            <path id="badgecircle" d="M 100,20 a 80,80 0 1,1 -0.001,0"/>
          </defs>
          <text fill="var(--mint)" fontFamily="var(--font-mono)" fontSize="7.2" letterSpacing="3.8">
            <textPath href="#badgecircle" startOffset="0%">
              {"CARBON NEGATIVE  \u2022  CERTIFIED BY REE CLIMATE  \u2022  EST. 2026  \u2022  CARBON NEGATIVE  \u2022  CERTIFIED BY REE CLIMATE  \u2022  EST. 2026  \u2022  "}
            </textPath>
          </text>
        </svg>
      </div>

      {/* Static rings, notches, tick marks */}
      <svg className="badge-static" viewBox="0 0 200 200" width="100%" height="100%" aria-hidden="true">
        {/* hairline outer */}
        <circle cx="100" cy="100" r="96" fill="none" stroke="var(--mint)" strokeWidth="0.4" opacity="0.35"/>
        {/* inner ring bounding the text track */}
        <circle cx="100" cy="100" r="70" fill="none" stroke="var(--mint)" strokeWidth="0.5" opacity="0.55"/>
        {/* four cardinal notch dots */}
        <circle cx="100" cy="8" r="1.6" fill="var(--mint)"/>
        <circle cx="100" cy="192" r="1.6" fill="var(--mint)"/>
        <circle cx="8" cy="100" r="1.6" fill="var(--mint)"/>
        <circle cx="192" cy="100" r="1.6" fill="var(--mint)"/>
        {/* 24 tiny tick marks around the inner ring */}
        {Array.from({ length: 48 }).map((_, i) => {
          const a = (i / 48) * Math.PI * 2;
          const r1 = 74, r2 = i % 4 === 0 ? 78 : 76;
          const x1 = 100 + Math.cos(a) * r1, y1 = 100 + Math.sin(a) * r1;
          const x2 = 100 + Math.cos(a) * r2, y2 = 100 + Math.sin(a) * r2;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--mint)" strokeWidth="0.5" opacity={i % 4 === 0 ? 0.6 : 0.25}/>;
        })}
      </svg>

      {/* Core */}
      <div className="badge-core">
        <div className="badge-core-logo">
          <img src="assets/logo-mint.png" alt="Ree" />
        </div>
        <div className="badge-core-divider" />
        <div className="badge-core-number">0.09<span className="badge-core-unit">g</span></div>
        <div className="badge-core-label">CO₂ PER PAGE VIEW</div>
      </div>

      <style>{`
        .green-badge {
          position: relative;
          aspect-ratio: 1;
          max-width: 380px;
          margin: 0 auto;
          display: grid;
          place-items: center;
        }
        .badge-ring {
          position: absolute; inset: 0;
          animation: badge-spin 40s linear infinite;
        }
        .badge-static { position: absolute; inset: 0; pointer-events: none; }
        @keyframes badge-spin { to { transform: rotate(360deg); } }
        .badge-core {
          position: relative;
          z-index: 1;
          width: 58%;
          aspect-ratio: 1;
          border-radius: 50%;
          background:
            radial-gradient(circle at 50% 35%, rgba(159,232,112,0.12) 0%, rgba(159,232,112,0) 55%),
            radial-gradient(circle at 50% 50%, #0f2814 0%, #07170b 100%);
          border: 1px solid rgba(159,232,112,0.55);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 8%;
          box-shadow: 0 0 80px rgba(159,232,112,0.18), inset 0 0 40px rgba(159,232,112,0.06);
        }
        .badge-core-logo {
          height: 18%;
          display: grid; place-items: center;
          margin-bottom: 6%;
        }
        .badge-core-logo img { height: 100%; width: auto; display: block; }
        .badge-core-divider {
          width: 30%;
          height: 1px;
          background: rgba(159,232,112,0.4);
          margin-bottom: 8%;
        }
        .badge-core-number {
          font-family: var(--font-display);
          font-size: clamp(28px, 5.2vw, 48px);
          font-weight: 700;
          color: var(--mint);
          letter-spacing: -0.04em;
          line-height: 1;
          display: inline-flex; align-items: baseline; gap: 2px;
        }
        .badge-core-unit {
          font-size: 0.55em;
          color: rgba(159,232,112,0.7);
          font-weight: 500;
        }
        .badge-core-label {
          font-family: var(--font-mono);
          font-size: 9px;
          letter-spacing: 0.22em;
          color: rgba(159,232,112,0.75);
          margin-top: 10px;
        }
      `}</style>
    </div>
  );
}

function CertPill({ icon, title, sub }) {
  const icons = {
    leaf: <path d="M4 20C4 12 10 4 20 4C20 14 14 20 4 20Z M4 20L14 10" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/>,
    earth: <><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.4" fill="none"/><path d="M4 12h16 M12 4c3 2 3 14 0 16 M12 4c-3 2-3 14 0 16" stroke="currentColor" strokeWidth="1.4" fill="none"/></>,
    tree: <path d="M12 3L6 11h3l-4 6h5v4h4v-4h5l-4-6h3z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
    bolt: <path d="M13 3L4 14h6l-1 7 9-11h-6z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round"/>,
  };
  return (
    <div className="cert-pill">
      <div className="cert-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">{icons[icon]}</svg>
      </div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-0)' }}>{title}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 2 }}>{sub}</div>
      </div>
      <style>{`
        .cert-pill {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 18px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: var(--r-md);
          transition: border-color 0.3s, background 0.3s;
        }
        .cert-pill:hover { border-color: var(--mint); background: rgba(159,232,112,0.04); }
        .cert-icon {
          width: 40px; height: 40px; flex-shrink: 0;
          border-radius: 10px;
          background: rgba(159,232,112,0.1);
          color: var(--mint);
          display: grid; place-items: center;
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { About, Sustainability });