/* Sections — all the page chunks except hero (which lives in app.jsx) */
const { useState, useEffect, useRef } = React;

/* ==== reveal-on-scroll wrapper ==== */
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setVisible(true);io.disconnect();}});
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${visible ? 'in' : ''} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}>
      
      {children}
    </Tag>);

}

/* ============ NAV ============ */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="wrap">
        <div className="nav-inner">
          <div className="nav-left">
            <div className="wordmark wordmark-lg">
              <div className="wordmark-mark" />
              <span><span className="wordmark-dollar">$</span>LOOPG</span>
            </div>
          </div>
          <div className="nav-right">
            <button className="nav-cta">Earn $LoopG <span className="btn-arrow">→</span></button>
          </div>
        </div>
      </div>
    </nav>);

}

/* ============ PROBLEM ============ */
function ProblemSection() {
  const stats = [
  { num: '$23B', label: 'in unused US gift cards' },
  { num: '43%', label: 'of Americans hold at least one' },
  { num: '$244', label: 'average value per person' }];

  return (
    <section className="section problem" id="protocol">
      <div className="wrap-narrow">
        <Reveal><div className="eyebrow">The problem</div></Reveal>
        <Reveal delay={80}><h2 className="section-title">The largest dormant balance in your wallet.</h2></Reveal>
        <Reveal delay={160}>
          <figure className="problem-image">
            <img src="assets/problem-drawer.jpg" alt="Forgotten gift cards in a dimly lit drawer" loading="lazy" />
            <div className="problem-image-fade" aria-hidden="true" />
          </figure>
        </Reveal>
        <div className="problem-stats">
          {stats.map((s, i) =>
          <Reveal key={i} delay={120 + i * 100} className="stat">
              <div className="stat-num">{s.num}</div>
              <div className="stat-label" style={{ fontWeight: "400", fontSize: "17px" }}>{s.label}</div>
            </Reveal>
          )}
        </div>
        <Reveal delay={400} className="problem-tail" style={{ fontSize: '21px' }}>
          Existing buyers take <strong>8–30%</strong>. Most cards never get used. <strong>That value belongs to you.</strong>
        </Reveal>
      </div>
    </section>);

}

/* ============ SOLUTION ============ */
function SolutionSection() {
  return (
    <section className="section solution-section">
      <div className="wrap-narrow" style={{ textAlign: 'center' }}>
        <Reveal><div className="eyebrow">The solution</div></Reveal>
        <Reveal delay={80}><h2 className="section-title" style={{ margin: '24px auto 0' }}>Every brand. One protocol.</h2></Reveal>
        <Reveal delay={160}>
          <p className="section-sub" style={{ margin: '22px auto 0', maxWidth: 640, textAlign: 'center', fontSize: "21px" }}>
            Register cards from any major brand and earn $LOOPG. Keep your card. Get tokens. The protocol does the rest.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <figure className="solution-grid">
            <div className="solution-grid-inner">
              <img src="assets/solution-brands.png" alt="A grid of nine major retail and food brand gift card logos" loading="lazy" />
            </div>
          </figure>
        </Reveal>
        <Reveal delay={360}>
          <div className="solution-callout mono" style={{ fontSize: "17px" }}>
            300+ brands supported · Priority verification for Tier 1 retailers
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ============ HOW IT WORKS ============ */
function StepIcon({ kind }) {
  // Abstract geometric icons — not literal gift cards
  if (kind === 'register') return (
    <svg viewBox="0 0 56 56" width="56" height="56">
      <defs>
        <linearGradient id="ic1" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#AB9FF2" /><stop offset="100%" stopColor="#534BB1" />
        </linearGradient>
      </defs>
      <rect x="8" y="14" width="40" height="28" rx="6" fill="none" stroke="url(#ic1)" strokeWidth="1.4" />
      <circle cx="28" cy="28" r="3" fill="#AB9FF2" />
      <path d="M14 22h6M14 26h4M36 34h6" stroke="url(#ic1)" strokeWidth="1.2" strokeLinecap="round" />
    </svg>);

  if (kind === 'earn') return (
    <svg viewBox="0 0 56 56" width="56" height="56">
      <defs>
        <linearGradient id="ic2" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#AB9FF2" /><stop offset="100%" stopColor="#534BB1" />
        </linearGradient>
      </defs>
      <circle cx="28" cy="28" r="16" fill="none" stroke="url(#ic2)" strokeWidth="1.4" />
      <circle cx="28" cy="28" r="9" fill="none" stroke="url(#ic2)" strokeWidth="1.2" opacity="0.6" />
      <circle cx="28" cy="28" r="3" fill="#AB9FF2" />
      <path d="M28 8v6M28 42v6M8 28h6M42 28h6" stroke="url(#ic2)" strokeWidth="1.2" strokeLinecap="round" />
    </svg>);

  return (
    <svg viewBox="0 0 56 56" width="56" height="56">
      <defs>
        <linearGradient id="ic3" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#AB9FF2" /><stop offset="100%" stopColor="#534BB1" />
        </linearGradient>
      </defs>
      <path d="M16 12 L40 12 L40 44 L28 38 L16 44 Z" fill="none" stroke="url(#ic3)" strokeWidth="1.4" strokeLinejoin="round" />
      <path d="M22 24 L26 28 L34 20" fill="none" stroke="#AB9FF2" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* ===== HOW IT WORKS ANIMATED DEMO ===== */
function TypedText({ text, active, speed = 60 }) {
  const [shown, setShown] = useState('');
  useEffect(() => {
    if (!active) {setShown('');return;}
    setShown('');
    let i = 0;
    const t = setInterval(() => {
      i++;
      setShown(text.slice(0, i));
      if (i >= text.length) clearInterval(t);
    }, speed);
    return () => clearInterval(t);
  }, [text, active, speed]);
  return <span>{shown}<span className="typed-caret" style={{ opacity: active && shown.length < text.length ? 1 : 0 }}>|</span></span>;
}

function ScreenRegister({ active }) {
  const [success, setSuccess] = useState(false);
  useEffect(() => {
    if (!active) {setSuccess(false);return;}
    const t = setTimeout(() => setSuccess(true), 2200);
    return () => clearTimeout(t);
  }, [active]);
  return (
    <div className="demo-screen">
      <div className="demo-screen-eyebrow">Register card</div>
      <div className="demo-field">
        <div className="demo-field-label">Brand</div>
        <div className="demo-field-input">
          <img src="assets/logos/target.png" alt="" className="demo-brand-mark" />
          <span style={{ flex: 1 }}>Target</span>
          <span style={{ color: 'var(--text-dim)', fontSize: 11 }}>▾</span>
        </div>
      </div>
      <div className="demo-field">
        <div className="demo-field-label">Balance</div>
        <div className="demo-field-input mono">
          <span style={{ color: 'var(--text-muted)' }}>$</span>
          <TypedText text="87.42" active={active} speed={120} />
        </div>
      </div>
      <button className="demo-cta">Register your gift card →</button>
      <div className={`demo-success ${success ? 'in' : ''}`}>
        <div className="demo-check">
          <svg viewBox="0 0 12 12" width="10" height="10"><path d="M2 6 L5 9 L10 3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
        <div>
          <div className="demo-success-key">Provisional allocation</div>
          <div className="demo-success-val">8,742 $LOOPG</div>
        </div>
      </div>
    </div>);

}

function ScreenEarn({ active }) {
  const [bal, setBal] = useState(8742.00);
  useEffect(() => {
    if (!active) {setBal(8742.00);return;}
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const t = (now - start) / 1000;
      setBal(8742.00 + t * 0.85);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active]);
  const whole = Math.floor(bal).toLocaleString();
  const frac = (bal % 1).toFixed(2).slice(2);
  return (
    <div className="demo-screen">
      <div className="demo-screen-eyebrow">$LOOPG balance</div>
      <div className="demo-balance">
        <span className="demo-balance-num">{whole}</span>
        <span className="demo-balance-unit">.{frac}</span>
        <span className="demo-balance-sym">$LOOPG</span>
      </div>
      <div className="demo-delta">+24.50 today</div>
      <div className="demo-status-pill verified">
        <span className="demo-status-dot" />
        Verified
      </div>
      <div className="demo-unlock">
        <div className="demo-unlock-row">
          <span>Unlocking</span>
          <span className="mono">30%</span>
        </div>
        <div className="demo-unlock-bar">
          <div style={{ width: '30%' }} />
        </div>
      </div>
    </div>);

}

function ScreenKeep({ active }) {
  return (
    <div className="demo-screen">
      <div className="demo-screen-eyebrow">Your card</div>
      <div className="demo-card demo-card-keep">
        <div className="demo-card-target-corner" />
        <div className="demo-card-shine" />
        <div className="demo-card-num mono">•••• •••• •••• 4287</div>
        <div className="demo-card-foot">
          <div>
            <div className="demo-card-key">Balance</div>
            <div className="demo-card-val mono">$87.42</div>
          </div>
          <div className="demo-card-brand">
            <img src="assets/logos/target.png" alt="" />
          </div>
        </div>
      </div>
      <div className="demo-keep-badge">
        <div className="demo-check">
          <svg viewBox="0 0 12 12" width="10" height="10"><path d="M2 6 L5 9 L10 3" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
        <span className="mono">STILL YOURS</span>
      </div>
      <div className="demo-keep-tail">Spend it whenever — at face value.</div>
      <div className="demo-keep-meta mono">BALANCE: $87.42 · STATUS: ACTIVE</div>
    </div>);

}

function HowItWorksDemo({ activeStep }) {
  return (
    <div className="demo-stage">
      <div className={`demo-device demo-device-pos-${activeStep}`}>
        <div className="demo-device-notch" />
        <div className="demo-device-inner">
          <div className="demo-statusbar">
            <span className="mono">9:41</span>
            <div className="demo-statusbar-right">
              <span className="demo-bars" />
              <span className="demo-wifi" />
              <span className="demo-batt" />
            </div>
          </div>
          <div className="demo-app-head">
            <div className="demo-app-mark"><span style={{ transform: 'translateY(-1px)', letterSpacing: '-0.05em' }}>ꝏ</span></div>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>LoopG</span>
          </div>
          <div className="demo-screen-stack">
            <div className="demo-screen-wrap on">
              <ScreenRegister active={true} />
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function HiwArrows({ activeStep }) {
  // Three curved paths converging toward the top of the phone (x=600, y=150 in viewBox).
  // Step centers: 200 (left), 600 (mid), 1000 (right).
  const paths = [
  'M 200,4 C 200,70 360,116 600,150',
  'M 600,4 L 600,150',
  'M 1000,4 C 1000,70 840,116 600,150'];

  return (
    <div className="hiw-arrows-zone" aria-hidden="true">
      <svg viewBox="0 0 1200 160" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: 160, overflow: 'visible' }}>
        <defs>
          <marker id="hiw-arrowhead" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto">
            <path d="M 0 0 L 9 5 L 0 10 L 2 5 z" fill="currentColor" />
          </marker>
          <filter id="hiw-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="2.5" />
          </filter>
        </defs>
        {paths.map((d, i) => {
          const isActive = activeStep === i;
          return (
            <g key={i} className={`hiw-arrow-group ${isActive ? 'active' : ''}`}>
              {/* Glow underlay (active only) */}
              {isActive &&
              <path d={d} stroke="#AB9FF2" strokeWidth="3" fill="none" opacity="0.45" filter="url(#hiw-glow)" />
              }
              {/* Main arrow line */}
              <path
                d={d}
                stroke={isActive ? '#AB9FF2' : '#534BB1'}
                strokeWidth={isActive ? 1.4 : 1}
                fill="none"
                opacity={isActive ? 1 : 0.32}
                strokeDasharray={isActive ? 'none' : '3 4'}
                markerEnd="url(#hiw-arrowhead)"
                style={{ color: isActive ? '#AB9FF2' : '#534BB1', transition: 'opacity .5s ease, stroke .5s ease' }} />
              
              {/* Animated signal dot */}
              {isActive &&
              <g>
                  <circle r="3.5" fill="#fff" opacity="0.25" filter="url(#hiw-glow)">
                    <animateMotion dur="2.2s" repeatCount="indefinite" path={d} />
                  </circle>
                  <circle r="2.2" fill="#FFFFFF">
                    <animateMotion dur="2.2s" repeatCount="indefinite" path={d} />
                  </circle>
                </g>
              }
            </g>);

        })}
      </svg>
    </div>);

}

function HowItWorks() {
  const steps = [
  { num: '01', icon: 'register', title: 'Register', copy: 'Submit card details. We log the value on-chain. Provisional allocation begins immediately.', meta: 'FACE VALUE · UNCHANGED · YOURS FOREVER' },
  { num: '02', icon: 'earn', title: 'Earn $LOOPG', copy: 'Get tokens proportional to what you registered. Verification tier sets the unlock pace.', meta: 'ON-CHAIN · INSTANT · NO CARD HANDOVER' },
  { num: '03', icon: 'keep', title: 'Keep your card', copy: 'It stays yours. Spend it whenever — at face value, on whatever you actually want.', meta: 'RAYDIUM · SOLANA SPL · 9 DECIMALS' }];

  const screens = [ScreenRegister, ScreenEarn, ScreenKeep];
  const [activeStep, setActiveStep] = useState(0);
  const sectionRef = useRef(null);

  useEffect(() => {
    let inView = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {inView = e.isIntersecting;});
    }, { threshold: 0.2 });
    if (sectionRef.current) io.observe(sectionRef.current);
    const t = setInterval(() => {
      if (inView) setActiveStep((s) => (s + 1) % 3);
    }, 4000);
    return () => {clearInterval(t);io.disconnect();};
  }, []);

  return (
    <section className="section" ref={sectionRef}>
      <div className="wrap">
        <Reveal><div className="eyebrow">How it works</div></Reveal>
        <Reveal delay={80}><h2 className="section-title" style={{ maxWidth: 720 }}>Three steps. No surrendered cards.</h2></Reveal>

        <div className="steps">
          {steps.map((s, i) =>
          <Reveal key={i} delay={120 + i * 100}>
              <div
              className={`step ${activeStep === i ? 'active' : ''}`}
              onClick={() => setActiveStep(i)}
              onMouseEnter={() => setActiveStep(i)}
              style={{ cursor: 'pointer' }}>
              
                <div className="step-num">{s.num}</div>
                <div className="step-icon"><StepIcon kind={s.icon} /></div>
                <div className="step-title">{s.title}</div>
                <div className="step-copy">{s.copy}</div>
                <div className="step-meta" style={{ fontSize: "14px" }}>{s.meta}</div>
              </div>
            </Reveal>
          )}
        </div>

        <Reveal delay={400}>
          <div className="demo-stage">
            <div className="demo-device">
              <div className="demo-device-notch" />
              <div className="demo-device-inner">
                <div className="demo-statusbar">
                  <span className="mono">9:41</span>
                  <div className="demo-statusbar-right">
                    <span className="demo-bars" />
                    <span className="demo-wifi" />
                    <span className="demo-batt" />
                  </div>
                </div>
                <div className="demo-app-head">
                  <div className="demo-app-mark"><span style={{ transform: 'translateY(-1px)', letterSpacing: '-0.05em' }}>ꝏ</span></div>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>LoopG</span>
                </div>
                <div className="demo-screen-stack">
                  {screens.map((Screen, i) =>
                  <div key={i} className={`demo-screen-wrap ${activeStep === i ? 'on' : ''}`}>
                      <Screen active={activeStep === i} />
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ============ FACTION WARS ============ */
const BRAND_LOGOS = {
  'Target': 'assets/logos/target.png',
  'Walmart': 'assets/logos/walmart.png',
  'Home Depot': 'assets/logos/homedepot.png',
  'Starbucks': 'assets/logos/starbucks.png',
  'Apple': 'assets/logos/apple.png',
  'DoorDash': 'assets/logos/doordash.png'
};

function BrandLogo({ name }) {
  const src = BRAND_LOGOS[name];
  if (!src) {
    return (
      <div className="faction-logo" aria-hidden="true">
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 600 }}>{name[0]}</span>
      </div>);

  }
  return (
    <div className="faction-logo brand" aria-hidden="true">
      <img src={src} alt="" />
    </div>);

}

function FactionWars() {
  const initial = [
  { name: 'Target', val: 1247392 },
  { name: 'Walmart', val: 983104 },
  { name: 'Home Depot', val: 742856 },
  { name: 'Starbucks', val: 621003 },
  { name: 'Apple', val: 418772 },
  { name: 'DoorDash', val: 287440 }];

  const max = initial[0].val;
  const [values, setValues] = useState(initial.map((b) => ({ ...b, animated: 0 })));
  const ref = useRef(null);
  const startedRef = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          // animate bars
          requestAnimationFrame(() => {
            setValues(initial.map((b) => ({ ...b, animated: b.val })));
          });
        }
      });
    }, { threshold: 0.2 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Live tick: random small bumps to make it feel live
  useEffect(() => {
    if (!startedRef.current) return;
    const t = setInterval(() => {
      setValues((prev) => prev.map((b) => ({
        ...b,
        val: b.val + Math.floor(Math.random() * 80)
      })));
    }, 2200);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="section" ref={ref}>
      <div className="wrap">
        <div className="faction-head">
          <div>
            <Reveal><div className="eyebrow">Faction wars</div></Reveal>
            <Reveal delay={80}><h2 className="section-title">Brands ranked by trapped value.</h2></Reveal>
          </div>
          <Reveal delay={140}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              <span className="live-dot" /> Live · updated {new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} className="faction-board">
          {values.map((b, i) => {
            const pct = Math.min(100, b.animated / max * 100);
            return (
              <div className="faction-row" key={b.name}>
                <div className="faction-rank">{String(i + 1).padStart(2, '0')}</div>
                <div className="faction-mid">
                  <BrandLogo name={b.name} />
                  <div className="faction-name">{b.name}</div>
                  <div className="faction-bar-wrap">
                    <div className="faction-bar" style={{ width: `${pct}%`, transitionDelay: `${i * 90}ms` }} />
                  </div>
                </div>
                <div className="faction-value">${b.val.toLocaleString()}</div>
              </div>);

          })}
        </Reveal>

        <Reveal delay={300} className="faction-tail" style={{ textAlign: 'center' }}>
          <strong style={{ fontSize: "17px" }}>Help your brand win the Genesis Window.</strong> &nbsp;<span style={{ fontSize: "17px" }}>Priority Brands unlock fastest.</span>
        </Reveal>
      </div>
    </section>);

}

/* ============ TOKEN ============ */
function useInViewOnce(ref, threshold = 0.3) {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [seen]);
  return seen;
}

function AnimatedNumber({ to, suffix = '', duration = 1800, start }) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!start) { setVal(0); return; }
    const t0 = performance.now();
    let raf;
    const ease = (t) => 1 - Math.pow(1 - t, 4);
    const tick = (now) => {
      const t = Math.min(1, (now - t0) / duration);
      setVal(to * ease(t));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [start, to, duration]);
  // format: show with one decimal under 10, else integer with commas
  const fmt = to >= 1000 ? Math.round(val).toLocaleString() :
              to >= 10   ? Math.round(val).toString() :
              val.toFixed(1);
  return <span>{fmt}{suffix}</span>;
}

function Donut() {
  const segments = [
    { name: 'Claimant Pool', pct: 60, color: '#FF0080' },
    { name: 'Team',          pct: 15, color: '#9333EA' },
    { name: 'Treasury',      pct: 10, color: '#534BB1' },
    { name: 'Growth',        pct: 10, color: '#AB9FF2' },
    { name: 'DEX Float',     pct:  5, color: '#3B0764' },
  ];
  const r = 86, c = 2 * Math.PI * r;
  const ref = useRef(null);
  const seen = useInViewOnce(ref, 0.35);
  const [hover, setHover] = useState(-1);

  // pre-compute starts in % so we can stagger animation per segment
  const starts = [];
  let acc = 0;
  segments.forEach((s) => { starts.push(acc); acc += s.pct; });

  return (
    <div ref={ref}>
      <div className="donut-wrap">
        <svg viewBox="0 0 220 220" style={{ overflow: 'visible' }}>
          <defs>
            <filter id="donutGlow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="4" />
            </filter>
          </defs>
          <circle cx="110" cy="110" r={r} fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="22" />
          {segments.map((s, i) => {
            const fullDash = (s.pct / 100) * c;
            const startFrac = starts[i] / 100;
            const segDelay = i * 220; // ms
            const isHover = hover === i;
            const isDim = hover !== -1 && !isHover;
            return (
              <g key={s.name}
                 onMouseEnter={() => setHover(i)}
                 onMouseLeave={() => setHover(-1)}
                 style={{ cursor: 'pointer' }}>
                {/* Glow under hover */}
                {isHover && (
                  <circle
                    cx="110" cy="110" r={r}
                    fill="none" stroke={s.color} strokeWidth="22"
                    strokeDasharray={`${fullDash} ${c - fullDash}`}
                    strokeDashoffset={c - (startFrac * c)}
                    transform="rotate(-90 110 110)"
                    opacity="0.55"
                    filter="url(#donutGlow)"
                  />
                )}
                <circle
                  cx="110" cy="110" r={r}
                  fill="none" stroke={s.color}
                  strokeWidth={isHover ? 26 : 22}
                  strokeDasharray={`${seen ? fullDash : 0} ${c}`}
                  strokeDashoffset={c - (startFrac * c)}
                  transform="rotate(-90 110 110)"
                  opacity={isDim ? 0.35 : 1}
                  style={{
                    transition: `stroke-dasharray 1100ms cubic-bezier(0.22, 1, 0.36, 1) ${segDelay}ms, opacity 300ms ease, stroke-width 250ms ease`,
                  }}
                />
              </g>
            );
          })}
        </svg>
        <div className="donut-center">
          <div className="donut-center-num">
            <AnimatedNumber to={hover >= 0 ? segments[hover].pct : 10} suffix={hover >= 0 ? '%' : 'B'} start={seen} duration={hover >= 0 ? 400 : 1800} />
          </div>
          <div className="donut-center-label">
            {hover >= 0 ? segments[hover].name : '$LOOPG · Fixed'}
          </div>
        </div>
      </div>
      <div className="donut-legend">
        {segments.map((s, i) => (
          <div className={`legend-row ${hover === i ? 'on' : ''} ${hover !== -1 && hover !== i ? 'dim' : ''}`}
               key={s.name}
               onMouseEnter={() => setHover(i)}
               onMouseLeave={() => setHover(-1)}>
            <span className="legend-dot" style={{ background: s.color, boxShadow: hover === i ? `0 0 16px ${s.color}` : 'none' }} />
            <span className="legend-name">{s.name}</span>
            <span className="legend-pct">
              <AnimatedNumber to={s.pct} suffix="%" start={seen} duration={1100 + i * 180} />
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function TokenSection() {
  return (
    <section className="section" id="token">
      <div className="wrap">
        <div className="token">
          <Reveal className="token-copy">
            <div className="eyebrow">$LOOPG token</div>
            <h2 className="section-title">Utility, not speculation.</h2>
            <p className="section-sub">
              $LOOPG is the protocol's coordination layer. Holders get queue priority, governance votes,
              referral rewards, and access to staking. Solana SPL. Fixed supply, no inflation.
            </p>
            <div className="token-meta">
              <div className="token-meta-cell">
                <div className="token-meta-key">Chain</div>
                <div className="token-meta-val">Solana SPL</div>
              </div>
              <div className="token-meta-cell">
                <div className="token-meta-key">Supply</div>
                <div className="token-meta-val">10,000,000,000</div>
              </div>
              <div className="token-meta-cell">
                <div className="token-meta-key">Inflation</div>
                <div className="token-meta-val">None · fixed</div>
              </div>
              <div className="token-meta-cell">
                <div className="token-meta-key">Listing</div>
                <div className="token-meta-val">Raydium · Genesis</div>
              </div>
            </div>
            <a className="token-link" href="#">See launch economics <span className="btn-arrow">→</span></a>
          </Reveal>
          <Reveal delay={120}>
            <Donut />
          </Reveal>
        </div>
      </div>
    </section>);

}

/* ============ LOOPCHAIN ============ */
function LoopChainSection() {
  return (
    <section className="section loopchain-section">
      <div className="loopchain-bg" aria-hidden="true">
        <img src="assets/loopchain-cards.png" alt="" loading="lazy" />
        <div className="loopchain-bg-overlay" />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="loopchain">
          <Reveal><div className="eyebrow">Built on LoopChain</div></Reveal>
          <Reveal delay={80}>
            <div className="loopchain-card">
              <h2 className="section-title" style={{ maxWidth: 720, margin: '0 auto' }}>
                Settlement infrastructure for atomic value transfer.
              </h2>
              <p className="section-sub" style={{ margin: '22px auto 0', textAlign: 'left', fontSize: "21px" }}>
                LoopG runs on LoopChain — Solana settlement infrastructure delivering instant atomic value transfer at
                <strong style={{ color: 'white', fontWeight: 500, fontSize: "21px" }}> 96.8% lower cost</strong> than legacy systems.
              </p>
              <div className="loopchain-stats">
                <div className="loopchain-stat">
                  <div className="loopchain-stat-num" style={{ fontFamily: 'var(--font-mono)' }}>2.8s</div>
                  <div className="loopchain-stat-label">Settlement time</div>
                </div>
                <div className="loopchain-stat">
                  <div className="loopchain-stat-num" style={{ fontFamily: 'var(--font-mono)' }}>0.08%</div>
                  <div className="loopchain-stat-label">Protocol fee</div>
                </div>
                <div className="loopchain-stat">
                  <div className="loopchain-stat-num" style={{ fontFamily: 'var(--font-mono)' }}>SOL</div>
                  <div className="loopchain-stat-label">Mainnet · live</div>
                </div>
              </div>
              <a className="loopchain-link" href="https://loopchain.io" target="_blank" rel="noreferrer">Explore LoopChain <span className="btn-arrow">→</span></a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

/* ============ VERIFICATION ============ */
function VerifyIcon({ kind }) {
  const s = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'shield') return (
    <svg viewBox="0 0 20 20" width="18" height="18">
      <path d="M10 2.5 L16 4.2 V10 c0 3.6-2.6 6.3-6 7.3 -3.4-1-6-3.7-6-7.3 V4.2 Z" {...s} />
      <path d="M7 10 L9.2 12.2 L13.2 8.2" {...s} />
    </svg>
  );
  if (kind === 'lock') return (
    <svg viewBox="0 0 20 20" width="18" height="18">
      <rect x="4" y="9" width="12" height="8" rx="1.5" {...s} />
      <path d="M6.5 9 V6.5 a3.5 3.5 0 0 1 7 0 V9" {...s} />
      <circle cx="10" cy="13" r="0.9" fill="currentColor" />
    </svg>
  );
  if (kind === 'clock') return (
    <svg viewBox="0 0 20 20" width="18" height="18">
      <circle cx="10" cy="10" r="7" {...s} />
      <path d="M10 6 V10 L13 12" {...s} />
    </svg>
  );
  // globe
  return (
    <svg viewBox="0 0 20 20" width="18" height="18">
      <circle cx="10" cy="10" r="7" {...s} />
      <ellipse cx="10" cy="10" rx="3" ry="7" {...s} />
      <path d="M3 10 H17" {...s} />
    </svg>
  );
}

function VerificationSection() {
  const tiers = [
  { tag: 'Tier 0', name: 'Registered', copy: 'Card details submitted. Provisional allocation. Counts in the global counter.', mark: 't0', meter: 33 },
  { tag: 'Tier 1', name: 'Soft Verified', copy: 'Video proof submitted. Sybil-resistance layer activated. Faster unlocks.', mark: 't1', meter: 66 },
  { tag: 'Tier 2', name: 'Hard Verified', copy: 'Protocol verifies card balance directly. Full unlock pace. Top of the queue.', mark: 't2', meter: 100 }];

  return (
    <section className="section">
      <div className="wrap">
        <Reveal><div className="eyebrow">Verification protocol</div></Reveal>
        <Reveal delay={80}><h2 className="section-title" style={{ maxWidth: 720 }}>Three tiers. Honest allocations.</h2></Reveal>
        <Reveal delay={140}>
          <div className="verify-principles">
            {[
              { kind: 'shield', tone: 'green', t1: 'Sybil-resistant', t2: 'verification' },
              { kind: 'lock',   tone: 'brand', t1: 'Privacy-first',   t2: 'by design' },
              { kind: 'clock',  tone: 'brand', t1: 'Fair queue',      t2: 'execution' },
              { kind: 'globe',  tone: 'brand', t1: 'Global counter.', t2: 'Transparent pace.' },
            ].map((p, i) => (
              <div key={i} className={`verify-principle tone-${p.tone}`}>
                <div className="vp-icon"><VerifyIcon kind={p.kind} /></div>
                <div className="vp-text">
                  <span>{p.t1}</span>
                  <span>{p.t2}</span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
        <div className="tiers">
          {tiers.map((t, i) =>
          <Reveal key={t.tag} delay={120 + i * 100}>
              <div className="tier">
                <div className={`tier-mark ${t.mark}`}>{i}</div>
                <div className="tier-tag">{t.tag}</div>
                <div className="tier-name">{t.name}</div>
                <div className="tier-copy" style={{ fontSize: "18px" }}>{t.copy}</div>
                <div className="tier-meter"><div style={{ width: `${t.meter}%` }} /></div>
              </div>
            </Reveal>
          )}
        </div>
        <Reveal delay={420} className="brand-tier-note">
          <div className="brand-tier-note-key" style={{ fontSize: "17px" }}>Brand tiers</div>
          <div className="brand-tier-note-copy" style={{ fontSize: "17px" }}>
            Cards from <strong style={{ color: 'white', fontWeight: 500 }}>Priority Brands</strong> (top retailers, large balances)
            unlock first. Standard Queue cards unlock as protocol throughput allows. Both earn $LOOPG — pace differs.
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ============ STAKE ============ */
function StakeQueueViz() {
  return (
    <svg viewBox="0 0 480 360" style={{ width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="qg" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#AB9FF2" /><stop offset="100%" stopColor="#534BB1" />
        </linearGradient>
      </defs>
      {/* Queue lanes */}
      {[80, 140, 200, 260].map((y, i) =>
      <line key={i} x1="40" y1={y} x2="440" y2={y} stroke="rgba(255,255,255,0.06)" strokeDasharray="2 4" />
      )}
      {/* Standard claims (gray) drifting slowly */}
      {[
      { y: 80, x: 60, w: 50 }, { y: 80, x: 130, w: 50 }, { y: 80, x: 200, w: 50 },
      { y: 200, x: 100, w: 50 }, { y: 200, x: 170, w: 50 }, { y: 200, x: 240, w: 50 }, { y: 200, x: 310, w: 50 },
      { y: 260, x: 80, w: 50 }, { y: 260, x: 150, w: 50 }, { y: 260, x: 220, w: 50 }, { y: 260, x: 290, w: 50 }].
      map((c, i) =>
      <rect key={`s-${i}`} x={c.x} y={c.y - 8} width={c.w} height="16" rx="3" fill="rgba(255,255,255,0.08)" />
      )}
      {/* Staked claims jumping ahead with glow */}
      <g style={{ animation: 'stakedPulse 3.6s ease-in-out infinite' }}>
        <rect x="320" y="132" width="80" height="16" rx="4" fill="url(#qg)" filter="url(#stakeGlow)" />
        <rect x="380" y="72" width="60" height="16" rx="4" fill="url(#qg)" />
      </g>
      <filter id="stakeGlow"><feGaussianBlur stdDeviation="3" /></filter>

      {/* Genesis line */}
      <line x1="430" y1="40" x2="430" y2="300" stroke="#AB9FF2" strokeDasharray="3 3" strokeWidth="1" opacity="0.5" />
      <text x="430" y="32" fill="#AB9FF2" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2" textAnchor="end" style={{ textTransform: 'uppercase' }}>Genesis →</text>

      {/* Labels */}
      <text x="40" y="60" fill="rgba(255,255,255,0.5)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2" style={{ textTransform: 'uppercase' }}>Tier 2</text>
      <text x="40" y="120" fill="rgba(255,255,255,0.35)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2" style={{ textTransform: 'uppercase' }}>Tier 1 + Stake</text>
      <text x="40" y="180" fill="rgba(255,255,255,0.5)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2" style={{ textTransform: 'uppercase' }}>Tier 1</text>
      <text x="40" y="240" fill="rgba(255,255,255,0.35)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2" style={{ textTransform: 'uppercase' }}>Tier 0</text>

      <style>{`
        @keyframes stakedPulse {
          0%, 100% { transform: translateX(0); filter: brightness(1); }
          50% { transform: translateX(20px); filter: brightness(1.2); }
        }
      `}</style>
    </svg>);

}

function StakeSection() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="stake">
          <Reveal>
            <div className="pill">
              <span style={{ width: 6, height: 6, borderRadius: 3, background: 'currentColor', display: 'inline-block' }} />
              Coming soon · Phase 2
            </div>
            <h2 className="section-title">Stake-to-Accelerate.</h2>
            <p className="section-sub" style={{ fontSize: "21px" }}>
              Stake $LOOPG to push specific claims to the front of the verification queue.
              Day-one utility for token holders. Position scales with stake size and duration.
            </p>
          </Reveal>
          <Reveal delay={140}>
            <div className="queue-viz">
              <StakeQueueViz />
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

/* ============ ROADMAP ============ */
function RoadmapSection() {
  const phases = [
  {
    num: 'Phase 1', when: 'Live now', status: 'live', title: 'Registry & Genesis',
    items: ['Portal & onboarding', 'Claims registry', 'Genesis Window allocations', '$LOOPG launch on Raydium']
  },
  {
    num: 'Phase 2', when: 'Q3 2026', status: 'next', title: 'Verification scale',
    items: ['Account abstraction (no seed phrase)', 'Video verification (Tier 1)', 'Stake-to-Accelerate', 'Auto-scrape balance verification']
  },
  {
    num: 'Phase 3', when: 'Beyond', status: 'future', title: 'Network effects',
    items: ['Mobile app', 'Processor partnerships', 'Deep LoopChain settlement integration', 'Cross-protocol RWA bridges']
  }];

  return (
    <section className="section">
      <div className="wrap">
        <Reveal><div className="eyebrow">Roadmap</div></Reveal>
        <Reveal delay={80}><h2 className="section-title" style={{ maxWidth: 720 }}>Three phases. Shipping in public.</h2></Reveal>
        <div className="phases">
          {phases.map((p, i) =>
          <Reveal key={p.num} delay={120 + i * 100}>
              <div className={`phase ${p.status === 'live' ? 'live' : ''}`}>
                <div className="phase-head" style={{ fontWeight: "500" }}>
                  <div className="phase-num">{p.num} · {p.when}</div>
                  <div className={`phase-status ${p.status}`}>
                    {p.status === 'live' && <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 3, background: 'currentColor', marginRight: 8 }} />}
                    {p.status === 'live' ? 'Live' : p.status === 'next' ? 'Next' : 'Future'}
                  </div>
                </div>
                <div className="phase-title">{p.title}</div>
                <ul className="phase-list">
                  {p.items.map((it) => <li key={it}>{it}</li>)}
                </ul>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ FAQ ============ */
function FAQ() {
  const items = [
  { q: 'Do I lose my card?', a: "No. You keep it. We just log its trapped value on-chain. The card never leaves your wallet — physical or digital." },
  { q: 'Do I get cash?', a: "No. You get $LOOPG tokens. This is a registry, not a redemption service. We're not a gift card buyer." },
  { q: 'When do tokens unlock?', a: "Per protocol schedule. Verification tier (0/1/2) and brand tier (Priority/Standard) determine pace. Higher tier = faster unlock." },
  { q: 'Is $LOOPG a security?', a: "No. It's a utility token providing queue priority, governance voting, fee abatement, and referral rewards. Holders use it to interact with the protocol." },
  { q: 'What if I spend my card before unlocks complete?', a: "Future unlocks pause. Past unlocks remain yours. If you spend down before full unlock, the remaining schedule simply ends." },
  { q: 'How do you verify balances?', a: "Three tiers: self-attestation (provisional), video proof (sybil-resistant), and protocol-side balance scrape (ground truth). Priority Brands run first — they have programmatic balance APIs." }];

  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="docs">
      <div className="wrap-narrow">
        <Reveal><div className="eyebrow">FAQ</div></Reveal>
        <Reveal delay={80}><h2 className="section-title">Questions, answered honestly.</h2></Reveal>
        <Reveal delay={140} className="faq-list">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item ${isOpen ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq-icon" />
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? 240 : 0 }}>
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>);

          })}
        </Reveal>
      </div>
    </section>);

}

/* ============ GENESIS CTA ============ */
function GenesisCTA() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const onSubmit = (e) => {e.preventDefault();if (email.includes('@')) setSubmitted(true);};
  return (
    <section className="genesis">
      <div className="genesis-bg" aria-hidden="true">
        <img src="assets/genesis-energy.png" alt="" loading="lazy" />
        <div className="genesis-vignette" />
      </div>
      <div className="genesis-glow" />
      <div className="wrap-narrow genesis-inner">
        <Reveal>
          <div className="genesis-wordmark-wrap">
            <div className="wordmark wordmark-xl">
              <div className="wordmark-mark" />
              <span><span className="wordmark-dollar">$</span>LOOPG</span>
            </div>
          </div>
        </Reveal>
        <Reveal><div className="eyebrow">Genesis Window</div></Reveal>
        <Reveal delay={80}>
          <h2 className="genesis-title">
            Genesis Window is <span style={{ background: 'linear-gradient(120deg, #fff 0%, #FF0080 60%, #9333EA 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>open</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p className="genesis-sub">
            The first <span style={{ color: 'white', fontFamily: 'var(--font-mono)' }}>$5M</span> registered earns a
            <span style={{ color: 'white' }}> 2× allocation multiplier.</span>
          </p>
        </Reveal>
        <Reveal delay={220}>
          {submitted ?
          <div style={{ marginTop: 44, padding: '20px 28px', display: 'inline-flex', gap: 12, alignItems: 'center', borderRadius: 999, background: 'rgba(16,185,129,0.06)', border: '1px solid rgba(16,185,129,0.25)', color: 'var(--live)', fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.06em' }}>
              <span className="live-dot" /> Reserved · check your inbox
            </div> :

          <form className="email-form email-form-lg" onSubmit={onSubmit}>
              <input
              type="email"
              placeholder="you@protocol.xyz"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              aria-label="Email" />
            
              <button type="submit" className="btn btn-secondary btn-lg">Reserve my spot <span className="btn-arrow">→</span></button>
            </form>
          }
        </Reveal>
        <Reveal delay={300}>
          <p className="genesis-fine">You'll be notified when registration opens. No spam.</p>
        </Reveal>
      </div>
    </section>);

}

/* ============ FOOTER ============ */
function SocialIcon({ kind }) {
  if (kind === 'x') return (
    <svg viewBox="0 0 16 16" width="14" height="14"><path d="M9.5 7 14.5 1.5h-1.4l-4.4 4.7L5 1.5H1l5.3 7.1-5.3 5.9h1.4l4.6-4.9 3.7 4.9h4l-5.5-7.4Zm-1.6 1.7-.5-.7-4.3-5.6h1.5l3.4 4.5.5.7 4.5 5.9h-1.5l-3.6-4.8Z" fill="currentColor" /></svg>);

  if (kind === 'discord') return (
    <svg viewBox="0 0 16 16" width="14" height="14"><path d="M13.6 3.2A12 12 0 0 0 10.6 2.3l-.1.3c-1.6-.3-3.2-.3-4.7 0l-.1-.3c-1 .2-2 .5-2.9.9C0.5 6.5-.1 9.6.2 12.7c1.2.9 2.3 1.4 3.4 1.7L4.2 13c-.4-.2-.8-.3-1.2-.6l.3-.2c2.4 1.1 5 1.1 7.4 0l.3.2c-.4.2-.8.4-1.2.6l.6 1.4c1.1-.3 2.2-.8 3.4-1.7.4-3.6-.5-6.7-2.2-9.5ZM5.4 10.7c-.7 0-1.3-.7-1.3-1.5 0-.8.6-1.5 1.3-1.5s1.3.7 1.3 1.5c0 .8-.6 1.5-1.3 1.5Zm5.2 0c-.7 0-1.3-.7-1.3-1.5 0-.8.6-1.5 1.3-1.5s1.3.7 1.3 1.5c0 .8-.5 1.5-1.3 1.5Z" fill="currentColor" /></svg>);

  return (
    <svg viewBox="0 0 16 16" width="14" height="14"><path d="M14.7 2.5 12.5 13c-.2.7-.6.9-1.2.6L8 11.4l-1.6 1.5c-.2.2-.3.3-.6.3l.2-2.7 4.9-4.4c.2-.2 0-.3-.3-.1L4.5 9.7 1.9 8.9c-.6-.2-.6-.6.1-.9l11.7-4.5c.5-.2 1 .1.9.9Z" fill="currentColor" /></svg>);

}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="wordmark wordmark-2xl">
              <div className="wordmark-mark" />
              <span><span className="wordmark-dollar">$</span>LOOPG</span>
            </div>
            <p className="footer-tagline">A Real World Asset registry on Solana. Turn frozen card balances into a stake in the protocol.</p>
            <div className="social-row">
              <a className="social-btn" href="#" aria-label="X"><SocialIcon kind="x" /></a>
              <a className="social-btn" href="#" aria-label="Discord"><SocialIcon kind="discord" /></a>
              <a className="social-btn" href="#" aria-label="Telegram"><SocialIcon kind="tg" /></a>
            </div>
          </div>
          <div>
            <div className="footer-col-title">Protocol</div>
            <a className="footer-link" href="#">Docs</a>
            <a className="footer-link" href="#">Whitepaper</a>
            <a className="footer-link" href="#">Audit</a>
            <a className="footer-link" href="#">Roadmap</a>
          </div>
          <div>
            <div className="footer-col-title">Token</div>
            <a className="footer-link" href="#">Tokenomics</a>
            <a className="footer-link" href="#">Launch sim</a>
            <a className="footer-link" href="#">Raydium pool</a>
            <a className="footer-link" href="#">Governance</a>
          </div>
          <div>
            <div className="footer-col-title">Legal</div>
            <a className="footer-link" href="#">Terms</a>
            <a className="footer-link" href="#">Privacy</a>
            <a className="footer-link" href="#">Disclaimers</a>
            <a className="footer-link" href="#">Contact</a>
          </div>
        </div>
        <div className="footer-wallet">
          <div className="footer-wallet-copy">Already a holder?</div>
          <button className="btn btn-secondary">Connect Wallet <span className="btn-arrow">→</span></button>
        </div>
        <div className="footer-bottom">
          <span style={{ maxWidth: 640 }}>
            $LOOPG is a utility token. Provisional allocations subject to verification. LoopG is a registry, not a redemption service. Participants retain ownership of physical cards.
          </span>
          <span>© 2026 LoopG · Built on LoopChain</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Nav, ProblemSection, SolutionSection, HowItWorks, FactionWars,
  TokenSection, LoopChainSection, VerificationSection,
  StakeSection, RoadmapSection, FAQ, GenesisCTA, Footer, Reveal
});