// app.jsx — Robin 40 invitation

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "polaroid",
  "palette": ["#ECFEFF", "#67E8F9", "#A7F3D0", "#FBCFE8"],
  "showConfetti": true
} /*EDITMODE-END*/;

const EVENT = {
  name: "Robin Bortlík",
  bornISO: "1986-08-10",
  whenISO: "2026-09-12T15:30:00+02:00",
  whenLabel: "sobota 12. září 2026",
  timeLabel: "15:30",
  placeName: "Restaurace Dolní Dvůr",
  placeNote: "Sraz na zahrádce, jestli vyjde počasí."
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette to CSS vars
  React.useEffect(() => {
    const [cream, coral, orange, yellow] = t.palette;
    const root = document.documentElement;
    root.style.setProperty('--cream', cream);
    root.style.setProperty('--coral', coral);
    root.style.setProperty('--orange', orange);
    root.style.setProperty('--yellow', yellow);
    document.body.style.background = cream;
  }, [t.palette]);

  const Variant = t.variant === 'filmstrip' ? VariantFilmstrip :
  t.variant === 'bigyear' ? VariantBigYear :
  VariantPolaroid;

  return (
    <>
      <CountdownPill targetISO={EVENT.whenISO} />
      <Hero showConfetti={t.showConfetti} data-comment-anchor="7736e03bc1-div-158-9" />
      <TimelineIntro />
      <Variant items={TIMELINE} />
      <Details />

      <TweaksPanel>
        <TweakSection label="Scroll efekt" />
        <TweakSelect
          label="Varianta"
          value={t.variant}
          options={[
          { value: 'polaroid', label: 'Polaroidy (létající)' },
          { value: 'filmstrip', label: 'Filmový pás' },
          { value: 'bigyear', label: 'Obří rok v pozadí' }]
          }
          onChange={(v) => setTweak('variant', v)} />
        
        <TweakSection label="Vzhled" />
        <TweakColor
          label="Paleta"
          value={t.palette}
          options={[
          ['#FFFBEB', '#FCA5A5', '#FDBA74', '#FDE68A'],
          ['#FDF2F8', '#F472B6', '#A78BFA', '#60A5FA'],
          ['#F0FDF4', '#86EFAC', '#FDE047', '#FB923C'],
          ['#ECFEFF', '#67E8F9', '#A7F3D0', '#FBCFE8']]
          }
          onChange={(v) => setTweak('palette', v)} />
        
        <TweakToggle
          label="Konfety v hero"
          value={t.showConfetti}
          onChange={(v) => setTweak('showConfetti', v)} />
        
      </TweaksPanel>
    </>);

}

function CountdownPill({ targetISO }) {
  const target = React.useMemo(() => new Date(targetISO).getTime(), [targetISO]);
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 30000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  return (
    <div data-comment-anchor="1520587561-header-83-5" style={{
      position: 'fixed', top: 18, right: 'clamp(16px, 3vw, 32px)', zIndex: 50,
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 16px',
      background: 'rgba(255, 253, 246, .82)',
      backdropFilter: 'blur(10px) saturate(160%)',
      WebkitBackdropFilter: 'blur(10px) saturate(160%)',
      border: '1px solid var(--line)',
      borderRadius: 999,
      boxShadow: '0 4px 20px -8px rgba(42,24,16,.25)',
      fontSize: 13,
      color: 'var(--ink-soft)',
    }} data-comment-anchor="b83d557052-section-260-5">
      <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--coral-deep)', display: 'inline-block', animation: 'pulse 2s ease-in-out infinite' }} />
      <span className="mono" style={{ letterSpacing: '.14em', textTransform: 'uppercase', fontSize: 10, color: 'var(--ink-soft)' }}>do oslavy</span>
      <span className="h-display" style={{ fontSize: 18, color: 'var(--ink)', fontVariantNumeric: 'tabular-nums', fontWeight: 700 }}>{days}</span>
      <span style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{days === 1 ? 'den' : days >= 2 && days <= 4 ? 'dny' : 'dní'}</span>
      <style>{`@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }`}</style>
    </div>);

}

function Hero({ showConfetti }) {
  return (
    <section style={{
      minHeight: '100vh', position: 'relative',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: 'clamp(40px, 8vh, 100px) clamp(20px, 5vw, 80px)',
      overflow: 'hidden'
    }}>
      {showConfetti && <HeroConfetti />}

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto', width: '100%' }}>
        <div className="h-hand" style={{
          fontSize: 'clamp(28px, 3.2vw, 48px)',
          color: 'var(--coral-deep)',
          marginBottom: 12,
          transform: 'rotate(-2deg)',
          display: 'inline-block'
        }}>
          Hej, kámo —
        </div>

        <h1 className="h-display" style={{
          fontSize: 'clamp(60px, 10vw, 180px)',
          margin: 0,
          color: 'var(--ink)',
          maxWidth: '14ch',
        }} data-comment-anchor="417ec58298-h1-126-9">
          Přijď se mnou
          <br />
          oslavit{' '}
          <span style={{
            display: 'inline-block', position: 'relative',
            color: 'var(--ink)'
          }}>
            <span style={{
              position: 'absolute', inset: '0 -.04em',
              background: 'var(--yellow)', zIndex: -1,
              transform: 'rotate(-1.5deg) translateY(.08em)',
              borderRadius: 8
            }} />
            mojí&nbsp;40.
          </span>
        </h1>

        <div data-comment-anchor="80e413d4f0-div-167-9" style={{
          marginTop: 'clamp(40px, 8vh, 96px)',
          display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8,
        }}>
          <a href="#timeline-anchor" aria-label="Scrolluj dolů" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 'clamp(96px, 11vw, 160px)', height: 'clamp(96px, 11vw, 160px)',
            borderRadius: 999,
            background: 'var(--ink)', color: 'var(--cream)',
            textDecoration: 'none', fontSize: 'clamp(40px, 5vw, 72px)',
            boxShadow: '0 18px 40px -16px rgba(42,24,16,.45)',
            animation: 'bob 2.4s ease-in-out infinite',
          }}>↓</a>
          <span className="h-hand" style={{
            fontSize: 'clamp(22px, 2.4vw, 32px)',
            color: 'var(--coral-deep)',
            transform: 'rotate(-3deg) translateX(8px)',
            display: 'inline-block',
          }}>scrolluj a uvidíš celou cestu</span>
          <style>{`@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(10px) } }`}</style>
        </div>
      </div>
      <div id="timeline-anchor" style={{ position: 'absolute', bottom: 0 }} />

      {/* Floating shapes */}
      <div aria-hidden style={{
        position: 'absolute', right: '-6%', top: '12%',
        width: 'clamp(160px, 22vw, 320px)', height: 'clamp(160px, 22vw, 320px)',
        borderRadius: 999, background: 'var(--coral)', opacity: .35,
        filter: 'blur(2px)'
      }} />
      <div aria-hidden style={{
        position: 'absolute', right: '8%', top: '8%',
        width: 64, height: 64,
        background: 'var(--orange)', transform: 'rotate(18deg)',
        borderRadius: 4
      }} />
      <div aria-hidden style={{
        position: 'absolute', left: '4%', bottom: '8%',
        width: 'clamp(80px, 12vw, 180px)', height: 'clamp(80px, 12vw, 180px)',
        background: 'var(--yellow)', borderRadius: '40% 60% 70% 30%',
        transform: 'rotate(20deg)'
      }} />
    </section>);

}

function TimelineIntro() {
  return (
    <section style={{
      padding: 'clamp(80px, 14vh, 160px) clamp(20px, 5vw, 80px) clamp(40px, 6vh, 80px)',
      maxWidth: 1280, margin: '0 auto',
    }}>
      <div className="mono" style={{
        fontSize: 12, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--ink-soft)'
      }}>02 — Časová osa</div>
      <h2 className="h-display" style={{
        fontSize: 'clamp(56px, 11vw, 180px)',
        margin: '12px 0 0',
        lineHeight: .92,
      }}>
        Jak šel{' '}
        <em style={{
          fontStyle: 'italic', color: 'var(--coral-deep)',
          fontFamily: 'var(--hand)', fontWeight: 600,
        }}>život</em>.
      </h2>
    </section>
  );
}

function HeroConfetti() {
  const dots = React.useMemo(() => {
    const arr = [];let s = 1986;
    const rand = () => {s = (s * 9301 + 49297) % 233280;return s / 233280;};
    for (let i = 0; i < 40; i++) {
      arr.push({
        x: rand() * 100, y: rand() * 100,
        r: 6 + rand() * 14, rot: rand() * 360,
        c: ['var(--coral)', 'var(--orange)', 'var(--yellow)', 'var(--sage)', 'var(--sky)', 'var(--pink)'][Math.floor(rand() * 6)],
        shape: Math.floor(rand() * 4),
        delay: rand() * 4
      });
    }
    return arr;
  }, []);
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1, opacity: .65 }}>
      {dots.map((d, i) =>
      <div key={i} style={{
        position: 'absolute',
        left: `${d.x}%`, top: `${d.y}%`,
        width: d.r * 2, height: d.r * 2,
        background: d.c,
        borderRadius: d.shape === 0 ? '999px' : d.shape === 1 ? '2px' : d.shape === 2 ? '40% 60% 70% 30%' : '4px',
        transform: `rotate(${d.rot}deg)`,
        animation: `float ${6 + d.shape}s ease-in-out ${d.delay}s infinite alternate`
      }} />
      )}
      <style>{`@keyframes float { from { transform: translateY(0) rotate(0deg) } to { transform: translateY(-22px) rotate(18deg) } }`}</style>
    </div>);

}

function KeyFact({ label, value, sub }) {
  return (
    <div>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: '.22em', textTransform: 'uppercase',
        color: 'var(--ink-soft)', marginBottom: 6
      }}>{label}</div>
      <div className="h-display" style={{ fontSize: 'clamp(20px, 2vw, 28px)', lineHeight: 1.05 }}>{value}</div>
      <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 2 }}>{sub}</div>
    </div>);

}

function Countdown({ targetISO }) {
  const target = React.useMemo(() => new Date(targetISO).getTime(), [targetISO]);
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const s = Math.floor(diff / 1000);
  const days = Math.floor(s / 86400);
  const hours = Math.floor(s % 86400 / 3600);
  const mins = Math.floor(s % 3600 / 60);
  const secs = s % 60;

  return (
    <section id="countdown" style={{
      padding: 'clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px)',
      background: 'linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%)',
      borderTop: '1px dashed var(--line)',
      borderBottom: '1px dashed var(--line)'
    }} data-comment-anchor="b83d557052-section-260-5">
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="h-hand" style={{ fontSize: 'clamp(28px, 3vw, 44px)', color: 'var(--coral-deep)' }}>
          Do čtyřicítky zbývá…
        </div>
        <div style={{
          marginTop: 24,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
          gap: 'clamp(8px, 1.5vw, 20px)'
        }}>
          <CountCell n={days} label="dní" />
          <CountCell n={hours} label="hodin" />
          <CountCell n={mins} label="minut" />
          <CountCell n={secs} label="vteřin" pulse />
        </div>
      </div>
    </section>);

}

function CountCell({ n, label, pulse }) {
  return (
    <div style={{
      background: '#fffdf6',
      border: '1px solid var(--line)',
      borderRadius: 20,
      padding: 'clamp(16px, 2.5vw, 32px) clamp(12px, 2vw, 24px)',
      boxShadow: '0 8px 20px -16px rgba(42,24,16,.3)',
      textAlign: 'left'
    }}>
      <div className="h-display" style={{
        fontSize: 'clamp(56px, 9vw, 140px)',
        fontVariantNumeric: 'tabular-nums',
        color: 'var(--ink)',
        lineHeight: .9
      }}>{String(n).padStart(2, '0')}</div>
      <div className="mono" style={{
        marginTop: 8, fontSize: 12, letterSpacing: '.18em', textTransform: 'uppercase',
        color: 'var(--ink-soft)'
      }}>{label}{pulse ? ' ·' : ''}</div>
    </div>);

}

function Details() {
  return (
    <section id="detaily" style={{
      padding: 'clamp(80px, 14vh, 160px) clamp(20px, 5vw, 80px)',
      maxWidth: 1280, margin: '0 auto'
    }}>
      <div className="mono" style={{
        fontSize: 12, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--ink-soft)'
      }}>03 — Pojď taky</div>
      <h2 className="h-display" style={{
        fontSize: 'clamp(48px, 7vw, 120px)',
        margin: '12px 0 32px'
      }}>
        Detaily<br />a <em style={{ fontStyle: 'italic', color: 'var(--coral-deep)' }}>RSVP</em>.
      </h2>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 'clamp(12px, 1.6vw, 20px)'
      }}>
        <DetailCard
          tag="Kdy"
          title={EVENT.whenLabel}
          big={EVENT.timeLabel}
          note="Začínáme odpoledne, končíme až ráno."
          bg="var(--yellow)" />
        
        <DetailCard
          tag="Kde"
          title={EVENT.placeName}
          big="Šilheřovice"
          note={EVENT.placeNote}
          bg="var(--coral)" />

        <DetailCard
          tag="Dress code"
          title="Cokoliv je ti pohodlné"
          big="a cítíš se v tom dobře."
          note=""
          bg="var(--orange)" />

        <DetailCard
          tag="Dárky"
          title="Tvá přítomnost stačí"
          big="Žádné starosti"
          note="Jen prosím né alkohol"
          bg="var(--sage)" />
        
      </div>

      <div style={{
        marginTop: 'clamp(40px, 6vh, 72px)',
        padding: 'clamp(24px, 4vw, 48px)',
        background: '#fffdf6',
        border: '1px solid var(--line)',
        borderRadius: 24,
        display: 'flex', flexDirection: 'column', gap: 20
      }}>
        <div className="h-hand" style={{ fontSize: 36, color: 'var(--coral-deep)' }}>Dej vědět, jestli dorazíš →</div>
        <p style={{ margin: 0, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
          Stačí krátká zpráva do <strong>31. srpna 2026</strong>, ať vím s kým a kolika porcemi guláše počítat.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href="mailto:robinbortlik@gmail.com?subject=Přijdu%20na%2040ku!" style={btnPrimary}>Napsat e-mail</a>
          <a href="tel:+420724528829" style={btnGhost}>Zavolat</a>
          <button type="button" onClick={downloadInvite} style={btnGhost}>Přidat do kalendáře</button>
          <a href="https://www.google.com/maps/place/Restaurace+Doln%C3%AD+dv%C5%AFr/@49.9290348,18.2767968,775m/data=!3m2!1e3!4b1!4m6!3m5!1s0x471158e3f7ad27b9:0x490416774dc6b603!8m2!3d49.9290314!4d18.2816677!16s%2Fg%2F1thzsj9v?entry=ttu&g_ep=EgoyMDI2MDUxMC4wIKXMDSoASAFQAw%3D%3D" target="_blank" rel="noreferrer" style={btnGhost}>Najít na mapě</a>
        </div>
      </div>
    </section>);

}

function DetailCard({ tag, title, big, note, bg, allowEmoji }) {
  return (
    <div style={{
      background: bg,
      borderRadius: 20,
      padding: 'clamp(20px, 2.4vw, 32px)',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      minHeight: 220,
      color: 'var(--ink)'
    }}>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: '.24em', textTransform: 'uppercase',
        color: 'rgba(42,24,16,.65)'
      }}>{tag}</div>
      <div style={{ marginTop: 12 }}>
        <div className="h-display" style={{ fontSize: 'clamp(24px, 2.2vw, 32px)', lineHeight: 1.05 }}>{title}</div>
        <div style={{
          marginTop: 6,
          fontFamily: allowEmoji ? 'var(--display)' : 'var(--display)',
          fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 700, letterSpacing: '-.01em', lineHeight: 1
        }}>{big}</div>
      </div>
      <div style={{ marginTop: 16, fontSize: 14, color: 'rgba(42,24,16,.75)' }}>{note}</div>
    </div>);

}

const btnPrimary = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  padding: '14px 22px',
  background: 'var(--ink)', color: 'var(--cream)',
  textDecoration: 'none', borderRadius: 999,
  fontWeight: 600, fontSize: 16
};
const btnGhost = {
  display: 'inline-flex', alignItems: 'center', gap: 8,
  padding: '14px 22px',
  background: 'transparent', color: 'var(--ink)',
  textDecoration: 'none', borderRadius: 999,
  fontWeight: 600, fontSize: 16,
  border: '1.5px solid var(--ink)',
  cursor: 'pointer', font: 'inherit',
};

function downloadInvite() {
  // 12. 9. 2026 15:30 → 13. 9. 2026 02:00 (Europe/Prague, CEST = UTC+2)
  const ics = [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//Robin 40//pozvanka//CS',
    'CALSCALE:GREGORIAN',
    'METHOD:PUBLISH',
    'BEGIN:VEVENT',
    'UID:robin-40-2026@pozvanka',
    'DTSTAMP:20260512T000000Z',
    'DTSTART:20260912T133000Z',
    'DTEND:20260913T000000Z',
    'SUMMARY:Robinova 40. narozeniny',
    'LOCATION:Restaurace Dolní Dvůr',
    'DESCRIPTION:Sraz na zahrádce\\, jestli vyjde počasí. Začínáme v 15:30\\, končíme až ráno.',
    'END:VEVENT',
    'END:VCALENDAR',
  ].join('\r\n');
  const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'robin-40-narozeniny.ics';
  document.body.appendChild(a);
  a.click();
  a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

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