// Diego Claw — B2B platform page.
const PDS = window.DiegoClawDesignSystem_8d6afe;
const { Button: PBtn, Badge: PBadge, Tag: PTag, Card: PCard, Input: PInput, Select: PSelect, Radio: PRadio, Dialog: PDialog } = PDS;

const PRODUCTS = [
  { id: 'bingo', name: 'Digital Bingo', status: 'Live now', statusColor: 'success', bg: 'var(--diva-pink)', mark: 'B-I-N-G-O', blurb: 'Phones replace paper cards. Your host calls the numbers; the platform deals cards, tracks dabs and verifies winners instantly.', tags: ['QR join, no app', 'Instant win checks', 'Up to 500 players'] },
  { id: 'trivia', name: 'Digital Trivia', status: 'Live now', statusColor: 'success', bg: 'var(--diva-purple)', mark: 'Q&A', blurb: 'Teams answer on their phones with a live leaderboard on the big screen. Question packs included, or write your own filth.', tags: ['Team play', 'Live leaderboard', 'Question packs'] },
  { id: 'karaoke', name: 'Karaoke Nights', status: 'Coming soon', statusColor: 'yellow', bg: 'var(--diva-cyan)', mark: '♪', blurb: 'Punters browse the songbook and queue from their table. Your host runs the room, not the clipboard.', tags: ['Phone song queue', 'Duet requests', 'Host controls'] },
  { id: 'shows', name: 'Live Shows & Bookings', status: 'Live now', statusColor: 'success', bg: 'var(--diva-orange)', mark: '★', blurb: 'A booking page for every performer on the roster — ticketing, venue enquiries and a what\u2019s-on calendar, done for you.', tags: ['Performer pages', 'Ticketing', 'Venue enquiries'] },
  { id: 'voting', name: 'Live Audience Voting', status: 'Live now', statusColor: 'success', bg: 'var(--diva-pink-deep)', mark: '👑', blurb: 'Lip sync battle? Let the room decide. Punters vote from their phones and the winner is crowned live on the big screen.', tags: ['Real-time results', 'Big-screen reveal', 'No ties, no shade'] },
  { id: 'polls', name: 'Live Audience Polls', status: 'Live now', statusColor: 'success', bg: 'var(--diva-green)', mark: '✓✗', blurb: 'Read the room, literally. Fire off questions mid-show — cheeky, filthy or fundraising — and watch answers roll in live.', tags: ['Instant results', 'Emoji reactions', 'Host-triggered'] },
  { id: 'scoring', name: 'Karaoke Comp Scoring', status: 'Coming soon', statusColor: 'yellow', bg: 'var(--diva-purple)', mark: '10–10–10', blurb: 'Run a proper singing competition: judges score from their phones, audience adds a wildcard vote, leaderboard does the drama.', tags: ['Judge scorecards', 'Audience wildcard', 'Grand final mode'] },
  { id: 'challenge', name: 'Random Challenge Generator', status: 'Live now', statusColor: 'success', bg: 'var(--diva-orange)', mark: '?!', blurb: 'Spin the wheel of chaos. Dares, dance-offs and death drops served at random — the crowd watches the spin on the big screen.', tags: ['Spin-the-wheel', 'Custom challenge packs', 'PG to filth settings'] },
];

const PERFORMER_STEPS = [
  { title: 'Bring the charisma', body: 'You host. We hand you a show kit: caller console, big-screen display and your own branded booking page.' },
  { title: 'Run the room from one screen', body: 'Call numbers, fire questions, crown winners — all from a tablet at the mic. No tech crew needed.' },
  { title: 'Get booked again', body: 'Venues see the numbers: attendance, repeat players, bar spend nights. Your act becomes a package they rebook.' },
];

const VENUE_STEPS = [
  { title: 'Pick a night, pick a queen', body: 'Choose from the roster or bring your own resident performer. We match the show format to your room.' },
  { title: 'Zero setup', body: 'A QR code on every table and a screen behind the stage. Punters join in seconds — no app, no signup.' },
  { title: 'Pack the quiet nights', body: 'Drag bingo on a Tuesday sells like a Saturday. Recurring events, ticketing and promotion tools included.' },
];

function ProductCard({ p }) {
  return (
    <PCard interactive padding="0">
      <div style={{ height: 96, background: p.bg, borderBottom: '3px solid var(--border-loud)', display: 'grid', placeItems: 'center', position: 'relative' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: '#fff', textShadow: '3px 3px 0 var(--diva-outline)' }}>{p.mark}</span>
        <span style={{ position: 'absolute', top: 12, left: 12 }}><PBadge color={p.statusColor}>{p.status}</PBadge></span>
      </div>
      <div style={{ padding: 20 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--text-display)', lineHeight: 1.1, marginBottom: 10 }}>{p.name}</div>
        <p style={{ fontSize: 14.5, color: 'var(--text-body)', lineHeight: 1.55, margin: '0 0 14px' }}>{p.blurb}</p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{p.tags.map((x) => <PTag key={x}>{x}</PTag>)}</div>
      </div>
    </PCard>
  );
}

function StepList({ eyebrow, color, title, steps }) {
  return (
    <div>
      <window.Eyebrow color={color} style={{ marginBottom: 12 }}>{eyebrow}</window.Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--text-display)', margin: '0 0 22px', lineHeight: 1.1 }}>{title}</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {steps.map((s, i) => (
          <div key={s.title} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
            <div style={{ width: 38, height: 38, borderRadius: '50%', flexShrink: 0, background: color, border: '3px solid var(--border-loud)', boxShadow: 'var(--shadow-pop-sm)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: 17, color: color === 'var(--diva-yellow)' ? 'var(--text-on-yellow)' : '#fff' }}>{i + 1}</div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 16.5, color: 'var(--text-display)', marginBottom: 4 }}>{s.title}</div>
              <div style={{ fontSize: 14.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{s.body}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PlatformHero({ layout }) {
  const split = layout === 'Split with phone';
  return (
    <section style={{ background: 'var(--gradient-stage)', borderBottom: '3px solid var(--border-loud)', position: 'relative', overflow: 'hidden' }}>
      <window.AuroraLayer />
      <window.ConfettiLayer />
      <window.SparkleLayer />
      <div style={{ position: 'relative', maxWidth: 1120, margin: '0 auto', padding: split ? '64px 40px' : '76px 40px 68px', display: split ? 'grid' : 'block', gridTemplateColumns: split ? '1.25fr auto' : undefined, gap: 48, alignItems: 'center', textAlign: split ? 'left' : 'center' }}>
        <div>
          <window.Eyebrow style={{ marginBottom: 16 }}>Digital experiences for drag entertainment</window.Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: split ? 64 : 72, lineHeight: 1.04, color: 'var(--text-display)', margin: '0 0 20px' }}>Put the party in <span style={{ color: 'var(--diva-pink)', textShadow: 'var(--glow-pink)' }}>their pockets.</span></h1>
          <p style={{ fontSize: 19, color: 'var(--text-body)', maxWidth: 560, margin: split ? '0 0 32px' : '0 auto 32px', fontWeight: 500 }}>Queen Central turns drag bingo, trivia and karaoke into digital shows punters play from their phones — built by Diego Claw for performers and the pubs &amp; clubs that book them.</p>
          <div style={{ display: 'flex', gap: 16, justifyContent: split ? 'flex-start' : 'center', flexWrap: 'wrap' }}>
            <PBtn variant="primary" size="lg" onClick={() => window.scrollTo({ top: document.getElementById('demo').offsetTop - 80, behavior: 'smooth' })}>Book a Demo</PBtn>
            <PBtn variant="ghost" size="lg" onClick={() => { window.location.href = 'kenya.html'; }}>See a live example</PBtn>
          </div>
        </div>
        {split ? <window.PhoneMockup screen="trivia" scale={0.6} /> : null}
      </div>
    </section>
  );
}

function PlatformPage() {
  const [t, setTweak] = window.useTweaks(PLATFORM_TWEAK_DEFAULTS);
  window.useDisplayFont(t.displayFont);
  const [name, setName] = React.useState('');
  const [org, setOrg] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [who, setWho] = React.useState('performer');
  const [product, setProduct] = React.useState('Digital Bingo');
  const [sent, setSent] = React.useState(false);
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <window.DivaHeader
        brand="Queen" brandAccent="Central" tagline="Powered by Diego Claw"
        links={[{ label: 'Products', href: '#products' }, { label: 'How It Works', href: '#how' }, { label: 'Demo', href: '#demo' }]}
        cta="Book a Demo" onCta={() => window.scrollTo({ top: document.getElementById('demo').offsetTop - 80, behavior: 'smooth' })}
        secondaryCta="Log In" onSecondaryCta={() => {}}
      />
      <main style={{ flex: 1 }}>
        <PlatformHero layout={t.heroLayout} />

        <section id="paper" data-screen-label="Paper is so last season" style={{ maxWidth: 1120, margin: '0 auto', padding: '72px 40px 0', width: '100%', boxSizing: 'border-box' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 64, alignItems: 'center' }}>
            <div>
              <window.Eyebrow style={{ marginBottom: 14 }}>How the night works</window.Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 44, lineHeight: 1.08, color: 'var(--text-display)', margin: '0 0 16px' }}>Paper is <span style={{ color: 'var(--diva-pink)', textShadow: 'var(--glow-pink)' }}>so</span> last season.</h2>
              <p style={{ fontSize: 17, color: 'var(--text-body)', lineHeight: 1.6, margin: '0 0 28px', maxWidth: 520 }}>Your host runs the whole show from the stage — punters play along on their phones. No app to download, no login, no fuss.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                {[
                  { title: 'Their phone is the card', body: 'No paper, no pens. Punters scan a QR at the venue and they\u2019re in — cards dealt, dabs tracked, all live.' },
                  { title: 'Winners verified instantly', body: 'Someone yells BINGO and the platform confirms it in seconds. No squinting at scribbles — the show keeps moving.' },
                  { title: 'Play as a table, win as a table', body: 'Teams answer together with a live leaderboard on the big screen. Bragging rights included.' },
                ].map((p, i) => (
                  <div key={p.title} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                    <div style={{ width: 40, height: 40, borderRadius: '50%', flexShrink: 0, background: ['var(--diva-pink)', 'var(--diva-purple)', 'var(--diva-yellow)'][i], border: '3px solid var(--border-loud)', boxShadow: 'var(--shadow-pop-sm)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontSize: 18, color: i === 2 ? 'var(--text-on-yellow)' : '#fff' }}>{i + 1}</div>
                    <div>
                      <div style={{ fontWeight: 800, fontSize: 17, color: 'var(--text-display)', marginBottom: 4 }}>{p.title}</div>
                      <div style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.55, maxWidth: 480 }}>{p.body}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <window.PhoneMockup screen="trivia" scale={0.68} />
          </div>
        </section>

        <section id="products" data-screen-label="Products" style={{ maxWidth: 1120, margin: '0 auto', padding: '64px 40px 0', width: '100%', boxSizing: 'border-box' }}>
          <div style={{ maxWidth: 620, marginBottom: 32 }}>
            <window.Eyebrow style={{ marginBottom: 12 }}>What's on the menu</window.Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 42, lineHeight: 1.08, color: 'var(--text-display)', margin: 0 }}>Eight formats. One <span style={{ color: 'var(--diva-yellow)' }}>fabulous</span> platform.</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 28 }}>
            {PRODUCTS.map((p) => <ProductCard key={p.id} p={p} />)}
          </div>
        </section>

        <section id="how" data-screen-label="How it works" style={{ maxWidth: 1120, margin: '0 auto', padding: '88px 40px 0', width: '100%', boxSizing: 'border-box' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 56, alignItems: 'start' }}>
            <StepList eyebrow="For performers" color="var(--diva-pink)" title="Your act, amplified." steps={PERFORMER_STEPS} />
            <div style={{ width: 3, alignSelf: 'stretch', background: 'var(--border-soft)', borderRadius: 2 }}></div>
            <StepList eyebrow="For pubs & clubs" color="var(--diva-yellow)" title="Full room, midweek." steps={VENUE_STEPS} />
          </div>
        </section>

        <window.PhotoStrip
          label="The talent"
          title="Drag at its" accent="best."
          photos={[
            { id: 'diva-photo-1', caption: 'Bingo night, sold out' },
            { id: 'diva-photo-2', caption: 'The roster, serving' },
            { id: 'diva-photo-3', caption: 'Winners get crowned' },
          ]}
        />

        <section id="demo" data-screen-label="Book a demo" style={{ maxWidth: 1120, margin: '0 auto', padding: '88px 40px 0', width: '100%', boxSizing: 'border-box' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'center' }}>
            <window.PhoneMockup screen="bingo" scale={0.66} hostName="Your host" />
            <div style={{ maxWidth: 520 }}>
              <window.Eyebrow style={{ marginBottom: 14 }}>See it in the flesh</window.Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 42, lineHeight: 1.08, color: 'var(--text-display)', margin: '0 0 14px' }}>Book a <span style={{ color: 'var(--diva-pink)' }}>demo.</span></h2>
              <p style={{ fontSize: 16.5, color: 'var(--text-body)', lineHeight: 1.6, margin: '0 0 24px' }}>Twenty minutes, your phone, and a mini game of bingo. We'll show you the caller console, the punter experience and how a night runs end to end. Sydney first, the world next.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <PInput label="Your name" placeholder="Sasha" value={name} onChange={setName} />
                  <PInput label="Stage name or venue" placeholder="Kenya Scratch / The Imperial" value={org} onChange={setOrg} />
                </div>
                <PInput label="Email" placeholder="you@fabulous.com" value={email} onChange={setEmail} />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'end' }}>
                  <PSelect label="Most interested in" options={['Digital Bingo', 'Digital Trivia', 'Karaoke Nights', 'Live Shows & Bookings']} value={product} onChange={setProduct} />
                  <div style={{ display: 'flex', gap: 18, paddingBottom: 10 }}>
                    <PRadio name="who" checked={who === 'performer'} onChange={() => setWho('performer')} label={<span style={{ fontSize: 14, fontWeight: 700 }}>Performer</span>} />
                    <PRadio name="who" checked={who === 'venue'} onChange={() => setWho('venue')} label={<span style={{ fontSize: 14, fontWeight: 700 }}>Venue</span>} />
                  </div>
                </div>
                <div><PBtn variant="primary" size="lg" onClick={() => setSent(true)}>Book My Demo</PBtn></div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <window.DivaFooter
        left={<span>Queen <span style={{ color: 'var(--diva-pink)' }}>Central</span></span>}
        right="A Diego Claw venture · Sydney, on Gadigal land 🏳️‍🌈 · hello@queencentral.app"
        crossLink={{ label: 'See Kenya Scratch live', href: 'kenya.html' }}
      />
      <PDialog open={sent} onClose={() => setSent(false)} title="You're on the list, gorgeous. ✨" actions={<PBtn onClick={() => setSent(false)}>Can't wait</PBtn>}>
        <p style={{ margin: 0, lineHeight: 1.6 }}>We'll email {email || 'you'} to lock in a {product} demo{org ? ` for ${org}` : ''}. Bring your phone and your best poker face.</p>
      </PDialog>

      <window.TweaksPanel>
        <window.TweakSection label="Style" />
        <window.TweakSelect label="Display font" value={t.displayFont} options={Object.keys(window.DIVA_FONTS)} onChange={(v) => setTweak('displayFont', v)} />
        <window.TweakSection label="Hero" />
        <window.TweakRadio label="Layout" value={t.heroLayout} options={['Marquee', 'Split with phone']} onChange={(v) => setTweak('heroLayout', v)} />
      </window.TweaksPanel>
    </div>
  );
}

const PLATFORM_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "Marquee",
  "displayFont": "Chonburi"
}/*EDITMODE-END*/;

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