/* Main app — Absolo Cloud marketing homepage */
const { useState, useEffect, useRef } = React;

// ---------- Tweakable defaults ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "Deploy anything",
  "doodles": false,
  "grain": true,
  "animatedMesh": true
}/*EDITMODE-END*/;

// ---------- Theme ----------
function useTheme() {
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem("absolo-theme") || "dark"; } catch { return "dark"; }
  });
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("absolo-theme", theme); } catch {}
  }, [theme]);
  return [theme, () => setTheme(t => t === "dark" ? "light" : "dark")];
}

// ---------- Reveal ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---------- Logo wordmark ----------
function Logo({ size }) {
  return (
    <a href="index.html" className={`logo ${size === "lg" ? "logo--lg" : ""}`}>
      <span className="logo__a">ABSOL</span><span className="logo__o-final">O</span>
    </a>
  );
}

// ---------- Theme Toggle ----------
function ThemeToggle({ theme, onToggle }) {
  return (
    <button className="theme-toggle" onClick={onToggle} aria-label="Toggle theme">
      <svg className="sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="4"/>
        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
      </svg>
      <svg className="moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
      </svg>
    </button>
  );
}

// ---------- NAV DROPDOWN ----------
function NavDropdown({ label, items, footer, align }) {
  const [open, setOpen] = useState(false);
  const closeTimer = useRef(null);

  const handleEnter = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    setOpen(true);
  };
  const handleLeave = () => {
    closeTimer.current = setTimeout(() => setOpen(false), 120);
  };

  return (
    <div className={`navdd ${align === "right" ? "navdd--right" : ""}`} onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
      <button className="nav__link" data-open={open}>
        {label} <span className="chev">▼</span>
      </button>
      <div className={`navdd__panel ${open ? "open" : ""}`}>
        <div className="navdd__list">
          {items.map((it, i) => (
            <a
              key={i}
              href={it.href || "#"}
              className="navdd__item"
              style={{"--icon-color": it.color}}
            >
              <div className="navdd__item-thumb">{it.thumb}</div>
              <div className="navdd__item-body">
                <div className="navdd__item-name">
                  <span className="navdd__item-icon">{it.icon}</span>
                  {it.name}
                </div>
                <div className="navdd__item-desc">{it.short}</div>
              </div>
            </a>
          ))}
        </div>
        {footer && (
          <div className="navdd__foot">
            <span>{footer.left}</span>
            <a href={footer.href || "#"}>{footer.right} <span>→</span></a>
          </div>
        )}
      </div>
    </div>
  );
}

// ---------- MOBILE NAV ----------
function MobileNav({ open, onClose }) {
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const sections = [
    { h: "Platform", links: [
      ["Sites","#products"], ["Apps","#products"], ["Databases","#"],
      ["Object storage","#"], ["Functions","#"], ["Networking","#"]
    ]},
    { h: "Resources", links: [
      ["Documentation","#"], ["Changelog","#"], ["Engineering blog","#"],
      ["System status","#"], ["Community","#"], ["Trust & security","#"]
    ]},
    { h: "Company", links: [
      ["About","#"], ["Customers","#"], ["Careers","#"], ["Press kit","#"]
    ]},
  ];

  return (
    <div className={`mnav ${open ? "mnav--open" : ""}`} onClick={onClose} role="dialog" aria-hidden={!open}>
      <div className="mnav__sheet" onClick={e => e.stopPropagation()}>
        <div className="mnav__bar">
          <Logo/>
          <button className="mnav__close" onClick={onClose} aria-label="Close menu">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          </button>
        </div>
        <div className="mnav__primary">
          <a href="#templates" onClick={onClose}>Templates</a>
          <a href="#pricing" onClick={onClose}>Pricing</a>
        </div>
        {sections.map((s, i) => (
          <div key={i} className="mnav__sec">
            <div className="mnav__sec-h">{s.h}</div>
            <div className="mnav__sec-list">
              {s.links.map(([n, h], j) => (
                <a key={j} href={h} onClick={onClose}>{n}</a>
              ))}
            </div>
          </div>
        ))}
        <div className="mnav__cta">
          <a className="btn btn--secondary" href="#" onClick={onClose}>Sign in</a>
          <a className="btn btn--primary" href="#" onClick={onClose}>Get started <span className="arrow">→</span></a>
        </div>
      </div>
    </div>
  );
}

// ---------- NAV ----------
function Nav({ theme, toggleTheme }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const productItems = [
    { name: "Sites", short: "1-click templates · no Docker", color: "var(--brand)", href: "#products",
      icon: <I><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><circle cx="7" cy="6.5" r="0.8" fill="currentColor"/></I>,
      thumb: <ThumbSites/>},
    { name: "Apps", short: "Git push to deploy", color: "var(--accent-amber)",
      icon: <I><path d="M9 7l-5 5 5 5"/><path d="M15 7l5 5-5 5"/></I>,
      thumb: <ThumbApps/>},
    { name: "Databases", short: "Postgres · MySQL · Redis", color: "var(--brand)",
      icon: <I><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></I>,
      thumb: <ThumbDB/>},
    { name: "Object storage", short: "S3-compatible buckets", color: "var(--accent-steel)",
      icon: <I><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 12l9 4 9-4"/><path d="M3 17l9 4 9-4"/></I>,
      thumb: <ThumbStorage/>},
    { name: "Functions", short: "Edge runtime · zero cold-start", color: "var(--accent-amber)",
      icon: <I><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></I>,
      thumb: <ThumbFn/>},
    { name: "Networking", short: "Load balancing · WAF · CDN", color: "var(--brand)",
      icon: <I><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18"/><path d="M12 3a14 14 0 0 0 0 18"/></I>,
      thumb: <ThumbNet/>},
  ];

  const resourceItems = [
    { name: "Documentation", short: "Guides · CLI · API reference", color: "var(--brand)",
      icon: <I><path d="M4 4h12a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4V4z"/><path d="M8 8h8M8 12h8M8 16h5"/></I>,
      thumb: <ThumbDocs/>},
    { name: "Changelog", short: "Shipped, weekly", color: "var(--accent-amber)",
      icon: <I><path d="M12 22a10 10 0 1 0-10-10"/><path d="M12 6v6l4 2"/></I>,
      thumb: <ThumbChangelog/>},
    { name: "Engineering blog", short: "Stories from owned metal", color: "var(--accent-steel)",
      icon: <I><path d="M4 4h16v16H4z"/><path d="M4 9h16"/><circle cx="7.5" cy="6.5" r="0.8" fill="currentColor"/></I>,
      thumb: <ThumbBlog/>},
    { name: "System status", short: "All systems · 100% / 90d", color: "var(--brand)",
      icon: <I><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></I>,
      thumb: <ThumbStatus/>},
    { name: "Community", short: "Discord · 8.4k builders", color: "var(--accent-steel)",
      icon: <I><circle cx="9" cy="9" r="4"/><path d="M2 22a7 7 0 0 1 14 0"/><circle cx="17" cy="7" r="3"/></I>,
      thumb: <ThumbCommunity/>},
    { name: "Trust & security", short: "SOC 2 · ISO 27001 · GDPR", color: "var(--accent-amber)",
      icon: <I><path d="M12 3l8 4v6c0 5-3.5 7.5-8 8.5-4.5-1-8-3.5-8-8.5V7l8-4z"/></I>,
      thumb: <ThumbSecurity/>},
  ];

  const companyItems = [
    { name: "About", short: "Why we built Absolo", color: "var(--accent-steel)",
      icon: <I><circle cx="12" cy="8" r="4"/><path d="M4 22a8 8 0 0 1 16 0"/></I>,
      thumb: <ThumbAbout/>},
    { name: "Customers", short: "12,400+ teams shipping", color: "var(--brand)",
      icon: <I><path d="M4 21v-7a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v7"/><circle cx="12" cy="5" r="3"/></I>,
      thumb: <ThumbCustomers/>},
    { name: "Careers", short: "We're hiring · 4 roles", color: "var(--accent-amber)",
      icon: <I><rect x="3" y="7" width="18" height="14" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></I>,
      thumb: <ThumbCareers/>},
    { name: "Press kit", short: "Logos · brand · screenshots", color: "var(--accent-steel)",
      icon: <I><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></I>,
      thumb: <ThumbPress/>},
  ];

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav__row">
        <Logo/>
        <div className="nav__links">
          <NavDropdown label="Platform" items={productItems}
            footer={{ left: "6 products · one bill", right: "Compare", href: "#products" }}/>
          <a className="nav__link" href="#templates">Templates</a>
          <a className="nav__link" href="#pricing">Pricing</a>
          <NavDropdown label="Resources" items={resourceItems} align="right"
            footer={{ left: "Updated weekly", right: "All resources", href: "#" }}/>
          <NavDropdown label="Company" items={companyItems} align="right"
            footer={{ left: "Founded 2022 · 41 people", right: "Contact", href: "#" }}/>
        </div>
        <div className="nav__cta">
          <ThemeToggle theme={theme} onToggle={toggleTheme}/>
          <a className="btn btn--ghost nav__signin" href="#">Sign in</a>
          <a className="btn btn--primary nav__cta-btn" href="#">Get started <span className="arrow">→</span></a>
          <button className="nav__burger" onClick={() => setMobileOpen(true)} aria-label="Open menu">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <path d="M4 7h16M4 12h16M4 17h16"/>
            </svg>
          </button>
        </div>
      </div>
      <MobileNav open={mobileOpen} onClose={() => setMobileOpen(false)}/>
    </nav>
  );
}

// ---------- Dropdown thumbnails (96x64) — schematic infrastructure illustrations ----------
// Each thumb uses --icon-color (set per item) as the accent so it tints to the right hue.

function ThumbFrame({ children, bg }) {
  return (
    <svg viewBox="0 0 96 64" width="96" height="64" preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="thumbGrid" width="8" height="8" patternUnits="userSpaceOnUse">
          <path d="M 8 0 L 0 0 0 8" fill="none" stroke="currentColor" strokeWidth="0.4" opacity="0.18"/>
        </pattern>
      </defs>
      <rect width="96" height="64" fill={bg || "var(--surface-2)"}/>
      <rect width="96" height="64" fill="url(#thumbGrid)" color="var(--text-muted)"/>
      {children}
    </svg>
  );
}

function ThumbSites() {
  return (
    <ThumbFrame>
      {[0,1,2,3].map(i => (
        <g key={i}>
          <rect x={8 + i*20} y={10} width="16" height="22" rx="2" fill="var(--surface-3)" stroke="var(--border-strong)" strokeWidth="0.5"/>
          <rect x={10 + i*20} y={12} width="12" height="2" fill="var(--icon-color)" opacity={0.6 + i*0.1}/>
          <rect x={10 + i*20} y={16} width="8" height="1.2" fill="var(--text-muted)"/>
          <rect x={10 + i*20} y={19} width="10" height="1.2" fill="var(--text-muted)" opacity="0.6"/>
        </g>
      ))}
      <rect x="8" y="40" width="80" height="14" rx="2" fill="var(--icon-color)" opacity="0.18"/>
      <rect x="12" y="44" width="6" height="6" rx="1" fill="var(--icon-color)"/>
      <text x="22" y="49" fill="var(--text)" fontSize="6" fontFamily="JetBrains Mono">Deploy template</text>
    </ThumbFrame>
  );
}

function ThumbApps() {
  return (
    <ThumbFrame>
      {[
        {x: 8, l: "push"},
        {x: 36, l: "build"},
        {x: 64, l: "live"},
      ].map((s,i)=>(
        <g key={i}>
          <rect x={s.x} y="14" width="24" height="22" rx="2" fill="var(--surface-3)" stroke="var(--icon-color)" strokeWidth="0.5" strokeOpacity={i===2 ? 1 : 0.4}/>
          <circle cx={s.x+12} cy="22" r="3" fill="var(--icon-color)" opacity={i===2 ? 1 : 0.55}/>
          <text x={s.x+12} y="33" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">{s.l}</text>
        </g>
      ))}
      <path d="M32 25 L36 25" stroke="var(--icon-color)" strokeWidth="0.8" strokeDasharray="1.5 1.5" opacity="0.6"/>
      <path d="M60 25 L64 25" stroke="var(--icon-color)" strokeWidth="0.8" strokeDasharray="1.5 1.5" opacity="0.6"/>
      <rect x="8" y="44" width="80" height="10" rx="2" fill="var(--surface-3)" stroke="var(--border)" strokeWidth="0.5"/>
      <circle cx="13" cy="49" r="1.4" fill="var(--brand)"/>
      <text x="18" y="51" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">200 OK · 48ms · main@7f3a</text>
    </ThumbFrame>
  );
}

function ThumbDB() {
  return (
    <ThumbFrame>
      {[{x:20,l:"pg"},{x:48,l:"my"},{x:76,l:"rd"}].map((s,i)=>(
        <g key={i}>
          <ellipse cx={s.x} cy="16" rx="9" ry="2.5" fill="var(--icon-color)" opacity={0.7 - i*0.12}/>
          <path d={`M${s.x-9} 16 v 22 a 9 2.5 0 0 0 18 0 v -22`} fill="var(--surface-3)" stroke="var(--icon-color)" strokeWidth="0.5" strokeOpacity="0.5"/>
          <ellipse cx={s.x} cy="24" rx="9" ry="2.5" fill="var(--icon-color)" opacity={0.4 - i*0.08}/>
          <ellipse cx={s.x} cy="32" rx="9" ry="2.5" fill="var(--icon-color)" opacity={0.25 - i*0.05}/>
          <text x={s.x} y="48" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">{s.l}</text>
        </g>
      ))}
      <text x="48" y="58" textAnchor="middle" fill="var(--text-faint)" fontSize="5" fontFamily="JetBrains Mono">auto-backup · PITR</text>
    </ThumbFrame>
  );
}

function ThumbStorage() {
  return (
    <ThumbFrame>
      {Array.from({length:12}).map((_,i)=>{
        const r = i%4, c = Math.floor(i/4);
        return <rect key={i} x={8 + r*21} y={8 + c*14} width="18" height="10" rx="1.5"
          fill="var(--icon-color)" opacity={0.7 - r*0.12 - c*0.05}/>;
      })}
      <text x="48" y="58" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">$0.02/GB · S3 API</text>
    </ThumbFrame>
  );
}

function ThumbFn() {
  return (
    <ThumbFrame>
      <path d="M22 32 L46 14 L46 26 L62 26 L62 38 L74 32 L62 50 L62 38 L46 38 L46 50 Z"
        fill="var(--icon-color)" opacity="0.85" stroke="var(--icon-color)" strokeWidth="0.5"/>
      <text x="48" y="58" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">cold start · 8ms</text>
    </ThumbFrame>
  );
}

function ThumbNet() {
  return (
    <ThumbFrame>
      <circle cx="48" cy="28" r="5" fill="var(--icon-color)" opacity="0.85"/>
      {[
        [16,16],[80,16],[12,40],[84,40],[48,52]
      ].map(([x,y],i)=>(
        <g key={i}>
          <line x1="48" y1="28" x2={x} y2={y} stroke="var(--icon-color)" strokeWidth="0.6" strokeOpacity="0.4"/>
          <circle cx={x} cy={y} r="3" fill="var(--surface-3)" stroke="var(--icon-color)" strokeWidth="0.6"/>
        </g>
      ))}
      <text x="48" y="62" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">3 regions · 14 PoP</text>
    </ThumbFrame>
  );
}

function ThumbDocs() {
  return (
    <ThumbFrame>
      <rect x="10" y="8" width="76" height="48" rx="2" fill="var(--surface-3)" stroke="var(--border-strong)" strokeWidth="0.5"/>
      <rect x="14" y="13" width="28" height="2" rx="0.5" fill="var(--icon-color)"/>
      <rect x="14" y="18" width="50" height="1.2" fill="var(--text-muted)" opacity="0.5"/>
      <rect x="14" y="22" width="44" height="1.2" fill="var(--text-muted)" opacity="0.5"/>
      <rect x="14" y="26" width="48" height="1.2" fill="var(--text-muted)" opacity="0.5"/>
      <rect x="14" y="34" width="68" height="14" rx="1.5" fill="var(--icon-color)" opacity="0.15" stroke="var(--icon-color)" strokeWidth="0.4" strokeOpacity="0.5"/>
      <text x="17" y="44" fill="var(--icon-color)" fontSize="6" fontFamily="JetBrains Mono">$ absolo deploy</text>
    </ThumbFrame>
  );
}

function ThumbChangelog() {
  return (
    <ThumbFrame>
      {[10, 26, 42].map((y, i) => (
        <g key={i}>
          <circle cx="14" cy={y+5} r="2.5" fill="var(--icon-color)" opacity={1 - i*0.25}/>
          {i < 2 && <line x1="14" y1={y+8} x2="14" y2={y+18} stroke="var(--text-muted)" strokeWidth="0.5" strokeDasharray="1 1"/>}
          <rect x="22" y={y} width="64" height="12" rx="1.5" fill="var(--surface-3)" stroke="var(--border)" strokeWidth="0.4"/>
          <text x="26" y={y+8} fill="var(--text)" fontSize="5.5" fontFamily="JetBrains Mono">{["v2.14 · Edge cache","v2.13 · pg17 GA","v2.12 · Web SSH"][i]}</text>
        </g>
      ))}
    </ThumbFrame>
  );
}

function ThumbBlog() {
  return (
    <ThumbFrame>
      <rect x="8" y="8" width="40" height="48" rx="2" fill="var(--surface-3)" stroke="var(--border-strong)" strokeWidth="0.5"/>
      <rect x="12" y="36" width="30" height="2.5" fill="var(--icon-color)"/>
      <rect x="12" y="42" width="22" height="1.5" fill="var(--text-muted)" opacity="0.5"/>
      <rect x="12" y="46" width="26" height="1.5" fill="var(--text-muted)" opacity="0.5"/>
      <rect x="12" y="12" width="32" height="20" rx="1" fill="var(--icon-color)" opacity="0.3"/>
      <rect x="54" y="8" width="34" height="22" rx="2" fill="var(--surface-3)" stroke="var(--border)" strokeWidth="0.4"/>
      <rect x="57" y="11" width="20" height="1.5" fill="var(--text-muted)" opacity="0.7"/>
      <rect x="57" y="15" width="14" height="1" fill="var(--text-muted)" opacity="0.5"/>
      <rect x="54" y="34" width="34" height="22" rx="2" fill="var(--surface-3)" stroke="var(--border)" strokeWidth="0.4"/>
      <rect x="57" y="37" width="20" height="1.5" fill="var(--text-muted)" opacity="0.7"/>
      <rect x="57" y="41" width="14" height="1" fill="var(--text-muted)" opacity="0.5"/>
    </ThumbFrame>
  );
}

function ThumbStatus() {
  return (
    <ThumbFrame>
      {Array.from({length:24}).map((_,i)=>{
        const h = 4 + (Math.sin(i*1.3)*0.5+0.5)*22;
        return <rect key={i} x={8 + i*3.3} y={40 - h} width="2" height={h} rx="0.4"
          fill={i === 17 ? "var(--accent-amber)" : "var(--icon-color)"} opacity="0.9"/>;
      })}
      <text x="8" y="52" fill="var(--text)" fontSize="6" fontFamily="JetBrains Mono">99.99%</text>
      <text x="88" y="52" textAnchor="end" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">last 90 days</text>
      <circle cx="84" cy="11" r="2" fill="var(--icon-color)"/>
      <text x="80" y="13" textAnchor="end" fill="var(--text)" fontSize="5" fontFamily="JetBrains Mono">all systems</text>
    </ThumbFrame>
  );
}

function ThumbCommunity() {
  return (
    <ThumbFrame>
      {[[24,18],[48,12],[72,18],[32,34],[60,34],[48,48]].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="6" fill="var(--surface-3)" stroke="var(--icon-color)" strokeWidth="0.5" strokeOpacity="0.6"/>
          <circle cx={x} cy={y-1.5} r="1.8" fill="var(--icon-color)" opacity={0.85 - i*0.08}/>
          <path d={`M${x-3.2} ${y+2.5} a 3 2 0 0 1 6.4 0`} fill="var(--icon-color)" opacity={0.85 - i*0.08}/>
        </g>
      ))}
      <text x="48" y="62" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">8,432 online</text>
    </ThumbFrame>
  );
}

function ThumbSecurity() {
  return (
    <ThumbFrame>
      <path d="M48 8 L66 14 V30 C66 42 58 49 48 52 C38 49 30 42 30 30 V14 Z"
        fill="var(--icon-color)" opacity="0.15" stroke="var(--icon-color)" strokeWidth="0.6"/>
      <path d="M40 28 L46 34 L56 24" fill="none" stroke="var(--icon-color)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      <text x="48" y="62" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">SOC2 · ISO27001 · GDPR</text>
    </ThumbFrame>
  );
}

function ThumbAbout() {
  return (
    <ThumbFrame>
      {[["2022",12],["2024",28],["2026",44]].map(([y,yy],i)=>(
        <g key={i}>
          <text x="10" y={yy+4} fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">{y}</text>
          <line x1="28" y1={yy+2} x2={[60,72,84][i]} y2={yy+2} stroke="var(--icon-color)" strokeWidth="0.6" strokeOpacity={0.5 + i*0.15} strokeDasharray="1 1"/>
          <circle cx={[60,72,84][i]} cy={yy+2} r="2.5" fill="var(--icon-color)" opacity={0.5 + i*0.2}/>
        </g>
      ))}
      <text x="48" y="60" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">4 years · owned metal</text>
    </ThumbFrame>
  );
}

function ThumbCustomers() {
  return (
    <ThumbFrame>
      <text x="48" y="32" textAnchor="middle" fill="var(--text)" fontSize="20" fontWeight="700" fontFamily="Inter" letterSpacing="-0.6">12,400+</text>
      <text x="48" y="44" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">teams in production</text>
      <text x="48" y="56" textAnchor="middle" fill="var(--icon-color)" fontSize="5" fontFamily="JetBrains Mono">47 countries</text>
    </ThumbFrame>
  );
}

function ThumbCareers() {
  return (
    <ThumbFrame>
      {["Platform Eng","Frontend Eng","Designer","DevRel"].map((r, i) => (
        <g key={i}>
          <rect x="8" y={8 + i*12} width="80" height="10" rx="1.5" fill="var(--surface-3)" stroke="var(--icon-color)" strokeWidth="0.4" strokeOpacity="0.5"/>
          <circle cx="14" cy={13 + i*12} r="1.5" fill="var(--icon-color)"/>
          <text x="20" y={15.5 + i*12} fill="var(--text)" fontSize="5.5" fontFamily="JetBrains Mono">{r}</text>
          <text x="84" y={15.5 + i*12} textAnchor="end" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">remote</text>
        </g>
      ))}
    </ThumbFrame>
  );
}

function ThumbPress() {
  return (
    <ThumbFrame>
      <rect x="10" y="10" width="34" height="18" rx="1.5" fill="var(--icon-color)" opacity="0.18" stroke="var(--icon-color)" strokeWidth="0.5"/>
      <text x="27" y="22" textAnchor="middle" fill="var(--text)" fontSize="7" fontWeight="800" fontFamily="Bricolage Grotesque" letterSpacing="-0.3">ABSOLO</text>
      <rect x="52" y="10" width="34" height="18" rx="1.5" fill="var(--surface-3)" stroke="var(--border)" strokeWidth="0.4"/>
      <text x="69" y="22" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">logo.svg</text>
      <rect x="10" y="34" width="76" height="22" rx="1.5" fill="var(--surface-3)" stroke="var(--border)" strokeWidth="0.4"/>
      <text x="48" y="47" textAnchor="middle" fill="var(--text-muted)" fontSize="5" fontFamily="JetBrains Mono">brand guide · screenshots</text>
    </ThumbFrame>
  );
}

// helper icon wrapper used in nav
function I({ children }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      {children}
    </svg>
  );
}

// ---------- HERO NETWORK — animated background ----------
// Schematic data-center network: nodes + paths + traveling packets.
// Pure SVG with SMIL animateMotion — works without canvas/JS rAF loop.
function HeroNetwork() {
  const W = 1600, H = 900;

  // 15 nodes in a loose grid — looks like a topology diagram
  const N = [
    { x: 180,  y: 150, k: "edge"   },  // 0
    { x: 480,  y: 200, k: "edge"   },  // 1
    { x: 800,  y: 120, k: "core"   },  // 2
    { x: 1140, y: 180, k: "edge"   },  // 3
    { x: 1440, y: 150, k: "edge"   },  // 4
    { x: 120,  y: 480, k: "edge"   },  // 5
    { x: 440,  y: 440, k: "core"   },  // 6
    { x: 800,  y: 460, k: "hub"    },  // 7  (central hub)
    { x: 1180, y: 440, k: "core"   },  // 8
    { x: 1500, y: 480, k: "edge"   },  // 9
    { x: 240,  y: 770, k: "edge"   },  // 10
    { x: 560,  y: 720, k: "edge"   },  // 11
    { x: 880,  y: 790, k: "core"   },  // 12
    { x: 1260, y: 730, k: "edge"   },  // 13
    { x: 1480, y: 770, k: "edge"   },  // 14
  ];

  // Each link is two node indices, with a slight curve via control offset
  const L = [
    [0,1,-30], [1,2, 20], [2,3,-30], [3,4, 10],
    [5,6, 25], [6,7,-15], [7,8, 15], [8,9,-25],
    [10,11,-20], [11,12, 25], [12,13,-15], [13,14, 20],
    [0,5,-40], [1,6, 30], [2,7, -20], [3,8, 25], [4,9,-30],
    [5,10, 20], [6,11,-25], [7,12, 25], [8,13,-20], [9,14, 25],
    [1,7,  40], [3,7, -40], [11,7, 40], [13,7,-40],
  ];

  // Build a curved path between two nodes (quadratic Bezier with offset along normal)
  const pathFor = ([ai, bi, off]) => {
    const a = N[ai], b = N[bi];
    const mx = (a.x + b.x) / 2;
    const my = (a.y + b.y) / 2;
    const dx = b.x - a.x;
    const dy = b.y - a.y;
    const len = Math.hypot(dx, dy) || 1;
    // perpendicular unit
    const nx = -dy / len;
    const ny = dx / len;
    const cx = mx + nx * off;
    const cy = my + ny * off;
    return `M ${a.x} ${a.y} Q ${cx} ${cy} ${b.x} ${b.y}`;
  };

  return (
    <svg className="hero__network" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" aria-hidden="true" style={{display:"block"}}>
      <defs>
        <radialGradient id="netGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--brand)" stopOpacity="0.75"/>
          <stop offset="100%" stopColor="var(--brand)" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="netLine" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="var(--brand)" stopOpacity="0.15"/>
          <stop offset="50%" stopColor="var(--brand)" stopOpacity="0.6"/>
          <stop offset="100%" stopColor="var(--brand)" stopOpacity="0.15"/>
        </linearGradient>
        <filter id="netSoft" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="6"/>
        </filter>
      </defs>

      {/* paths */}
      <g>
        {L.map((l, i) => (
          <path key={i} id={`hn-p${i}`} d={pathFor(l)}
            stroke="url(#netLine)" strokeWidth="1.4" fill="none" opacity="0.7"/>
        ))}
      </g>

      {/* hub glow */}
      <circle cx={N[7].x} cy={N[7].y} r="120" fill="url(#netGlow)" opacity="0.7"/>

      {/* nodes */}
      {N.map((n, i) => {
        const isHub = n.k === "hub";
        const isCore = n.k === "core";
        const r = isHub ? 14 : isCore ? 9 : 6;
        return (
          <g key={i} transform={`translate(${n.x}, ${n.y})`}>
            {/* soft glow under each node */}
            <circle r={r * 4} fill="url(#netGlow)" opacity={isHub ? 0.55 : isCore ? 0.35 : 0.18}/>
            {/* node body */}
            <rect x={-r} y={-r} width={r*2} height={r*2} rx={isHub ? 3 : 1.5}
              fill="var(--bg)" stroke="var(--brand)" strokeWidth={isHub ? 1.8 : 1.2}
              strokeOpacity={isHub ? 0.9 : isCore ? 0.7 : 0.5}/>
            {/* core dot */}
            <circle r={isHub ? 4 : isCore ? 2.5 : 1.6} fill="var(--brand)">
              <animate attributeName="opacity"
                values={isHub ? "1;0.55;1" : "0.85;0.35;0.85"}
                dur={isHub ? "2.4s" : `${2.6 + (i % 4) * 0.3}s`}
                repeatCount="indefinite"
                begin={`${(i % 5) * 0.3}s`}/>
            </circle>
            {/* hub ring */}
            {isHub && (
              <circle r="22" fill="none" stroke="var(--brand)" strokeWidth="1" strokeOpacity="0.35">
                <animate attributeName="r" values="18;30;18" dur="3.4s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.4;0;0.4" dur="3.4s" repeatCount="indefinite"/>
              </circle>
            )}
          </g>
        );
      })}

      {/* traveling packets — one per link */}
      {L.map((l, i) => {
        const dur = 4 + ((i * 1.37) % 4);
        const delay = (i * 0.31) % 3;
        return (
          <circle key={i} r="3" fill="var(--brand)" opacity="0.95">
            <animateMotion dur={`${dur}s`} repeatCount="indefinite" begin={`${delay}s`} rotate="auto">
              <mpath href={`#hn-p${i}`}/>
            </animateMotion>
            <animate attributeName="r" values="2;3.5;2" dur={`${dur}s`} repeatCount="indefinite" begin={`${delay}s`}/>
          </circle>
        );
      })}

      {/* a few faster amber packets on the hub spokes for variety */}
      {[22, 23, 24, 25].map((idx, i) => (
        <circle key={`amber-${i}`} r="2.5" fill="var(--accent-amber)" opacity="0.9">
          <animateMotion dur={`${2.6 + i * 0.4}s`} repeatCount="indefinite" begin={`${i * 0.6}s`} rotate="auto">
            <mpath href={`#hn-p${idx}`}/>
          </animateMotion>
        </circle>
      ))}
    </svg>
  );
}

// ---------- HERO ----------
function Hero({ heroVariant, doodles, animatedMesh, grain }) {
  const titles = {
    "Deploy anything": ["Deploy anything.", "Scale", "everything."],
    "Push code": ["Push code.", "We handle", "the rest."],
    "Cloud for builders": ["A cloud", "for", "builders."],
  };
  const t = titles[heroVariant] || titles["Deploy anything"];

  return (
    <section className="hero">
      <HeroNetwork/>
      {animatedMesh && (
        <div className="hero__mesh">
          <div className="blob blob--1"/>
          <div className="blob blob--2"/>
          <div className="blob blob--3"/>
          <div className="blob blob--4"/>
          <div className="blob blob--5"/>
        </div>
      )}
      {grain && <div className="hero__grain"/>}
      <div className="hero__grid"/>

      {doodles && (
        <div>
          <Squiggle className="hero__doodle hero__doodle--squiggle1"/>
          <Star className="hero__doodle hero__doodle--star"/>
          <ArrowCurve className="hero__doodle hero__doodle--arrow"/>
          <Dots className="hero__doodle hero__doodle--dots"/>
          <Sparkle className="hero__doodle hero__doodle--sparkle"/>
          <Burst className="hero__doodle hero__doodle--burst"/>
          <LoopArrow className="hero__doodle hero__doodle--loop"/>
        </div>
      )}

      <div className="container hero__inner">
        <div className="hero__top">
          <div className="hero__pill">
            <span className="tag">New</span>
            <span>Edge cache + image optimization · free on every plan</span>
            <span style={{color:"var(--text-faint)"}}>→</span>
          </div>
          <h1 className="hero__title">
            {t[0]}<br/>
            <span className="accent">{t[1]}</span> {t[2]}
          </h1>
          <p className="hero__sub">
            One platform for non-tech 1-click sites and developer-grade git-push apps.
            Owned infrastructure, honest hourly billing, the dashboard you've always wanted.
          </p>
          <div className="hero__cta">
            <a className="btn btn--primary btn--lg" href="#">Get started free <span className="arrow">→</span></a>
            <a className="btn btn--secondary btn--lg" href="#pricing">View pricing</a>
          </div>
          <div className="hero__meta">
            <span><Check/> No credit card</span>
            <span><Check/> Deploy in 30s</span>
            <span><Check/> 3 regions</span>
          </div>
        </div>

        <div className="hero__preview reveal">
          <div className="hero__preview-glow"/>
          <div className="hero__preview-frame">
            <DashboardMock/>
          </div>
        </div>
        <div className="hero__previewlink reveal">
          this is a real screenshot · <a href="Dashboard Sample.html">open the full dashboard →</a>
        </div>
      </div>
    </section>
  );
}

function Check() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className="check">
      <path d="M5 12l5 5L20 7"/>
    </svg>
  );
}

// ---------- Dashboard mock ----------
function DashboardMock() {
  return (
    <div className="dashmock">
      <div className="dashmock__bar">
        <div className="dots"><span/><span/><span/></div>
        <div className="url">app.absolo.cloud / projects / acme-shop</div>
      </div>
      <div className="dashmock__body">
        <aside className="dashmock__side">
          <div className="dashmock__side-h">Workspace</div>
          <div className="dashmock__side-item">{FeatIcons.globe}<span>Overview</span></div>
          <div className="dashmock__side-item active">{FeatIcons.rocket}<span>Apps</span><span style={{marginLeft:"auto", fontFamily:"var(--font-mono)", fontSize:11, opacity:0.6}}>4</span></div>
          <div className="dashmock__side-item">{FeatIcons.database}<span>Databases</span></div>
          <div className="dashmock__side-item">{FeatIcons.storage}<span>Buckets</span></div>
          <div className="dashmock__side-item">{FeatIcons.git}<span>Deployments</span></div>
          <div className="dashmock__side-item">{FeatIcons.bolt}<span>Functions</span></div>
          <div className="dashmock__side-h" style={{marginTop:12}}>Sites</div>
          <div className="dashmock__side-item">{FeatIcons.code}<span>Templates</span></div>
          <div className="dashmock__side-item">{FeatIcons.ssh}<span>Web SSH</span></div>
        </aside>

        <div className="dashmock__main">
          <div className="dashmock__heading">
            <div>
              <div style={{display:"flex", alignItems:"center", gap:8}}>
                <h3>acme-shop</h3>
                <span className="dashmock__pill" style={{background:"color-mix(in oklch, var(--success) 14%, transparent)", borderColor:"color-mix(in oklch, var(--success) 40%, transparent)", color:"var(--success)"}}>● live</span>
              </div>
              <div style={{fontSize:12, color:"var(--text-muted)", marginTop:4, fontFamily:"var(--font-mono)"}}>
                acme-shop.absolo.app · main@7f3a2c1
              </div>
            </div>
            <div className="dashmock__heading-actions">
              <span className="dashmock__pill">EU · Frankfurt</span>
              <span className="dashmock__pill dashmock__pill--brand">Deploy</span>
            </div>
          </div>

          <div className="dashmock__stats">
            <div className="statcard">
              <div className="statcard__lbl">Requests</div>
              <div className="statcard__val">128k</div>
              <div className="statcard__delta">↑ 12.4%</div>
            </div>
            <div className="statcard">
              <div className="statcard__lbl">p99 latency</div>
              <div className="statcard__val">48ms</div>
              <div className="statcard__delta">↓ 6ms</div>
            </div>
            <div className="statcard">
              <div className="statcard__lbl">CPU</div>
              <div className="statcard__val">22%</div>
              <div className="statcard__delta warn">↑ 3%</div>
            </div>
            <div className="statcard">
              <div className="statcard__lbl">This month</div>
              <div className="statcard__val">$8.42</div>
              <div className="statcard__delta">on track</div>
            </div>
          </div>

          <div className="dashmock__chart">
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:8}}>
              <div style={{fontSize:12, color:"var(--text-muted)", fontFamily:"var(--font-mono)", textTransform:"uppercase", letterSpacing:"0.08em"}}>Requests / hour · last 24h</div>
              <div style={{display:"flex", gap:6}}>
                <span className="dashmock__pill" style={{padding:"3px 8px", fontSize:10}}>24h</span>
                <span className="dashmock__pill" style={{padding:"3px 8px", fontSize:10, opacity:0.5}}>7d</span>
                <span className="dashmock__pill" style={{padding:"3px 8px", fontSize:10, opacity:0.5}}>30d</span>
              </div>
            </div>
            <Sparkline/>
          </div>

          <div className="dashmock__deploys">
            <div className="deploy-row">
              <span className="deploy-row__status"/>
              <span className="deploy-row__sha">7f3a2c1</span>
              <span className="deploy-row__msg">fix: cache headers for static assets</span>
              <span className="deploy-row__time">2m ago</span>
            </div>
            <div className="deploy-row">
              <span className="deploy-row__status building"/>
              <span className="deploy-row__sha">c89df42</span>
              <span className="deploy-row__msg">feat: add Stripe checkout flow</span>
              <span className="deploy-row__time">building · 14s</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- LOGO STRIP ----------
function LogoStrip() {
  const items = [
    "Northwind", "Atlas Labs", "Ember & Oak", "Bowery Coffee", "Hyperspace", "Modulo", "Pebble", "Cathedral", "Lighthouse"
  ];
  const Track = () => (
    <div className="logos__track">
      {items.concat(items).map((n, i) => (
        <div key={i} className="logo-item">
          <Burst style={{width:20, height:20, color:"var(--aurora-pink)"}}/>
          {n}
        </div>
      ))}
    </div>
  );
  return (
    <section className="logos">
      <div className="container">
        <div className="logos__lbl">Trusted by 12,400+ teams shipping in production</div>
      </div>
      <div className="logos__marquee">
        <Track/>
      </div>
    </section>
  );
}

// ---------- TWO MODES ----------
function TwoModes() {
  return (
    <section className="section" id="products">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"/>Two modes, one platform</span>
          <h2>Whether you push code or click a template,<br/>we meet you where you are.</h2>
          <p>Two product surfaces share one billing system, one team, one bill. Switch your brain, not your tools.</p>
        </div>

        <div className="modes">
          <div className="mode-card mode-card--sites reveal">
            <div className="mode-card__head">
              <div className="mode-card__icon">{NavIcons.sites}</div>
              <div><div className="mode-card__tag">Sites · non-technical</div></div>
            </div>
            <h3 className="mode-card__title">1-click hosting that doesn't feel like 2008</h3>
            <p className="mode-card__desc">
              WordPress, WooCommerce, Ghost, Laravel — pick a template, click Deploy. Persistent storage, web SSH, snapshots, managed DB. No Docker. No YAML.
            </p>
            <ul className="mode-card__list">
              <li>1-click templates with persistent disks</li>
              <li>Browser-based SSH + live logs</li>
              <li>Point-in-time snapshots & rollback</li>
              <li>Managed Postgres / MySQL / Redis attached in one click</li>
            </ul>
            <a className="mode-card__cta" href="#">Explore Sites <span className="arrow">→</span></a>
            <div className="mode-card__viz"><SitesIllustration/></div>
          </div>

          <div className="mode-card mode-card--apps reveal">
            <div className="mode-card__head">
              <div className="mode-card__icon">{FeatIcons.code}</div>
              <div><div className="mode-card__tag">Apps · for developers</div></div>
            </div>
            <h3 className="mode-card__title">Git push to ship. We figure out the rest.</h3>
            <p className="mode-card__desc">
              Connect a repo. We auto-detect Next.js, Express, FastAPI, Rails, Go, Rust — build, deploy, route, SSL. Blue/green rollouts and instant rollback by default.
            </p>
            <ul className="mode-card__list">
              <li>Auto-detect framework + zero-config builds</li>
              <li>Preview environments for every PR</li>
              <li>Immutable versioning, 1-click rollback</li>
              <li>Built-in observability: logs, traces, p99</li>
            </ul>
            <a className="mode-card__cta" href="#">Explore Apps <span className="arrow">→</span></a>
            <div className="mode-card__viz"><AppsIllustration/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

const NavIcons = {
  sites: <I><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><circle cx="7" cy="6.5" r="0.8" fill="currentColor"/></I>
};

// ---------- FEATURE GRID ----------
function Features() {
  const features = [
    { icon: FeatIcons.database, color: "var(--aurora-magenta)", title: "Managed databases", desc: "Postgres 17, MySQL 8.4, Redis 7.4. Auto-backups, point-in-time restore, HA toggle." },
    { icon: FeatIcons.storage, color: "var(--aurora-cyan)", title: "S3-compatible storage", desc: "SeaweedFS-backed buckets. Same SDKs, a fraction of the bill, none of the egress traps." },
    { icon: FeatIcons.ssl, color: "var(--aurora-yellow)", title: "Auto-SSL & custom domains", desc: "yourapp.absolo.app on day one. Bring your domain — certs provisioned in seconds." },
    { icon: FeatIcons.ssh, color: "var(--aurora-violet)", title: "Web SSH & live logs", desc: "Real terminal into your container. Tail logs in your browser. Not an afterthought." },
    { icon: FeatIcons.snapshot, color: "var(--aurora-orange)", title: "Snapshots & rollback", desc: "Point-in-time snapshots for Sites. Immutable versioning, instant rollback for Apps." },
    { icon: FeatIcons.region, color: "var(--aurora-lime)", title: "Multi-region", desc: "EU (Frankfurt), US (Ashburn), APAC (Singapore). Deploy where your users actually are." },
  ];
  return (
    <section className="section section--tight" style={{position:"relative"}}>

      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" style={{background:"var(--aurora-magenta)", boxShadow:"0 0 12px var(--aurora-magenta)"}}/>The platform</span>
          <h2>Everything you'd expect.<br/>Nothing you wouldn't.</h2>
          <p>A modern surface layer over our owned infrastructure — Hetzner, bare metal, no AWS resale markup.</p>
        </div>

        <div className="features">
          {features.map((f, i) => (
            <div key={i} className="feature reveal" style={{"--feat-color": f.color}}>
              <div className="feature__corner"/>
              <div className="feature__icon">{f.icon}</div>
              <h3 className="feature__title">{f.title}</h3>
              <p className="feature__desc">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- TEMPLATES ----------
function Templates() {
  const tpls = [
    { name: "WordPress",   desc: "Most popular CMS",         logo: TplLogos.wordpress,   color: "#EDF1F5", bg: "linear-gradient(135deg, #1E3A2B, #11221B)" },
    { name: "WooCommerce", desc: "E-commerce, included",     logo: TplLogos.woocommerce, color: "#EDF1F5", bg: "linear-gradient(135deg, #243240, #161E28)" },
    { name: "Ghost",       desc: "Publishing for creators",  logo: TplLogos.ghost,       color: "#EDF1F5", bg: "linear-gradient(135deg, #0E1217, #1A1F26)" },
    { name: "Laravel",     desc: "PHP, the modern way",      logo: TplLogos.laravel,     color: "#EDF1F5", bg: "linear-gradient(135deg, #3A2820, #1F1612)" },
    { name: "Next.js",     desc: "React framework",          logo: TplLogos.next,        color: "#EDF1F5", bg: "linear-gradient(135deg, #1A1F26, #0E1217)" },
    { name: "Express",     desc: "Node.js minimalist",       logo: TplLogos.express,     color: "#EDF1F5", bg: "linear-gradient(135deg, #1F2E26, #11221B)" },
    { name: "FastAPI",     desc: "Modern Python APIs",       logo: TplLogos.fastapi,     color: "#EDF1F5", bg: "linear-gradient(135deg, #1E3A2B, #1F8A57)" },
    { name: "Django",      desc: "The Python web framework", logo: TplLogos.django,      color: "#EDF1F5", bg: "linear-gradient(135deg, #0F2A1F, #11221B)" },
    { name: "Static HTML", desc: "Just files, served fast",  logo: TplLogos.static,      color: "#EDF1F5", bg: "linear-gradient(135deg, #2A2418, #1F1A12)" },
  ];
  return (
    <section className="section" id="templates" style={{position:"relative"}}>
      <div className="container">
        <div className="section-head reveal templates__head">
          <div className="templates__head-text">
            <span className="eyebrow"><span className="dot" style={{background:"var(--accent-amber)", boxShadow:"0 0 12px var(--accent-amber)"}}/>Templates</span>
            <h2 style={{fontSize:"clamp(36px, 4.2vw, 56px)"}}>Deploy your stack <span style={{color:"var(--brand)"}}>in one click.</span></h2>
            <p>Forty-plus templates, all pre-tuned for our infra. Pick one, name your project, you're live in thirty seconds.</p>
          </div>
          <a className="btn btn--secondary templates__head-cta" href="#">View all 40+ <span className="arrow">→</span></a>
        </div>
      </div>

      <div className="container templates">
        <div className="templates__track">
          {tpls.map((t, i) => (
            <div key={i} className="tpl" style={{"--tpl-bg": t.bg, "--tpl-color": t.color}}>
              <div className="tpl__top">
                <div className="tpl__logo">{t.logo}</div>
              </div>
              <div className="tpl__body">
                <div className="tpl__name">{t.name}</div>
                <div className="tpl__desc">{t.desc}</div>
                <div className="tpl__deploy">Deploy in 1 click <span>→</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- BEFORE / AFTER ----------
function BeforeAfter() {
  const cpanelTiles = [
    {n:"File Manager", c:"#A6692E"}, {n:"Backup", c:"#3568A0"}, {n:"MySQL", c:"#3D70A5"}, {n:"phpMyAdmin", c:"#7E5A20"}, {n:"FTP Accounts", c:"#4A6F2C"},
    {n:"Email Accts", c:"#995D2D"}, {n:"Forwarders", c:"#3A5980"}, {n:"Autoresp.", c:"#7C3F60"}, {n:"Spam Filter", c:"#5A422A"}, {n:"Mail Logs", c:"#365A85"},
    {n:"Subdomains", c:"#406240"}, {n:"Addon Doms", c:"#6B4530"}, {n:"Aliases", c:"#3D6090"}, {n:"Redirects", c:"#7A5523"}, {n:"Zone Editor", c:"#36527A"},
    {n:"Softaculous", c:"#A65A2A"}, {n:"Cron Jobs", c:"#4A4A4A"}, {n:"Error Pages", c:"#883C3C"}, {n:"Index Mgr", c:"#3A6B4A"}, {n:"MIME Types", c:"#7E5A20"},
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" style={{background:"var(--danger)", boxShadow:"0 0 12px var(--danger)"}}/>Before / after</span>
          <h2>Coming from traditional hosting?<br/>You'll feel right at home <span style={{color:"var(--text-muted)"}}>—</span> <span style={{color:"var(--brand)"}}>minus the chaos.</span></h2>
        </div>

        <div className="beforeafter">
          <div className="ba-card ba-card--before reveal">
            <div className="ba-card__head">
              <h4>cPanel · 2003 called</h4>
              <span className="stamp">Before</span>
            </div>
            <div className="ba-card__body" style={{background:"var(--cpanel-body)"}}>
              <div className="cpanel">
                <div className="cpanel__bar"><span>cPanel WHM 11.114 — user@server23.host.example.net</span><span>Help · Logout</span></div>
                <div className="cpanel__grid">
                  {cpanelTiles.map((t,i) => (
                    <div key={i} className="cpanel__tile">
                      <svg className="cpanel__tile-icon" viewBox="0 0 24 24" fill={t.c}>
                        <rect x="4" y="4" width="16" height="16" rx="2"/>
                      </svg>
                      {t.n}
                    </div>
                  ))}
                </div>
                <div className="cpanel__notice">⚠ Your disk quota is at 87%. Click here to upgrade. <a style={{color:"#1144AA"}}>Upgrade now</a></div>
              </div>
            </div>
          </div>

          <div className="ba-card ba-card--after reveal">
            <div className="ba-card__head">
              <h4>Absolo · 2026</h4>
              <span className="stamp">After</span>
            </div>
            <div className="ba-card__body">
              <div className="wizard">
                <div className="wizard__steps">
                  <div className="wizard__step done"/>
                  <div className="wizard__step active"/>
                  <div className="wizard__step"/>
                </div>
                <div className="wizard__h">Configure your WordPress site</div>
                <div>
                  <div className="wizard__lbl">Project name</div>
                  <input className="wizard__input" defaultValue="acme-shop"/>
                </div>
                <div>
                  <div className="wizard__lbl">Region</div>
                  <div className="wizard__opt-row">
                    <div className="wizard__opt sel">EU<span className="tag">Frankfurt</span></div>
                    <div className="wizard__opt">US<span className="tag">Ashburn</span></div>
                    <div className="wizard__opt">APAC<span className="tag">Singapore</span></div>
                  </div>
                </div>
                <div>
                  <div className="wizard__lbl">Size</div>
                  <div className="wizard__opt-row">
                    <div className="wizard__opt">XS<span className="tag">$5/mo</span></div>
                    <div className="wizard__opt sel">S<span className="tag">$12/mo</span></div>
                    <div className="wizard__opt">M<span className="tag">$25/mo</span></div>
                  </div>
                </div>
                <button className="wizard__btn">Deploy <span>→</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- PRICING PREVIEW ----------
function PricingPreview() {
  const plans = [
    { name: "Hobby", price: 5, desc: "Side projects & personal sites", features: ["1× XS always-on compute", "1 GB persistent storage", "100 GB bandwidth", "1 custom domain", "Auto-SSL + free subdomain"] },
    { name: "Starter", price: 12, desc: "Small businesses & freelancers", features: ["1× S compute", "5 GB persistent storage", "250 GB bandwidth", "3 custom domains", "Daily snapshots", "Email support"], featured: true },
    { name: "Pro", price: 25, desc: "Teams shipping in production", features: ["1× M compute", "25 GB persistent storage", "500 GB bandwidth", "Unlimited domains", "Staging environments", "Priority support"] },
  ];
  return (
    <section className="section" id="pricing" style={{position:"relative"}}>

      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" style={{background:"var(--aurora-lime)", boxShadow:"0 0 12px var(--aurora-lime)"}}/>Pricing</span>
          <h2>Pay by the hour. <span style={{color:"var(--brand)"}}>Never overpay.</span></h2>
          <p>Metered to the hour, invoiced monthly. Stop a project on Wednesday, pay through Wednesday. No "minimum commitment" footnotes.</p>
        </div>

        <div className="pricing-grid">
          {plans.map((p, i) => (
            <div key={i} className={`plan reveal ${p.featured ? "plan--featured" : ""}`}>
              {p.featured && <div className="plan__badge">Most popular</div>}
              <div className="plan__name">{p.name}</div>
              <div className="plan__price">
                <span className="currency">$</span>{p.price}<span className="per">/mo</span>
              </div>
              <div className="plan__desc">{p.desc}</div>
              <ul className="plan__features">
                {p.features.map((f,j) => (
                  <li key={j}><Check/>{f}</li>
                ))}
              </ul>
              <a className="plan__btn" href="#">Choose {p.name}</a>
            </div>
          ))}
        </div>

        <div className="reveal" style={{textAlign:"center", marginTop:40, fontSize:14, color:"var(--text-muted)"}}>
          Need bigger? <a href="#" style={{color:"var(--brand)", borderBottom:"1px dashed var(--brand)"}}>See all 5 plans + the calculator</a> · or <a href="#" style={{color:"var(--text)"}}>talk to sales →</a>
        </div>
      </div>
    </section>
  );
}

// ---------- DEV EXPERIENCE / TERMINAL ----------
function DevExp() {
  const [shownLines, setShownLines] = useState(0);
  const lines = [
    { type: "cmd", html: <><span className="prompt">~/acme-shop</span> <span className="arrow">$</span> git push absolo main</> },
    { type: "out", html: <span className="info">Counting objects: 14, done.</span> },
    { type: "out", html: <span className="info">Compressing... 100% (12/12)</span> },
    { type: "out", html: <span className="info">Writing objects: 100% (14/14), 4.21 KiB</span> },
    { type: "spacer" },
    { type: "out", html: <><span className="pink">→</span> <span className="yellow">detect</span> <span className="dim">·</span> Next.js 15.0 · node 22.x · pnpm 9</> },
    { type: "out", html: <><span className="pink">→</span> <span className="yellow">build</span>  <span className="dim">·</span> installing 248 packages... <span className="ok">done</span> in 12s</> },
    { type: "out", html: <><span className="pink">→</span> <span className="yellow">build</span>  <span className="dim">·</span> next build... <span className="ok">done</span> in 28s</> },
    { type: "out", html: <><span className="pink">→</span> <span className="yellow">deploy</span> <span className="dim">·</span> uploading to eu-fra-1... <span className="ok">done</span></> },
    { type: "out", html: <><span className="pink">→</span> <span className="yellow">route</span>  <span className="dim">·</span> SSL provisioned · <span className="url">acme-shop.absolo.app</span></> },
    { type: "spacer" },
    { type: "out", html: <><span className="ok">✓</span> Live in 1m 04s · 7f3a2c1</> },
    { type: "cmd", cursor: true, html: <><span className="prompt">~/acme-shop</span> <span className="arrow">$</span></> },
  ];

  useEffect(() => {
    if (shownLines >= lines.length) return;
    const delay = lines[shownLines]?.type === "spacer" ? 80 : 320;
    const t = setTimeout(() => setShownLines(s => s + 1), delay);
    return () => clearTimeout(t);
  }, [shownLines]);

  useEffect(() => {
    if (shownLines >= lines.length) {
      const t = setTimeout(() => setShownLines(0), 5000);
      return () => clearTimeout(t);
    }
  }, [shownLines]);

  return (
    <section className="section" id="dev">
      <div className="container">
        <div className="dev-section">
          <div className="dev-section__copy reveal">
            <span className="eyebrow"><span className="dot" style={{background:"var(--aurora-cyan)"}}/>Developer experience</span>
            <h2 style={{marginTop:20}}>
              Push code.<br/><span style={{color:"var(--brand)"}}>That's the whole flow.</span>
            </h2>
            <p>One <code style={{fontFamily:"var(--font-mono)", background:"var(--surface)", padding:"2px 8px", borderRadius:6, fontSize:14, border:"1px solid var(--border)"}}>git push</code> triggers detect, build, deploy, route, and SSL. No CI YAML. No build scripts to babysit. No 11pm pager.</p>
            <ul className="dev-section__list">
              <li><Check/><span><b>Auto-detect</b> Next.js, Express, FastAPI, Rails, Go, Rust, Astro, Remix — and 20 more.</span></li>
              <li><Check/><span><b>Preview environments</b> for every PR. Share the URL, kill it on merge.</span></li>
              <li><Check/><span><b>Instant rollback.</b> Every deploy is immutable; revert with one click.</span></li>
              <li><Check/><span><b>Logs and traces</b> in the same place you click "Deploy".</span></li>
            </ul>
          </div>

          <div className="terminal reveal">
            <div className="terminal__bar">
              <div className="dots"><span/><span/><span/></div>
              <span className="terminal__title">~/acme-shop — absolo · zsh</span>
            </div>
            <div className="terminal__body">
              {lines.slice(0, shownLines).map((l, i) => {
                if (l.type === "spacer") return <div key={i} style={{height:8}}/>;
                return (
                  <div key={i} className={`term-line ${l.cursor && i === shownLines - 1 ? "cursor" : ""}`}>{l.html}</div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- TESTIMONIAL ----------
function Testimonial() {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="testi reveal">
          <p className="testi__quote">
            We migrated 28 client sites off cPanel in a weekend. The wizard is what cPanel <em>should</em> have been all along — and our agency margin went up nine points because we stopped paying for AWS egress we didn't use.
          </p>
          <div className="testi__author">
            <div className="testi__avatar">MR</div>
            <div className="testi__meta">
              <div className="testi__name">Maya Reyes</div>
              <div className="testi__role">Founder, Northwind Studio</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- CTA BANNER ----------
function CTABanner() {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="cta reveal">
          <h2>Start building <span className="accent">for free</span></h2>
          <p>$0/mo Free tier. No credit card. Spin up your first project in under a minute.</p>
          <div className="cta__btns">
            <a className="btn btn--lg" href="#" style={{background:"white", color:"#0E1419", boxShadow:"0 8px 24px -8px rgba(0,0,0,0.5)"}}>Get started <span className="arrow">→</span></a>
            <a className="btn btn--lg" href="#" style={{borderColor:"rgba(255,255,255,0.3)", color:"white", background:"rgba(255,255,255,0.08)", border:"1px solid rgba(255,255,255,0.3)"}}>Talk to sales</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <Logo/>
            <p className="footer__tag">The platform that gets out of your way. Push code or click a template — we handle the rest.</p>
            <div className="footer__social">
              <a href="#" aria-label="GitHub"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1.1-.8.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.3-3.2-.1-.3-.6-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.9.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg></a>
              <a href="#" aria-label="X"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-7.5 8.6L23 22h-6.8l-5.3-7-6.1 7H1.7l8-9.2L1 2h7l4.8 6.4L18.9 2Zm-1.2 18h1.9L7.5 4H5.5l12.2 16Z"/></svg></a>
              <a href="#" aria-label="Discord"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.3 4.4a18 18 0 0 0-4.5-1.4 13 13 0 0 0-.6 1.2 16.5 16.5 0 0 0-5 0 13 13 0 0 0-.6-1.2c-1.6.3-3.1.7-4.5 1.4C2.3 8.6 1.6 12.6 2 16.6a18 18 0 0 0 5.4 2.7c.4-.6.8-1.2 1.1-1.9-1-.4-2-.8-2.8-1.4l.7-.5a13 13 0 0 0 11.2 0l.7.5c-.9.6-1.8 1-2.8 1.4.3.7.7 1.3 1.1 1.9a18 18 0 0 0 5.4-2.7c.5-4.5-.5-8.5-2.7-12.2ZM8.5 14.1c-1.1 0-2-1-2-2.2 0-1.2.9-2.2 2-2.2s2 1 2 2.2c0 1.2-.9 2.2-2 2.2Zm7 0c-1.1 0-2-1-2-2.2 0-1.2.9-2.2 2-2.2s2 1 2 2.2c0 1.2-.9 2.2-2 2.2Z"/></svg></a>
            </div>
          </div>

          <div className="footer__col">
            <h5>Products</h5>
            <ul>
              <li><a href="#">Sites</a></li>
              <li><a href="#">Apps</a></li>
              <li><a href="#">Databases</a></li>
              <li><a href="#">Object Storage</a></li>
              <li><a href="#">Templates</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Resources</h5>
            <ul>
              <li><a href="#">Docs</a></li>
              <li><a href="#">API reference</a></li>
              <li><a href="#">Changelog</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="Dashboard Sample.html">Dashboard preview</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Customers</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Press kit</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Security</a></li>
              <li><a href="#">DPA</a></li>
              <li><a href="#">Sub-processors</a></li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <div>© 2026 Absolo Cloud · Made on owned metal</div>
          <div className="footer__regions">
            <span className="footer__region"><span className="dot"/>EU · Frankfurt</span>
            <span className="footer__region"><span className="dot"/>US · Ashburn</span>
            <span className="footer__region"><span className="dot"/>APAC · Singapore</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- TWEAKS PANEL ----------
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero">
        <TweakSelect label="Headline" value={t.heroVariant}
          options={["Deploy anything", "Push code", "Cloud for builders"]}
          onChange={v => setTweak("heroVariant", v)}/>
        <TweakToggle label="Animated gradient mesh" value={t.animatedMesh} onChange={v => setTweak("animatedMesh", v)}/>
        <TweakToggle label="Film grain" value={t.grain} onChange={v => setTweak("grain", v)}/>
      </TweakSection>
      <TweakSection title="Vibe">
        <TweakToggle label="Hand-drawn doodles" value={t.doodles} onChange={v => setTweak("doodles", v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

// ---------- ROOT ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [theme, toggleTheme] = useTheme();
  useReveal();

  return (
    <div>
      <Nav theme={theme} toggleTheme={toggleTheme}/>
      <Hero heroVariant={t.heroVariant} doodles={t.doodles} animatedMesh={t.animatedMesh} grain={t.grain}/>
      <LogoStrip/>
      <TwoModes/>
      <Features/>
      <Templates/>
      <BeforeAfter/>
      <PricingPreview/>
      <DevExp/>
      <Testimonial/>
      <CTABanner/>
      <Footer/>
      <TweaksUI t={t} setTweak={setTweak}/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);