const { useState, useEffect, useMemo } = React;

// Tweakable defaults — host can rewrite this block on disk
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "subtitle": "Spouštíme již brzy. Na webu právě pracujeme.",
  "showParticles": true,
  "showOrbs": true,
  "letterStagger": 90,
  "logoFloat": true,
  "gradientSpeed": 40,
  "showProgress": true,
  "brandFont": "Outfit",
  "brandWeight": 600,
  "brandSpacing": 4
} /*EDITMODE-END*/;

const BRAND = "QUANTIXIS";

function ComingSoon() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [phase, setPhase] = useState(0);
  // 0: nothing, 1: logo in, 2: brand letters in, 3: subtitle in, 4: progress in

  useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 200);
    const t2 = setTimeout(() => setPhase(2), 1300);
    const t3 = setTimeout(() => setPhase(3), 1300 + BRAND.length * tweaks.letterStagger + 400);
    const t4 = setTimeout(() => setPhase(4), 1300 + BRAND.length * tweaks.letterStagger + 1100);
    return () => [t1, t2, t3, t4].forEach(clearTimeout);
  }, [tweaks.letterStagger]);

  return (
    <div className="qx-root">
      {/* Layered animated background */}
      <div
        className="qx-bg-base"
        style={{ animationDuration: `${tweaks.gradientSpeed}s` }} />
      
      {tweaks.showOrbs &&
      <div className="qx-orbs">
          <div className="qx-orb qx-orb-1" />
          <div className="qx-orb qx-orb-2" />
          <div className="qx-orb qx-orb-3" />
        </div>
      }
      <div className="qx-grain" />
      {tweaks.showParticles && <Particles count={40} />}

      {/* Center content */}
      <main className="qx-stage">
        <div className={`qx-logo-wrap ${phase >= 1 ? "in" : ""} ${tweaks.logoFloat ? "float" : ""}`}>
          <div className="qx-logo-glow" />
          <img src="assets/quantixis-logo.png" alt="Quantixis logo" className="qx-logo" draggable="false" />
        </div>

        <h1 className="qx-brand" aria-label={BRAND}
          style={{
            fontFamily: `"${tweaks.brandFont}", "Inter", system-ui, sans-serif`,
            fontWeight: tweaks.brandWeight,
            letterSpacing: `${tweaks.brandSpacing}px`
          }}>
          {BRAND.split("").map((ch, i) =>
          <span
            key={i}
            className={`qx-letter ${phase >= 2 ? "in" : ""}`}
            style={{ transitionDelay: `${i * tweaks.letterStagger}ms` }}>
            
              {ch}
            </span>
          )}
        </h1>

        <p className={`qx-subtitle ${phase >= 3 ? "in" : ""}`}>
          {tweaks.subtitle}
        </p>

        {tweaks.showProgress &&
        <div className={`qx-progress ${phase >= 4 ? "in" : ""}`} aria-hidden="true">
            <div className="qx-progress-bar" />
          </div>
        }
      </main>

      {/* Bottom corner sigil */}
      <footer className={`qx-foot ${phase >= 4 ? "in" : ""}`}>
        <span className="qx-dot" /> <span>© {new Date().getFullYear()} Quantixis</span>
      </footer>

      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </div>);

}

function Particles({ count }) {
  const items = useMemo(
    () =>
    Array.from({ length: count }).map((_, i) => ({
      left: Math.random() * 100,
      top: Math.random() * 100,
      size: 2 + Math.random() * 3,
      dur: 8 + Math.random() * 14,
      delay: -Math.random() * 20,
      opacity: 0.25 + Math.random() * 0.45,
      hue: Math.random() < 0.5 ? "violet" : "pink"
    })),
    [count]
  );
  return (
    <div className="qx-particles" aria-hidden="true">
      {items.map((p, i) =>
      <span
        key={i}
        className={`qx-particle qx-particle-${p.hue}`}
        style={{
          left: `${p.left}%`,
          top: `${p.top}%`,
          width: `${p.size}px`,
          height: `${p.size}px`,
          opacity: p.opacity,
          animationDuration: `${p.dur}s`,
          animationDelay: `${p.delay}s`
        }} />

      )}
    </div>);

}

function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typography">
        <TweakSelect
          label="Brand font"
          value={tweaks.brandFont}
          options={["Sora", "Manrope", "Outfit", "Inter", "Space Grotesk", "JetBrains Mono"]}
          onChange={(v) => setTweak("brandFont", v)} />
        <TweakSlider
          label="Weight"
          min={300}
          max={800}
          step={100}
          value={tweaks.brandWeight}
          onChange={(v) => setTweak("brandWeight", v)} />
        <TweakSlider
          label="Letter spacing (px)"
          min={0}
          max={20}
          step={1}
          value={tweaks.brandSpacing}
          onChange={(v) => setTweak("brandSpacing", v)} />
      </TweakSection>
      <TweakSection label="Texts">
        <TweakText
          label="Subtitle"
          value={tweaks.subtitle}
          onChange={(v) => setTweak("subtitle", v)} />
        
      </TweakSection>
      <TweakSection label="Animation">
        <TweakSlider
          label="Letter stagger (ms)"
          min={20}
          max={200}
          step={10}
          value={tweaks.letterStagger}
          onChange={(v) => setTweak("letterStagger", v)} />
        
        <TweakSlider
          label="Gradient speed (s)"
          min={6}
          max={40}
          step={1}
          value={tweaks.gradientSpeed}
          onChange={(v) => setTweak("gradientSpeed", v)} />
        
        <TweakToggle
          label="Logo float"
          value={tweaks.logoFloat}
          onChange={(v) => setTweak("logoFloat", v)} />
        
      </TweakSection>
      <TweakSection label="Background">
        <TweakToggle
          label="Glowing orbs"
          value={tweaks.showOrbs}
          onChange={(v) => setTweak("showOrbs", v)} />
        
        <TweakToggle
          label="Floating particles"
          value={tweaks.showParticles}
          onChange={(v) => setTweak("showParticles", v)} />
        
        <TweakToggle
          label="Progress bar"
          value={tweaks.showProgress}
          onChange={(v) => setTweak("showProgress", v)} />
        
      </TweakSection>
      <TweakSection label="Restart">
        <TweakButton label="Replay animation" onClick={() => window.location.reload()} />
      </TweakSection>
    </TweaksPanel>);

}

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