// Brevemente — coming soon / teaser page for Minilands launch.
// Fullscreen layout: sky background, countdown to launch, key art, pre-register CTA.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "launchDateISO": "2026-08-15T18:00:00Z",
  "showFloatingBlocks": true,
  "phase": "Beta Fechado · Verão 2026",
  "youtubeId": "GrAPLnNLtjU",
  "showBossBackground": true,
  "bossOpacity": 0.55
}/*EDITMODE-END*/;

// ---------- Countdown ----------
const useCountdown = (targetISO) => {
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const target = new Date(targetISO).getTime();
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86_400_000);
  const hours = Math.floor((diff % 86_400_000) / 3_600_000);
  const minutes = Math.floor((diff % 3_600_000) / 60_000);
  const seconds = Math.floor((diff % 60_000) / 1000);
  return { days, hours, minutes, seconds, done: diff === 0 };
};

const FlipCard = ({ value, label }) => (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
    <div style={{
      position: 'relative',
      width: 132, height: 148,
      background: 'linear-gradient(180deg, #1a2c5c 0%, #0a1530 50%, #050a1c 100%)',
      border: '4px solid #1a0e04',
      borderRadius: 10,
      boxShadow:
        'inset 0 3px 0 rgba(255,255,255,0.12), inset 0 -6px 0 rgba(0,0,0,0.5),' +
        ' 0 8px 0 #06091a, 0 14px 24px rgba(0,0,0,0.6),' +
        ' 0 0 32px rgba(247, 201, 59, 0.18)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }}>
      {/* horizontal split line through middle (flip-clock seam) */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: '50%',
        height: 2, background: 'rgba(0,0,0,0.55)',
        boxShadow: '0 1px 0 rgba(255,255,255,0.06)',
      }} />
      <span className="bevel-text-gold" style={{
        fontSize: 88,
        lineHeight: 1,
        letterSpacing: '0.02em',
      }}>
        {String(value).padStart(2, '0')}
      </span>
    </div>
    <span style={{
      fontFamily: "'Luckiest Guy', cursive",
      fontSize: 16,
      letterSpacing: '0.18em',
      color: '#f7c93b',
      textShadow: '0 2px 0 #000, 0 0 12px rgba(247,201,59,0.4)',
    }}>{label}</span>
  </div>
);

const CountdownColon = () => (
  <div style={{
    display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 14,
    paddingBottom: 32,
  }}>
    <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#f7c93b', boxShadow: '0 0 10px #f7c93b' }} />
    <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#f7c93b', boxShadow: '0 0 10px #f7c93b' }} />
  </div>
);

// ---------- Floating decorative blocks ----------
const FloatingBlocks = () => {
  // Each block is a small isometric voxel cube floating + gently drifting.
  const blocks = [
    { x: '6%',  y: '14%', size: 56, delay: 0,    type: 'grass' },
    { x: '12%', y: '68%', size: 42, delay: 1.2,  type: 'gold'  },
    { x: '88%', y: '22%', size: 48, delay: 0.6,  type: 'gold'  },
    { x: '92%', y: '74%', size: 60, delay: 2.0,  type: 'grass' },
    { x: '78%', y: '8%',  size: 32, delay: 3.0,  type: 'magic' },
    { x: '4%',  y: '46%', size: 36, delay: 1.8,  type: 'magic' },
  ];
  const top = (t) => t === 'grass' ? '#7cd23e' : t === 'gold' ? '#fde583' : '#d57bff';
  const topD = (t) => t === 'grass' ? '#3e8917' : t === 'gold' ? '#c8941b' : '#7c2dd6';
  const left = (t) => t === 'grass' ? '#6abe30' : t === 'gold' ? '#f7c93b' : '#b14cff';
  const right = (t) => t === 'grass' ? '#3e8917' : t === 'gold' ? '#c8941b' : '#7c2dd6';

  return (
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 1,
    }}>
      {blocks.map((b, i) => {
        const s = b.size;
        return (
          <svg key={i} width={s} height={s * 1.1} viewBox="0 0 60 66" style={{
            position: 'absolute', left: b.x, top: b.y,
            animation: `float-${i} ${6 + (i % 3)}s ease-in-out infinite`,
            animationDelay: `${b.delay}s`,
            filter: 'drop-shadow(0 8px 12px rgba(0,0,0,0.4))',
          }}>
            {/* top diamond */}
            <polygon points="30,2 58,18 30,34 2,18" fill={top(b.type)} stroke="#000" strokeWidth="1.5" />
            {/* top dark dots for grass texture */}
            {b.type === 'grass' && (
              <>
                <rect x="14" y="14" width="4" height="4" fill={topD(b.type)} />
                <rect x="38" y="10" width="4" height="4" fill={topD(b.type)} />
                <rect x="26" y="22" width="4" height="4" fill={topD(b.type)} />
              </>
            )}
            {/* left face */}
            <polygon points="2,18 30,34 30,62 2,46" fill={left(b.type)} stroke="#000" strokeWidth="1.5" />
            {/* right face (darker) */}
            <polygon points="58,18 30,34 30,62 58,46" fill={right(b.type)} stroke="#000" strokeWidth="1.5" />
          </svg>
        );
      })}
      <style>{`
        ${blocks.map((b, i) => `
          @keyframes float-${i} {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(${i % 2 === 0 ? -16 : -10}px) rotate(${i % 2 === 0 ? 4 : -3}deg); }
          }
        `).join('')}
      `}</style>
    </div>
  );
};

// ---------- Cloud row (parallax-ish, pure CSS) ----------
const Clouds = () => (
  <div aria-hidden="true" style={{
    position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 0,
  }}>
    {[
      { x: '-10%', y: '12%', s: 1.0, dur: 80, op: 0.85 },
      { x: '40%',  y: '6%',  s: 0.7, dur: 110, op: 0.7 },
      { x: '70%',  y: '22%', s: 1.2, dur: 95, op: 0.65 },
      { x: '20%',  y: '34%', s: 0.8, dur: 130, op: 0.55 },
    ].map((c, i) => (
      <div key={i} style={{
        position: 'absolute', left: c.x, top: c.y,
        opacity: c.op,
        animation: `drift-${i} ${c.dur}s linear infinite`,
        transform: `scale(${c.s})`,
      }}>
        <svg width="220" height="80" viewBox="0 0 220 80">
          {/* chunky pixel cloud */}
          <g fill="#fff" stroke="#bcd7e8" strokeWidth="2">
            <rect x="20" y="32" width="180" height="32" />
            <rect x="40" y="20" width="60" height="12" />
            <rect x="110" y="14" width="80" height="18" />
            <rect x="30" y="64" width="160" height="6" fill="#dbe9f3" stroke="none" />
          </g>
        </svg>
      </div>
    ))}
    <style>{`
      ${[80, 110, 95, 130].map((dur, i) => `
        @keyframes drift-${i} {
          from { transform: translateX(0) scale(${[1.0,0.7,1.2,0.8][i]}); }
          to { transform: translateX(120vw) scale(${[1.0,0.7,1.2,0.8][i]}); }
        }
      `).join('')}
    `}</style>
  </div>
);

// ---------- Main page ----------
const BrevementePage = () => {
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [tw, setTw] = t;
  const { days, hours, minutes, seconds, done } = useCountdown(tw.launchDateISO);

  return (
    <div style={{
      minHeight: '100vh',
      position: 'relative',
      background:
        'radial-gradient(ellipse at 50% 100%, #4a9ee0 0%, #2563b8 35%, #0e1a3a 75%, #07102a 100%)',
      overflow: 'hidden',
    }}>
      {/* Sky: clouds */}
      <Clouds />
      <style>{`
        @keyframes glow-ring {
          0%, 100% { box-shadow: 0 0 0 6px rgba(247,201,59,0.35), 0 0 60px rgba(247,201,59,0.45), 0 20px 60px rgba(0,0,0,0.6); }
          50% { box-shadow: 0 0 0 10px rgba(247,201,59,0.5), 0 0 90px rgba(247,201,59,0.7), 0 20px 60px rgba(0,0,0,0.6); }
        }
      `}</style>
      {/* Floating decoration */}
      {tw.showFloatingBlocks && <FloatingBlocks />}

      {/* Vignette ground (silhouetted hills bottom) */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 180,
        background:
          'linear-gradient(180deg, rgba(14, 26, 58, 0) 0%, rgba(14, 26, 58, 0.6) 30%, rgba(7, 16, 42, 1) 100%)',
        zIndex: 1,
      }} />
      {/* Pixel ground silhouette */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 64,
        zIndex: 2,
      }}>
        <svg width="100%" height="64" viewBox="0 0 1600 64" preserveAspectRatio="none">
          <path d="M0,64 L0,40 L80,40 L80,32 L160,32 L160,40 L240,40 L240,28 L360,28 L360,40 L460,40 L460,32 L560,32 L560,44 L660,44 L660,28 L780,28 L780,36 L880,36 L880,28 L980,28 L980,40 L1080,40 L1080,32 L1180,32 L1180,28 L1280,28 L1280,40 L1400,40 L1400,32 L1500,32 L1500,40 L1600,40 L1600,64 Z"
            fill="#0a1f04" stroke="#1c4a08" strokeWidth="2" />
        </svg>
      </div>

      {/* Top bar: just the brand mark, links back to index */}
      <header style={{
        position: 'relative', zIndex: 10,
        padding: '24px 0',
      }}>
        <div className="container" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        }}>
          <a href="index.html" style={{ textDecoration: 'none' }}>
            <span className="bevel-text-gold" style={{
              fontSize: 28, letterSpacing: '0.04em', lineHeight: 1, display: 'inline-block',
            }}>
              MINILANDS
            </span>
          </a>
          <a href="index.html" style={{
            fontFamily: "'Fredoka', sans-serif", fontWeight: 700,
            fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.85)', textShadow: '0 2px 0 rgba(0,0,0,0.5)',
            padding: '8px 14px', border: '2px solid rgba(247,201,59,0.4)', borderRadius: 8,
            background: 'rgba(0,0,0,0.3)', textDecoration: 'none',
          }}>
            ← Voltar ao site
          </a>
        </div>
      </header>

      {/* Content */}
      <main style={{
        position: 'relative', zIndex: 5,
        padding: '40px 0 220px',
      }}>
        <div className="container" style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
          gap: 36,
        }}>
          {/* Hero: circular logo with glow */}
          <div style={{
            position: 'relative',
            width: 'min(380px, 70vw)',
            aspectRatio: '1 / 1',
            borderRadius: '50%',
            animation: 'glow-ring 4s ease-in-out infinite',
          }}>
            <img src="assets/minilands-circle-logo.png" alt="Minilands — New Game" style={{
              display: 'block', width: '100%', height: '100%',
              borderRadius: '50%',
            }} />
          </div>

          {/* Title */}
          <h1 style={{ margin: 0 }}>
            <span className="bevel-text-gold" style={{
              fontSize: 'clamp(56px, 9vw, 128px)',
              lineHeight: 0.92,
              display: 'block',
            }}>
              BREVEMENTE
            </span>
          </h1>

          {/* Tagline */}
          <p style={{
            maxWidth: 720,
            fontFamily: "'Fredoka', sans-serif",
            fontWeight: 600,
            fontSize: 22,
            lineHeight: 1.4,
            color: '#e9f2ff',
            textShadow: '0 2px 0 rgba(0,0,0,0.5), 0 0 12px rgba(0,0,0,0.4)',
            margin: 0,
            textWrap: 'pretty',
          }}>
            Um mundo voxel infinito está a ser construído, bloco a bloco.
            Junta-te a milhares de aventureiros e sê dos primeiros a explorar Miniland.
          </p>

          {/* Countdown removed — social links only */}

          {/* YouTube teaser */}
          <div data-screen-label="teaser-section" style={{
            width: '100%',
            maxWidth: 880,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
            marginTop: 8,
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '8px 16px',
              fontFamily: "'Luckiest Guy', cursive",
              fontSize: 16, letterSpacing: '0.16em',
              color: '#fff',
              background: 'linear-gradient(180deg, #ff2e2e 0%, #b00b0b 100%)',
              border: '3px solid #1a0e04',
              borderRadius: 8,
              boxShadow: 'inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -3px 0 rgba(0,0,0,0.3), 0 4px 0 #1a0e04, 0 8px 16px rgba(0,0,0,0.5)',
              textShadow: '0 2px 0 rgba(0,0,0,0.6)',
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z" />
              </svg>
              VÊ O TEASER OFICIAL
            </div>

            <div style={{
              position: 'relative',
              width: '100%',
              aspectRatio: '16 / 9',
              borderRadius: 12,
              overflow: 'hidden',
              border: '4px solid #1a0e04',
              background: '#000',
              boxShadow:
                'inset 0 3px 0 rgba(255,255,255,0.1),' +
                ' 0 8px 0 #06091a, 0 18px 40px rgba(0,0,0,0.7),' +
                ' 0 0 60px rgba(247,201,59,0.25)',
            }}>
              <iframe
                src={`https://www.youtube-nocookie.com/embed/${tw.youtubeId}?rel=0&modestbranding=1`}
                title="Minilands — Teaser"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
                referrerPolicy="strict-origin-when-cross-origin"
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%',
                  border: 0,
                }}
              />
            </div>

            <a
              href={`https://www.youtube.com/watch?v=${tw.youtubeId}`}
              style={{
                fontFamily: "'Fredoka', sans-serif", fontWeight: 600,
                fontSize: 14, letterSpacing: '0.06em',
                color: 'rgba(255,255,255,0.8)',
                textDecoration: 'underline',
                textShadow: '0 2px 0 rgba(0,0,0,0.5)',
              }}
            >
              Ver no YouTube ↗
            </a>
          </div>

          {done && (
            <p className="bevel-text-green" style={{ fontSize: 36, marginTop: 4 }}>
              JÁ DISPONÍVEL!
            </p>
          )}

          {/* Social links — Discord, Instagram, Reddit */}
          <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', justifyContent: 'center', marginTop: 16 }}>
            {[
              {
                href: 'https://discord.gg/s9kBPrfay',
                label: 'Discord',
                color: '#5865f2',
                colorDeep: '#3a44ad',
                icon: (
                  <svg width="34" height="34" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M20.317 4.369A19.79 19.79 0 0 0 16.558 3a14.6 14.6 0 0 0-.643 1.32 18.27 18.27 0 0 0-5.487 0A12.5 12.5 0 0 0 9.785 3a19.74 19.74 0 0 0-3.76 1.369C2.475 9.74 1.515 14.97 1.995 20.13a19.94 19.94 0 0 0 6.075 3.075c.49-.66.927-1.36 1.305-2.1a13 13 0 0 1-2.055-.99c.172-.127.34-.26.504-.397a14.27 14.27 0 0 0 12.36 0c.165.137.333.27.504.397-.66.39-1.35.72-2.07.99.378.74.815 1.44 1.305 2.1a19.92 19.92 0 0 0 6.09-3.075c.6-6.045-.93-11.226-3.69-15.762zM8.52 17.085c-1.215 0-2.22-1.118-2.22-2.49 0-1.373.99-2.49 2.22-2.49 1.245 0 2.235 1.117 2.22 2.49 0 1.372-.99 2.49-2.22 2.49zm6.96 0c-1.215 0-2.22-1.118-2.22-2.49 0-1.373.99-2.49 2.22-2.49 1.245 0 2.235 1.117 2.22 2.49 0 1.372-.975 2.49-2.22 2.49z" />
                  </svg>
                ),
              },
              {
                href: 'https://instagram.com/minilandsgame',
                label: 'Instagram',
                color: '#e1306c',
                colorDeep: '#8a1d44',
                icon: (
                  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <rect x="3" y="3" width="18" height="18" rx="5" />
                    <circle cx="12" cy="12" r="4" />
                    <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none" />
                  </svg>
                ),
              },
              {
                href: 'https://www.reddit.com/r/MiniLandsGame/',
                label: 'Reddit',
                color: '#ff4500',
                colorDeep: '#a82d00',
                icon: (
                  <svg width="34" height="34" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M22 12.07c0-1.21-.99-2.2-2.2-2.2-.59 0-1.13.23-1.52.62a10.7 10.7 0 0 0-5.84-1.85l1-4.7 3.27.69a1.57 1.57 0 1 0 .16-.91l-3.65-.77a.46.46 0 0 0-.55.36l-1.11 5.23a10.7 10.7 0 0 0-5.92 1.85 2.2 2.2 0 1 0-2.42 3.6 4.4 4.4 0 0 0-.05.66c0 3.36 3.91 6.08 8.74 6.08s8.74-2.72 8.74-6.08c0-.22-.02-.44-.05-.66.69-.4 1.16-1.14 1.16-2.02zM7 13.7a1.55 1.55 0 1 1 3.1 0 1.55 1.55 0 0 1-3.1 0zm8.93 4.07c-1.07 1.07-3.12 1.16-3.93 1.16s-2.86-.09-3.93-1.16a.43.43 0 1 1 .61-.6c.68.68 2.13.92 3.32.92s2.64-.24 3.32-.92a.43.43 0 1 1 .61.6zM15.45 15.25a1.55 1.55 0 1 1 0-3.1 1.55 1.55 0 0 1 0 3.1z" />
                  </svg>
                ),
              },
            ].map(s => (
              <a key={s.href} href={s.href} target={s.href.startsWith('http') ? '_blank' : undefined} rel={s.href.startsWith('http') ? 'noopener noreferrer' : undefined} style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
                padding: '22px 28px',
                minWidth: 140,
                fontFamily: "'Luckiest Guy', cursive",
                fontSize: 18, letterSpacing: '0.06em',
                color: '#fff', textShadow: '0 2px 0 rgba(0,0,0,0.6)',
                background: `linear-gradient(180deg, ${s.color} 0%, ${s.colorDeep} 100%)`,
                border: '3px solid #1a0e04',
                borderRadius: 12,
                textDecoration: 'none',
                boxShadow:
                  `inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -3px 0 rgba(0,0,0,0.3),` +
                  ` 0 6px 0 #1a0e04, 0 12px 20px rgba(0,0,0,0.5)`,
                transition: 'all 120ms ease-out',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = `inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.3), 0 8px 0 #1a0e04, 0 16px 26px rgba(0,0,0,0.6), 0 0 30px ${s.color}66`;
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = `inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -3px 0 rgba(0,0,0,0.3), 0 6px 0 #1a0e04, 0 12px 20px rgba(0,0,0,0.5)`;
                }}
              >
                <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{s.icon}</span>
                <span>{s.label}</span>
              </a>
            ))}
          </div>

          {/* Tiny social/footer line */}
          <div style={{
            marginTop: 40,
            fontFamily: "'Fredoka', sans-serif", fontSize: 13, letterSpacing: '0.08em',
            color: 'rgba(255,255,255,0.5)',
          }}>
            <span style={{ marginRight: 18 }}>© 2026 Minilands Studios</span>
            <a href="termos.html" style={{ marginRight: 14, color: 'inherit', textDecoration: 'underline' }}>Termos</a>
            <a href="privacidade.html" style={{ color: 'inherit', textDecoration: 'underline' }}>Privacidade</a>
          </div>
        </div>
      </main>

      {/* Tweaks */}
      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection title="Lançamento">
            <window.TweakText
              label="Data de lançamento (ISO)"
              value={tw.launchDateISO}
              onChange={(v) => setTw('launchDateISO', v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Decoração">
            <window.TweakToggle
              label="Blocos flutuantes"
              value={tw.showFloatingBlocks}
              onChange={(v) => setTw('showFloatingBlocks', v)}
            />
          </window.TweakSection>
          <window.TweakSection title="Teaser">
            <window.TweakText
              label="ID do vídeo YouTube"
              value={tw.youtubeId}
              onChange={(v) => setTw('youtubeId', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<BrevementePage />);
