// Confirmation.jsx — thank you state
function Confirmation({ submission, onReset }) {
  const { tier } = submission;
  const amount = submission.amount || tier.price || 0;
  const amountLabel = amount > 0 ? `$${amount.toLocaleString()}` : 'Custom amount';
  const sponsorName = submission.company || submission.name;
  const delivery = submission.delivery || {};
  const hasAddress = !!(submission.address || submission.city || submission.zip);
  const addressLine = hasAddress
    ? [submission.address, submission.city, submission.state, submission.zip].filter(Boolean).join(', ')
    : 'Not provided';
  const mailSubject = encodeURIComponent(`VHS Sponsorship Submission - ${sponsorName}`);
  const mailBody = encodeURIComponent([
    'VHS Boys Basketball Sponsorship Submission',
    '',
    `Tier: ${tier.name}`,
    `Amount: ${amountLabel}`,
    `Business: ${submission.company}`,
    `Recognition Name: ${submission.recognitionName || submission.company}`,
    `Contact: ${submission.name}`,
    `Email: ${submission.email}`,
    `Phone: ${submission.phone}`,
    `Website / Social: ${submission.website || 'Not provided'}`,
    'Payment: Booster team will contact sponsor directly',
    '',
    `Address: ${addressLine}`,
    '',
    `Logo / Recognition Notes: ${submission.logoNotes || 'None'}`,
  ].join('\n'));
  const mailto = `mailto:sponsor@viperbasketball.co?subject=${mailSubject}&body=${mailBody}`;

  const downloadReceipt = () => {
    const text = decodeURIComponent(mailBody);
    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `VHS-Sponsorship-${tier.id}-${Date.now()}.txt`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  };

  return (
    <section className="section" data-anchor id="confirm" style={{ minHeight: '90vh', display: 'grid', placeItems: 'center' }}>
      <div className="section-narrow" style={{ maxWidth: 720, textAlign: 'center' }}>
        {/* Chrome checkmark */}
        <div className="confirm-mark" style={{
          width: 96, height: 96,
          margin: '0 auto 32px',
          borderRadius: '50%',
          background: 'var(--chrome-gradient)',
          display: 'grid', placeItems: 'center',
          boxShadow:
            'inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.7)',
          border: '1px solid #fff',
        }}>
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
            <path d="M5 12.5L10 17.5L19 7" stroke="#0a0a0a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        <div className="eyebrow" style={{ marginBottom: 12 }}>Submission Received</div>
        <h2 className="chrome-text" style={{
          fontSize: 'clamp(56px, 9vw, 128px)', margin: 0,
        }}>Welcome to<br />the Pack</h2>

        <p style={{
          maxWidth: 560, margin: '24px auto 36px',
          fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6,
        }}>
          Thank you, <strong style={{ color: 'var(--viper-white)' }}>{sponsorName}</strong>.
          Your <strong style={{ color: 'var(--viper-white)' }}>{tier.name}</strong> sponsorship
          {' '}— <strong style={{ color: 'var(--viper-white)' }}>{amountLabel}</strong> — has been received.
        </p>

        {/* Plate showing tier */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 14,
          padding: '12px 24px',
          background: 'linear-gradient(180deg, #d8d8d8 0%, #9a9a9a 50%, #4a4a4a 100%)',
          color: '#0a0a0a',
          fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 13,
          textTransform: 'uppercase', letterSpacing: '0.2em',
          borderRadius: 4,
          boxShadow: 'var(--shadow-plate)',
          borderTop: '1px solid #f4f4f4',
          borderBottom: '1px solid #1a1a1a',
          marginBottom: 48,
        }}>
          <span>Confirmation</span>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#0a0a0a' }}></span>
          <span>VHS-{Date.now().toString().slice(-6)}</span>
        </div>

        {/* Next steps */}
        <div style={{
          textAlign: 'left',
          padding: '32px',
          background: 'linear-gradient(180deg, #161616 0%, #0a0a0a 100%)',
          border: '1px solid var(--border)',
          borderRadius: 6,
          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.5)',
          marginBottom: 32,
        }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>What Happens Next</div>
          <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {[
              ['01', 'Submission received', delivery.intake
                ? 'Your submission was added to the booster Mission Control pipeline for follow-up.'
                : delivery.emailed
                ? `A sponsor notification was sent, with ${submission.email} set as the reply-to contact.`
                : 'Use the Email the Team button below if you want to send a copy directly from your mail app.'],
              ['02', 'Booster team follow-up', 'Within 2 business days we\'ll reach out for your logo files and recognition details.'],
              ['03', 'Payment follow-up', 'No payment was collected on this page. We\'ll contact you directly to coordinate payment.'],
              ['04', 'Tax receipt', 'Mailed after season-end for your 501(c)(3) records.'],
            ].map(([num, title, desc]) => (
              <li key={num} style={{
                display: 'flex', gap: 18,
                padding: '14px 0',
                borderBottom: '1px solid var(--border)',
              }}>
                <span style={{
                  fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 24,
                  color: 'var(--fg-muted)', letterSpacing: '0.05em',
                  flexShrink: 0, lineHeight: 1.2,
                }}>{num}</span>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 13,
                    textTransform: 'uppercase', letterSpacing: '0.16em',
                    color: 'var(--viper-white)', marginBottom: 4,
                  }}>{title}</div>
                  <div style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.5 }}>{desc}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>

        {/* Contact */}
        <div style={{
          padding: '24px',
          border: '1px solid var(--border)',
          borderRadius: 6,
          marginBottom: 32,
          textAlign: 'left',
          background: 'rgba(0,0,0,0.4)',
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 24,
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Sponsorships & Golf</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22,
              textTransform: 'uppercase', letterSpacing: '0.02em', color: 'var(--viper-white)',
            }}>Doug Vigliano</div>
            <div style={{
              fontFamily: 'var(--font-heading)', fontSize: 11, color: 'var(--fg-3)',
              textTransform: 'uppercase', letterSpacing: '0.14em', marginTop: 4,
            }}>VP Sponsorships · Golf Chair</div>
            <div style={{
              marginTop: 14,
              fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg-2)',
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <span>Phone · 321-480-1393</span>
              <span>Email · sponsor@viperbasketball.co</span>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Treasurer · Payments</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22,
              textTransform: 'uppercase', letterSpacing: '0.02em', color: 'var(--viper-white)',
            }}>Brian Troska</div>
            <div style={{
              fontFamily: 'var(--font-heading)', fontSize: 11, color: 'var(--fg-3)',
              textTransform: 'uppercase', letterSpacing: '0.14em', marginTop: 4,
            }}>Checks payable to VHS BBC</div>
            <div style={{
              marginTop: 14,
              fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg-2)',
            }}>
              <span>Email · vhsboysbbtreasurer@gmail.com</span>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="viper-btn-ghost" onClick={onReset}>← Back to Sponsorships</button>
          <a className="viper-btn-ghost" href={mailto} style={{ textDecoration: 'none' }}>Email the Team</a>
          <button className="viper-btn-chrome" onClick={downloadReceipt}>Download Copy</button>
        </div>
      </div>
    </section>
  );
}