// page-contact.jsx — Contact channels
// Visual: switchboard / dispatch console. Channels stacked with SLA chips.

const CHANNELS = [
  {
    code: 'CH-01',
    label: 'GENERAL SUPPORT',
    address: 'hello@campsitesniper.com',
    sla: 'SAME DAY',
    note: 'Anything: bugs, missed alerts, account issues, feature ideas.',
    href: 'mailto:hello@campsitesniper.com',
  },
  {
    code: 'CH-02',
    label: 'REFUNDS & BILLING',
    address: 'refund@campsitesniper.com',
    sla: 'SAME DAY',
    note: 'Refunds, receipts, plan changes, tax questions.',
    href: 'mailto:refund@campsitesniper.com',
  },
  {
    code: 'CH-03',
    label: 'PRESS',
    address: 'hello@campsitesniper.com',
    sla: 'SAME DAY',
    note: 'Editorial inquiries, factsheets, founder availability. Subject line: PRESS.',
    href: 'mailto:hello@campsitesniper.com?subject=PRESS',
  },
  {
    code: 'CH-04',
    label: 'SECURITY DISCLOSURE',
    address: 'hello@campsitesniper.com',
    sla: 'SAME DAY',
    note: 'Subject line: SECURITY. We respond same day for valid disclosures.',
    href: 'mailto:hello@campsitesniper.com?subject=SECURITY',
  },
];

const FAQ_QUICK = [
  ['I missed an alert. What now?',     'Forward the watch ID to hello@. We log every probe and can tell you exactly what happened.'],
  ['Can I cancel any time?',            'Yes. One button in Settings. Refund pro-rated to the day for 30 days.'],
  ['Do you book on my behalf?',         'No. We notify; you book on Recreation.gov. We never act with your account.'],
  ['Is there a Pro trial?',             '7-day Pro trial. Auto-renews into Pro at $9.99/month unless canceled before it ends.'],
];

const HOURS_GRID = [
  { day: 'MON', open: '07:00', close: '19:00', tz: 'PT' },
  { day: 'TUE', open: '07:00', close: '19:00', tz: 'PT' },
  { day: 'WED', open: '07:00', close: '19:00', tz: 'PT' },
  { day: 'THU', open: '07:00', close: '19:00', tz: 'PT' },
  { day: 'FRI', open: '07:00', close: '19:00', tz: 'PT' },
  { day: 'SAT', open: '09:00', close: '14:00', tz: 'PT' },
  { day: 'SUN', open: '—',     close: '—',     tz: 'PT' },
];

function ContactPage() {
  return (
    <window.PageShell
      active="Contact"
      eyebrow="008 / CONTACT"
      title="Four channels. Real humans on each."
      subtitle="No support bots. No tier-1 deflection. Pick the channel, send the message, get an answer from the person who can fix it."
    >
      <ChannelStack/>
      <HoursAndAddress/>
      <QuickFAQ/>
    </window.PageShell>
  );
}

function ChannelStack() {
  const T = window.useTokens();
  return (
    <window.PageSection>
      <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
        color: T.amber, marginBottom: 16 }}>─── DISPATCH CHANNELS ───</div>
      <h2 style={{
        fontFamily: T.mono, fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 600,
        letterSpacing: '-0.01em', margin: '0 0 40px',
        textTransform: 'uppercase', color: T.text, maxWidth: 700,
      }}>Switchboard.</h2>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 1,
        background: T.border, border: `1px solid ${T.border}` }}>
        {CHANNELS.map(ch => (
          <ChannelRow key={ch.code} ch={ch} T={T}/>
        ))}
      </div>
    </window.PageSection>
  );
}

function ChannelRow({ ch, T }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={ch.href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? T.bg2 : T.bg3,
        padding: '28px 28px',
        display: 'grid',
        gridTemplateColumns: '90px 200px 1fr 120px',
        gap: 24, alignItems: 'center',
        textDecoration: 'none', color: T.text,
        transition: 'background 0.15s',
      }}>
      <div style={{
        fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6,
        color: T.amber, fontWeight: 600,
      }}>
        {ch.code}
      </div>
      <div>
        <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 1.4,
          color: T.textDim, marginBottom: 6 }}>
          {ch.label}
        </div>
        <div style={{ fontFamily: T.mono, fontSize: 15, fontWeight: 600,
          color: hover ? T.amber : T.text, letterSpacing: 0.2,
          transition: 'color 0.15s' }}>
          {ch.address}
        </div>
      </div>
      <div style={{ fontFamily: T.mono, fontSize: 12.5, color: T.textMute,
        lineHeight: 1.55 }}>
        {ch.note}
      </div>
      <div style={{ textAlign: 'right' }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 10px',
          border: `1px solid ${T.border}`,
          fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4,
          color: T.green,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%',
            background: T.green, boxShadow: `0 0 6px ${T.green}` }}/>
          SLA {ch.sla}
        </span>
      </div>
    </a>
  );
}

function HoursAndAddress() {
  const T = window.useTokens();
  return (
    <window.PageSection>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))',
        gap: 1, background: T.border, border: `1px solid ${T.border}`,
      }}>
        {/* Hours */}
        <div style={{ background: T.bg3, padding: '32px 28px' }}>
          <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6,
            color: T.amber, marginBottom: 18 }}>
            ─ HUMAN HOURS ─
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {HOURS_GRID.map(h => (
              <div key={h.day} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr 80px',
                gap: 12, alignItems: 'baseline',
                fontFamily: T.mono, fontSize: 13,
                paddingBottom: 6,
                borderBottom: `1px dashed ${T.border}`,
              }}>
                <span style={{ color: T.textDim, letterSpacing: 1.2, fontSize: 11 }}>{h.day}</span>
                <span style={{ color: T.text }}>
                  {h.open === '—' ? <em style={{ color: T.textDim, fontStyle: 'normal' }}>Closed</em>
                    : `${h.open} → ${h.close}`}
                </span>
                <span style={{ color: T.textDim, fontSize: 10, letterSpacing: 1.4,
                  textAlign: 'right' }}>{h.tz}</span>
              </div>
            ))}
          </div>
          <div style={{ fontFamily: T.mono, fontSize: 11, color: T.textMute,
            marginTop: 18, lineHeight: 1.6 }}>
            Off-hours messages get a reply by 09:00 next business day. Security
            disclosures are on-call 24/7.
          </div>
        </div>

        {/* Address / coordinates */}
        <div style={{ background: T.bg3, padding: '32px 28px',
          display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6,
            color: T.amber, marginBottom: 18 }}>
            ─ CO-ORDINATES ─
          </div>
          <div style={{ fontFamily: T.mono, fontSize: 14, color: T.text,
            lineHeight: 1.7, letterSpacing: 0.3 }}>
            Campsite Sniper, LLC<br/>
            PO Box 1492<br/>
            Mariposa, CA 95338<br/>
            United States
          </div>

          <div style={{ marginTop: 'auto', paddingTop: 24,
            borderTop: `1px solid ${T.border}`,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              ['LAT',  'N 37.4847°'],
              ['LONG', 'W 119.9663°'],
              ['ZONE', 'PT (UTC-08)'],
              ['REGISTRY', 'CA-202412-019'],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: T.mono, fontSize: 9.5, letterSpacing: 1.6,
                  color: T.textDim, marginBottom: 4 }}>{k}</div>
                <div style={{ fontFamily: T.mono, fontSize: 13, color: T.text,
                  letterSpacing: 0.3 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </window.PageSection>
  );
}

function QuickFAQ() {
  const T = window.useTokens();
  return (
    <window.PageSection dense>
      <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
        color: T.amber, marginBottom: 16 }}>─── BEFORE YOU WRITE ───</div>
      <h2 style={{
        fontFamily: T.mono, fontSize: 'clamp(24px, 3vw, 36px)', fontWeight: 600,
        letterSpacing: '-0.01em', margin: '0 0 32px',
        textTransform: 'uppercase', color: T.text,
      }}>The four most-asked.</h2>
      <div style={{ display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 16 }}>
        {FAQ_QUICK.map(([q, a], i) => (
          <div key={i} style={{
            border: `1px solid ${T.border}`, background: T.bg3,
            padding: '22px 22px',
          }}>
            <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6,
              color: T.amber, marginBottom: 10 }}>
              Q.0{i + 1}
            </div>
            <div style={{ fontFamily: T.mono, fontSize: 14, fontWeight: 600,
              color: T.text, marginBottom: 10, letterSpacing: 0.2 }}>
              {q}
            </div>
            <p style={{ fontFamily: T.mono, fontSize: 12, color: T.textMute,
              margin: 0, lineHeight: 1.6 }}>
              {a}
            </p>
          </div>
        ))}
      </div>
    </window.PageSection>
  );
}

window.ContactPage = ContactPage;