/* Alchemy — feature-update screens: Partner Login, Day Passes, Intake, Thank-you.
   All reuse existing chrome (App supplies AnnouncementBar/Nav/Footer), tokens, and DS components. */
const { Button, SectionHeading, ElementTile } = window.DS;

const upWrap = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };
const upLink = (name) => (window.alcLink ? window.alcLink(null, name) : '');

/* Shared navy intro band used by each of these utility pages. */
function UtilityHero({ eyebrow, title, lead, children }) {
  return (
    <section style={{ background: 'var(--surface-inverse)', color: 'var(--text-on-dark)', marginTop: -78, paddingTop: 78 }}>
      <div style={{ ...upWrap, paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', maxWidth: 860 }}>
        <SectionHeading onDark eyebrow={eyebrow} title={title} lead={lead} as="h1" />
        {children && <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>{children}</div>}
      </div>
    </section>
  );
}

/* ---------------------------------------------------------- Partner Login --- */
function PartnerLoginScreen({ onNavigate }) {
  const url = upLink('partnerLogin');
  return (
    <React.Fragment>
      <UtilityHero eyebrow="Partner Login" title="Welcome back, Partner"
        lead="Book rooms, manage your plan, update billing, and see what's happening in the community, all from your Partner portal.">
        {url
          ? <Button variant="onDark" size="lg" as="a" href={url} target="_blank" rel="noopener noreferrer">Log in to the Partner portal</Button>
          : <Button variant="onDark" size="lg" disabled>Login link pending</Button>}
        <Button variant="slate" size="lg" onClick={() => onNavigate('tour')}>Not a Partner yet? Schedule a Tour</Button>
      </UtilityHero>
      <section style={{ background: 'var(--bg)' }}>
        <div style={{ ...upWrap, paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-8)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 'var(--space-5)' }}>
          {[['Bk', 'Book', 'Reserve meeting rooms and the podcast studio by the hour.'],
            ['Pl', 'Plan', 'View your Partnership, credits, and invoices.'],
            ['Cm', 'Community', 'Events, masterminds, and Partner updates.']].map(([sym, t, d], i) => (
            <div key={t} style={{ background: 'var(--surface)', border: '1px solid var(--border)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.15rem', color: 'var(--text-strong)' }}>{t}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.95rem', lineHeight: 1.6, color: 'var(--text-body)' }}>{d}</span>
            </div>
          ))}
        </div>
      </section>
    </React.Fragment>
  );
}

/* ------------------------------------------------------------ Day Passes --- */
function DayPassScreen({ onNavigate }) {
  const dp = upLink('dayPass');
  const cta = dp
    ? <Button variant="onDark" size="lg" as="a" href={dp} target="_blank" rel="noopener noreferrer">Get a Day Pass</Button>
    : <Button variant="onDark" size="lg" onClick={() => onNavigate('tour')}>Ask about a Day Pass</Button>;
  return (
    <React.Fragment>
      <UtilityHero eyebrow="Day Passes" title="Just passing through? We got you."
        lead="Grab a day pass and work from Alchemy for the day. Current rates confirmed on your tour.">
        {cta}
        <Button variant="slate" size="lg" onClick={() => onNavigate('join')}>See Partnerships</Button>
      </UtilityHero>
      <section style={{ background: 'var(--bg)' }}>
        <div style={{ ...upWrap, paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-8)' }}>
          <div style={{ marginBottom: 'var(--space-6)' }}>
            <SectionHeading eyebrow="What's included" title="A full day in the room" as="h2" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'var(--space-5)' }}>
            {[['Ws', 'Open workspace', 'Drop in, plug in, and get to work with people around you.'],
              ['Wf', '1 GIG fiber', 'Reliable connectivity for calls, video meetings, and focused work.'],
              ['Kt', 'Kitchen', 'Every location has a kitchen for Partners and guests.'],
              ['Cm', 'Good company', 'Meet the Partners building alongside you.']].map(([sym, t, d], i) => (
              <div key={t} style={{ background: 'var(--surface)', border: '1px solid var(--border)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.15rem', color: 'var(--text-strong)' }}>{t}</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.95rem', lineHeight: 1.6, color: 'var(--text-body)' }}>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section style={{ background: 'var(--slate-500)' }}>
        <div style={{ ...upWrap, paddingTop: 'var(--space-7)', paddingBottom: 'var(--space-7)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
          <div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.8rem', color: '#fff', margin: 0, lineHeight: 1.1 }}>Coming back tomorrow?</p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.02rem', color: 'rgba(255,255,255,0.88)', margin: '8px 0 0' }}>Business Club gives you 24/7 access from $149/mo.</p>
          </div>
          <Button variant="onDark" size="lg" onClick={() => onNavigate('join')}>Compare Partnerships</Button>
        </div>
      </section>
    </React.Fragment>
  );
}

/* --------------------------------------------------------------- Intake --- */
function IntakeScreen({ onNavigate }) {
  return (
    <React.Fragment>
      <UtilityHero eyebrow="After your tour" title="Let's get you set up"
        lead="Thanks for touring Alchemy. A few quick questions so we can finalize the right Partnership and location for you. We'll follow up within one business day." />
      <section style={{ background: 'var(--bg)' }}>
        <div style={{ ...upWrap, paddingTop: 'var(--space-8)', paddingBottom: 'var(--section-y)', display: 'grid', gridTemplateColumns: 'minmax(0,0.8fr) minmax(0,1.2fr)', gap: 'var(--space-8)', alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 110, display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            {[['Call', '(704) 753-8722'], ['Email', 'team@alchemycowork.com']].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: '1.02rem', color: 'var(--text-strong)' }}>{v}</span>
              </div>
            ))}
          </div>
          <window.FormEmbed form="intake" />
        </div>
      </section>
    </React.Fragment>
  );
}

/* ------------------------------------------------------------ Thank-you --- */
const THANKS = {
  tour: { sym: 'Tr', name: 'Tour', eyebrow: 'Tour scheduled', title: "You're on the calendar",
    lead: 'Thanks, [First name]. Your tour at [Location] is set for [Date] at [Time]. A confirmation is on its way to [Email].' },
  intake: { sym: 'In', name: 'Intake', eyebrow: 'Intake received', title: 'Thanks for the details',
    lead: "Thanks, [First name]. We'll review your answers and follow up within one business day to finalize your Partnership for [Company] at [Location]." },
  generic: { sym: 'Ty', name: 'Thanks', eyebrow: 'Message received', title: "We'll be in touch",
    lead: "Thanks for reaching out, [First name]. Someone from the Alchemy team will get back to you shortly." },
};

function ThankYouScreen({ variant = 'generic', onNavigate }) {
  const t = THANKS[variant] || THANKS.generic;
  return (
    <section style={{ background: 'var(--surface-inverse)', color: 'var(--text-on-dark)', marginTop: -78, paddingTop: 78 }}>
      <div style={{ ...upWrap, paddingTop: 'var(--space-10)', paddingBottom: 'var(--space-10)', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 'var(--space-5)', maxWidth: 720 }}>
        <SectionHeading onDark align="center" eyebrow={t.eyebrow} title={t.title} lead={t.lead} as="h1" />
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="onDark" size="lg" onClick={() => onNavigate('home')}>Back to home</Button>
          {variant === 'generic' && <Button variant="slate" size="lg" onClick={() => onNavigate('tour')}>Schedule a Tour</Button>}
          {variant === 'intake' && <Button variant="slate" size="lg" onClick={() => onNavigate('join')}>Review Partnerships</Button>}
          {variant === 'tour' && <Button variant="slate" size="lg" as="a" href="VirtualTour.html">Take the virtual tour</Button>}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PartnerLoginScreen, DayPassScreen, IntakeScreen, ThankYouScreen });