// site/page-support.jsx, /support — one question, three doors.
// V1 (2026-07): ticket-buyer door = self-serve panel on this page (ticket lookup +
// email support@fairs.com); organizer door = Intercom Messenger opened with
// support_audience='organizer' (AM-first flow lives in Intercom); sales door = the
// contact/Book-a-demo page. The full ticket-buyer chat flow is designed but not yet
// live in Intercom (V2) — see TODO.md. openSupportChat() is defined in site.html.

const SUPPORT_EMAIL = 'support@fairs.com';

function SupportChoiceCard({ icon, title, desc, cta, onClick, expanded }) {
  const [hover, setHover] = React.useState(false);
  const lifted = hover || expanded;
  return (
    <button onClick={onClick} aria-expanded={expanded}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: expanded ? S.cream2 : S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 14,
        padding: '28px 26px', textAlign: 'left', cursor: 'pointer',
        display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 14,
        boxShadow: lifted ? `5px 5px 0 0 ${S.red}` : '0 4px 10px rgba(40,30,20,0.06)',
        transform: lifted ? 'translate(-2px, -2px)' : 'none',
        transition: 'box-shadow .15s, transform .15s, background .15s',
      }}>
      <span style={{
        width: 46, height: 46, borderRadius: 12, background: S.red100,
        border: `1.5px solid rgba(255,54,54,0.25)`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Ico name={icon} size={22} color={S.red} strokeWidth={1.8} />
      </span>
      <span style={{
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22,
        letterSpacing: '-0.015em', color: S.ink, lineHeight: 1.2,
      }}>{title}</span>
      <span style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.7 }}>{desc}</span>
      <span style={{
        marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 8,
        fontSize: 16, fontWeight: 700, color: S.red,
      }}>
        {cta} <Ico name={expanded ? 'chevronDown' : 'arrowRight'} size={16} strokeWidth={2.2} />
      </span>
    </button>
  );
}

// V1 ticket-buyer panel: self-serve first (the lookup solves the #1 request —
// "I can't find my tickets"), email for everything else.
function FairgoerPanel() {
  return (
    <div style={{
      marginTop: 20, background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 14,
      padding: '28px 26px', boxShadow: `5px 5px 0 0 ${S.red}`,
    }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
        ★ Ticket help
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 18 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, letterSpacing: '-0.015em' }}>
            Looking for your tickets?
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, margin: '8px 0 16px' }}>
            Resend your tickets to your email or phone in about a minute — no account needed.
            This solves most ticket questions instantly.
          </p>
          <StubBtn href={TICKET_LOOKUP_URL} target="_blank">Find my tickets</StubBtn>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, letterSpacing: '-0.015em' }}>
            Anything else?
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, margin: '8px 0 16px' }}>
            Refunds, wrong email at checkout, wallet passes, event questions — email us and a real
            person will get back to you, typically within 1 business day.
          </p>
          <StubBtn variant="cream" href={`mailto:${SUPPORT_EMAIL}`} icon={false}>{SUPPORT_EMAIL}</StubBtn>
        </div>
      </div>
    </div>
  );
}

function PageSupport({ onNav }) {
  const [ticketHelpOpen, setTicketHelpOpen] = React.useState(false);

  return (
    <div>
      <PageHero
        eyebrow="Support"
        title="How can we"
        titleAccent="help?"
        lead="Tell us which of these you are, and we'll point you down the fastest path."
      />

      <section style={{ background: S.cream, padding: '8px 64px 96px', position: 'relative' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <SectionEyebrow>Which of these are you?</SectionEyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 20, alignItems: 'stretch' }}>
            <SupportChoiceCard
              icon="ticket"
              title="I bought tickets"
              desc="You bought tickets to a fair or event (or you're trying to) and need a hand."
              cta="Get ticket help"
              expanded={ticketHelpOpen}
              onClick={() => setTicketHelpOpen(o => !o)}
            />
            <SupportChoiceCard
              icon="users"
              title="I run my event on Fairs.com"
              desc="You're a Fairs.com customer — you have a dedicated account manager ready to help."
              cta="Contact my team"
              onClick={() => window.openSupportChat && window.openSupportChat('organizer')}
            />
            <SupportChoiceCard
              icon="megaphone"
              title="I'm interested in Fairs.com"
              desc="You'd like to talk with our team about running your own fair or event on Fairs.com."
              cta="Talk to sales"
              onClick={() => onNav('contact')}
            />
          </div>
          {ticketHelpOpen && <FairgoerPanel />}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageSupport });