/* Alchemy website — Schedule a Tour (one form: pick location, filter availability)
   + Intake (embedded LeadConnector form). */
const { Button, Input, Tag, ElementTile, SectionHeading } = window.DS;

const tWrap = { maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)' };

const TOUR_LOCATIONS = [
  { id: 'gastonia', name: 'Downtown Gastonia', addr: '121 W. Main Ave', status: 'open' },
  { id: 'charlotte', name: 'Charlotte', addr: '2459 Wilkinson Blvd', status: 'open' },
  { id: 'loray', name: 'Loray Gastonia', addr: '300 S Firestone St, Suite 200 H', status: 'open' },
];

// Simple availability model — real slots would come from the booking system.
const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const SLOTS = ['9:00 AM', '10:30 AM', '12:00 PM', '1:30 PM', '3:00 PM', '4:30 PM'];
function nextDates() {
  const out = [];
  const d = new Date();
  while (out.length < 5) {
    d.setDate(d.getDate() + 1);
    const wd = d.getDay();
    if (wd >= 1 && wd <= 5) out.push({ dow: DAYS[wd - 1], date: d.getDate(), key: d.toDateString() });
  }
  return out;
}

function TourScreen() {
  const [loc, setLoc] = React.useState('gastonia');
  const [day, setDay] = React.useState(null);
  const [slot, setSlot] = React.useState(null);
  const [sent, setSent] = React.useState(false);
  const dates = React.useMemo(nextDates, []);
  // pseudo-availability: hide a couple slots per day/location so "filter" feels real
  const openSlots = React.useMemo(() => {
    if (!day) return [];
    const seed = (loc.length + day.dow.length) % 3;
    return SLOTS.filter((_, i) => (i + seed) % 3 !== 0);
  }, [loc, day]);

  const chip = (active, onClick, children, disabled) => (
    <button onClick={onClick} disabled={disabled} style={{
      all: 'unset', cursor: disabled ? 'not-allowed' : 'pointer', textAlign: 'center',
      padding: '0.6rem 0.9rem', fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.82rem',
      letterSpacing: '0.04em', opacity: disabled ? 0.4 : 1,
      background: active ? 'var(--navy-700)' : 'transparent',
      color: active ? '#fff' : 'var(--navy-700)',
      border: '1.5px solid ' + (active ? 'var(--navy-700)' : 'var(--border-strong)'),
    }}>{children}</button>
  );

  return (
    <section style={{ background: 'var(--bg)' }}>
      <div style={{ ...tWrap, paddingTop: 'var(--space-9)', paddingBottom: 'var(--section-y)', display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-8)', alignItems: 'start' }}>
        {/* Left: info */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)', position: 'sticky', top: 110 }}>
          <SectionHeading eyebrow="Schedule a Tour" title="One tour, any location" lead="Pick the Alchemy you want to see, choose a day, and grab an open time. No pressure, just a walk-through and a great cup of coffee." as="h1" />
          <div style={{ display: 'flex', gap: 10 }}>
            <ElementTile number="1" symbol="A" name="Alchemy" size={84} />
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6 }}>
              <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, color: 'var(--text-strong)' }}>Prefer to talk first?</div>
              <div style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', fontSize: '0.92rem' }}>(704) 753-8722<br />team@alchemycowork.com</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Tag dot>Coworking 24/7</Tag>
            <Tag>Wandering Cup (DTG) Mon to Fri 7a to 4p</Tag>
          </div>
        </div>

        {/* Right: the one tour form */}
        <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', padding: 'var(--space-7)' }}>
          {sent ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16, padding: 'var(--space-6) 0' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.6rem', color: 'var(--text-strong)', margin: 0 }}>Your tour is requested!</h3>
              <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-body)', margin: 0, maxWidth: 340 }}>
                {TOUR_LOCATIONS.find((l) => l.id === loc)?.name} · {day && day.dow} · {slot}. We'll confirm by email within one business day.
              </p>
              <Button variant="ghost" onClick={() => { setSent(false); setDay(null); setSlot(null); }}>← Book another</Button>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
              {/* Step 1: location */}
              <div>
                <p style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.72rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 10px' }}>1 · Choose a location</p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                  {TOUR_LOCATIONS.map((l) => {
                    const soon = l.status === 'soon';
                    const active = loc === l.id;
                    return (
                      <button key={l.id} type="button" disabled={soon} onClick={() => setLoc(l.id)} style={{
                        all: 'unset', cursor: soon ? 'not-allowed' : 'pointer', padding: '0.75rem 0.85rem',
                        border: '1.5px solid ' + (active ? 'var(--navy-700)' : 'var(--border-strong)'),
                        background: active ? 'var(--navy-700)' : 'transparent', opacity: soon ? 0.5 : 1,
                        display: 'flex', flexDirection: 'column', gap: 3,
                      }}>
                        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.92rem', color: active ? '#fff' : 'var(--text-strong)' }}>{l.name}</span>
                        <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.76rem', color: active ? 'rgba(255,255,255,0.8)' : 'var(--text-muted)' }}>{soon ? 'Coming soon' : l.addr}</span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Step 2: day */}
              <div>
                <p style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.72rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 10px' }}>2 · Pick a day</p>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {dates.map((d) => chip(day && day.key === d.key, () => { setDay(d); setSlot(null); }, d.dow + ' ' + d.date))}
                </div>
              </div>

              {/* Step 3: availability */}
              <div>
                <p style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.72rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 10px' }}>3 · Filter availability</p>
                {day ? (
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                    {SLOTS.map((s) => { const avail = openSlots.includes(s); return chip(slot === s, () => setSlot(s), s, !avail); })}
                  </div>
                ) : (
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.9rem', color: 'var(--text-muted)', margin: 0 }}>Pick a day above to see open tour times.</p>
                )}
              </div>

              {/* Step 4: details */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
                <Input label="Name" placeholder="Jane Maker" required />
                <Input label="Email" type="email" placeholder="jane@studio.co" required />
              </div>
              <Button variant="primary" size="lg" block as="button" type="submit"
                disabled={!slot}>
                {slot ? 'Request my tour' : 'Pick a time to continue'}
              </Button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function IntakeScreen() {
  return (
    <section style={{ background: 'var(--bg)' }}>
      <div style={{ ...tWrap, paddingTop: 'var(--space-9)', paddingBottom: 'var(--section-y)', display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-8)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', position: 'sticky', top: 110 }}>
          <SectionHeading eyebrow="New Partner Intake" title="Let's get you set up" lead="A few details and we can match you to the right space and get your Partnership started." as="h1" />
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Tag dot>Month to month</Tag>
            <Tag>From $149/mo</Tag>
          </div>
        </div>
        <window.FormEmbed form="intake" />
      </div>
    </section>
  );
}

window.TourScreen = TourScreen;
window.IntakeScreen = IntakeScreen;