// Post-submit thank you screen (from original-v3-w-thankyou; wired into single-page app).

function ThankYouPage({ t, onBack }) {
  const p = {
    ...t.p,
    accent2: t.p.accent2 != null ? t.p.accent2 : t.p.accent,
    accent2Soft: t.p.accent2Soft != null ? t.p.accent2Soft : t.p.accentSoft
  };
  const tt = { ...t, p };

  const refCode = React.useRef(
    typeof crypto !== 'undefined' && crypto.getRandomValues
      ? Array.from(crypto.getRandomValues(new Uint8Array(4)), (b) => b.toString(16).padStart(2, '0')).join('').toUpperCase()
      : Math.random().toString(36).slice(2, 8).toUpperCase()
  );

  const { shareHttps, shareDisplay } = React.useMemo(() => {
    try {
      const u = new URL(typeof window !== 'undefined' ? window.location.href : 'https://kitchentakeovers.sg/');
      u.searchParams.delete('thanks');
      u.hash = '';
      const https = u.toString();
      let disp = u.host + u.pathname;
      if (disp.endsWith('/')) disp = disp.slice(0, -1);
      const qs = u.search;
      if (qs) disp += qs;
      if (!disp) disp = 'kitchentakeovers.sg';
      return { shareHttps: https, shareDisplay: disp };
    } catch {
      return { shareHttps: 'https://kitchentakeovers.sg/', shareDisplay: 'kitchentakeovers.sg' };
    }
  }, []);

  const [copied, setCopied] = React.useState(false);
  const handleCopy = () => {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(shareHttps).then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 1800);
      }).catch(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 1800);
      });
    } else {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: tt.p.paper,
      color: tt.p.ink,
      fontFamily: tt.fonts.sans,
      display: 'flex',
      flexDirection: 'column'
    }}>

      <header style={{
        padding: '24px 48px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottom: `1px solid ${tt.p.line}`
      }}>
        <button type="button" onClick={onBack} style={{
          fontFamily: tt.fonts.serif,
          fontSize: 22,
          color: tt.p.ink,
          textDecoration: 'none',
          letterSpacing: '-0.01em',
          fontStyle: 'italic',
          background: 'none',
          border: 'none',
          padding: 0,
          cursor: 'pointer',
          textAlign: 'left'
        }}>
          Kitchen Takeovers
        </button>
        {/*
        <div style={{
          fontFamily: tt.fonts.mono,
          fontSize: 10,
          letterSpacing: '0.16em',
          color: tt.p.accent2,
          textTransform: 'uppercase',
          textAlign: 'right',
          maxWidth: 'min(100%, 280px)',
          lineHeight: 1.35
        }}>
          Expression of interest submitted
        </div>
        */}
      </header>

      <section className="kty-pad" style={{
        flex: '1 1 auto',
        padding: '80px 48px 100px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        maxWidth: 980,
        width: '100%',
        margin: '0 auto',
        boxSizing: 'border-box'
      }}>

        <div className="kty-fade-in" style={{
          fontFamily: tt.fonts.mono,
          fontSize: 11,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: tt.p.accent2,
          marginBottom: 28
        }}>
          ✶ &nbsp; You're on the list &nbsp; ✶
        </div>

        <h1 className="kty-h1 kty-fade-in d1" style={{
          fontFamily: tt.fonts.serif,
          letterSpacing: '-0.035em',
          lineHeight: 1.0,
          fontWeight: 400,
          margin: 0,
          maxWidth: 900,
          textWrap: 'balance'
        }}>
          Thanks <span style={{ fontStyle: 'italic', color: tt.p.accent }}>for sharing</span><br />
          your concept.
        </h1>

        <div className="kty-art-in" style={{
          width: '100%',
          maxWidth: 720,
          marginTop: 56,
          marginBottom: 8
        }}>
          <ThankYouArt palette={tt.p} />
        </div>

        <div className="kty-fade-in d2" style={{
          maxWidth: 580,
          marginTop: 24
        }}>
          <p style={{
            fontFamily: tt.fonts.serif,
            fontSize: 'clamp(20px, 2.4vw, 26px)',
            lineHeight: 1.4,
            color: tt.p.ink,
            letterSpacing: '-0.01em',
            margin: 0,
            textWrap: 'pretty'
          }}>
            We're still locking in timing and venue. We'll reach out as soon as there's a concrete next step for you.
          </p>
        </div>

        <div className="kty-fade-in d3" style={{ width: '100%', maxWidth: 540, marginTop: 56 }}>
          <div style={{
            fontFamily: tt.fonts.mono,
            fontSize: 11,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: tt.p.accent2,
            marginBottom: 14
          }}>
            Know someone who should apply?
          </div>
          <div style={{
            fontFamily: tt.fonts.serif,
            fontSize: 'clamp(22px, 2.6vw, 30px)',
            lineHeight: 1.25,
            letterSpacing: '-0.015em',
            color: tt.p.ink,
            marginBottom: 28,
            textWrap: 'balance'
          }}>
            <span style={{ fontStyle: 'italic', color: tt.p.accent }}>Pass it on!</span> We want to hear from all aspiring chefs.
          </div>

          <div className="kty-share" style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            border: `1.5px solid ${tt.p.ink}`,
            background: tt.p.paperDeep,
            padding: '14px 18px'
          }}>
            <div style={{
              fontFamily: tt.fonts.mono,
              fontSize: 10,
              letterSpacing: '0.14em',
              color: tt.p.mute,
              textTransform: 'uppercase'
            }}>
              Link
            </div>
            <div className="kty-share-link" style={{
              flex: 1,
              fontFamily: tt.fonts.mono,
              fontSize: 14,
              color: tt.p.ink,
              textAlign: 'left',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }}>
              {shareDisplay}
            </div>
            <button type="button" onClick={handleCopy} style={{
              background: copied ? tt.p.accent : tt.p.ink,
              color: tt.p.paper,
              border: 'none',
              padding: '8px 18px',
              fontFamily: tt.fonts.mono,
              fontSize: 11,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              cursor: 'pointer',
              transition: 'background 240ms ease',
              flexShrink: 0
            }}>
              {copied ? 'Copied ✓' : 'Copy'}
            </button>
          </div>

          {/*
          Share icons (Email / WhatsApp / X) — restore when re-enabling; also restore:
            const shareText = encodeURIComponent(`Kitchen Takeovers: ${shareHttps}`);
            const mailHref = `mailto:?subject=${encodeURIComponent('Kitchen Takeovers')}&body=${encodeURIComponent(`Thought you'd be into this: ${shareHttps}`)}`;
          <div style={{ display: 'flex', justifyContent: 'center', gap: 32, marginTop: 28, flexWrap: 'wrap' }}>
            {[ ... ].map(...)}
          </div>
          */}
          <div style={{
            marginTop: 28,
            fontFamily: tt.fonts.sans,
            fontSize: 15,
            lineHeight: 1.5,
            color: tt.p.inkSoft
          }}>
            Questions?{' '}
            <a href="mailto:hello@kitchentakeovers.sg" style={{ color: tt.p.ink, textDecoration: 'underline', textUnderlineOffset: 3 }}>
              hello@kitchentakeovers.sg
            </a>
          </div>
        </div>

        <div className="kty-fade-in d4" style={{ marginTop: 80 }}>
          <button type="button" onClick={onBack} style={{
            fontFamily: tt.fonts.mono,
            fontSize: 11,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: tt.p.mute,
            textDecoration: 'none',
            borderBottom: `1px solid ${tt.p.line}`,
            paddingBottom: 4,
            transition: 'color 200ms ease, border-color 200ms ease',
            background: 'none',
            borderTop: 'none',
            borderLeft: 'none',
            borderRight: 'none',
            cursor: 'pointer'
          }}
          onMouseEnter={(e) => { e.currentTarget.style.color = tt.p.ink; e.currentTarget.style.borderBottomColor = tt.p.ink; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = tt.p.mute; e.currentTarget.style.borderBottomColor = tt.p.line; }}>
            ← Back to home
          </button>
        </div>

      </section>

      <footer style={{
        padding: '28px 48px',
        borderTop: `1px solid ${tt.p.line}`,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontFamily: tt.fonts.mono,
        fontSize: 10,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: tt.p.mute,
        flexWrap: 'wrap',
        gap: 12
      }}>
        <span>Kitchen Takeovers</span>
        <span>Ref · {refCode.current}-2026</span>
      </footer>
    </div>);

}

Object.assign(window, { ThankYouPage });