/* Alchemy website — Home (community-led) */
const { Button, Tag, Card, ElementTile, SectionHeading, Accordion } = window.DS;

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

const HERO_SHOTS = [
  { src: '../../assets/event-space.webp', cap: 'Welcome to Alchemy' },
  { src: '../../assets/community-06.webp', cap: 'Mastermind, in full swing' },
  { src: '../../assets/community-17.webp', cap: 'Creator mixer' },
  { src: '../../assets/community-13.webp', cap: 'Over a cup of coffee' },
  { src: '../../assets/community-04.webp', cap: 'Friends made here' },
  { src: '../../assets/community-22.webp', cap: 'Always laughing' },
];

function Hero({ onNavigate }) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((p) => (p + 1) % HERO_SHOTS.length), 4200);
    return () => clearInterval(t);
  }, []);
  return (
    <section style={{ position: 'relative', minHeight: '100vh', marginTop: -78, display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'var(--navy-900)' }}>
      {/* background slideshow */}
      {HERO_SHOTS.map((s, idx) => (
        <img key={idx} src={s.src} alt="" aria-hidden={idx !== i} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          opacity: idx === i ? 1 : 0, transform: idx === i ? 'scale(1.06)' : 'scale(1)',
          transition: 'opacity 1200ms var(--ease-out), transform 5400ms var(--ease-out)',
        }} />
      ))}
      {/* scrim */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,24,48,0.78) 0%, rgba(15,24,48,0.52) 38%, rgba(15,24,48,0.74) 100%)' }} />
      {/* content */}
      <div style={{ ...homeWrap, position: 'relative', textAlign: 'center', color: 'var(--text-on-dark)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-4)', paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-9)' }}>
        <span className="alc-eyebrow" style={{ color: 'rgba(255,255,255,0.85)' }}>It's more than space</span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(3rem, 6.2vw, 5.75rem)', lineHeight: 0.96, letterSpacing: '-0.02em', textTransform: 'uppercase', margin: 0, maxWidth: '16ch', textShadow: '0 2px 30px rgba(8,13,28,0.4)' }}>
          Build alongside people who get it.
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1.05rem, 1.6vw, 1.3rem)', lineHeight: 1.6, color: 'rgba(255,255,255,0.9)', maxWidth: '48ch', margin: '6px 0 0' }}>
          More than shared space, a community with shared goals, with a place for you whether you're
          just starting, extending a hobby, or growing your business.
        </p>
        {/* Orientation line — what & where (Correction 1) */}
        <p style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.8rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.72)', margin: 'var(--space-3) 0 0' }}>
          Open coworking, dedicated desks &amp; private offices · Gastonia &amp; Charlotte, NC
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 'var(--space-4)' }}>
          <Button variant="onDark" size="lg" onClick={() => onNavigate('tour')}>Schedule a Tour</Button>
          <Button variant="slate" size="lg" onClick={() => { const sc = document.getElementById('kit-scroll'); const t = document.getElementById('partners'); if (t && sc) sc.scrollTo({ top: t.offsetTop - 60, behavior: 'smooth' }); }}>Meet the community</Button>
        </div>
      </div>
      {/* caption + ticks, bottom */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, ...homeWrap, paddingBottom: 'var(--space-5)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <span style={{ position: 'relative', fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.72rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)' }}>{HERO_SHOTS[i].cap}</span>
        <div style={{ position: 'relative', display: 'flex', gap: 8, flex: '0 1 320px' }}>
          {HERO_SHOTS.map((_, idx) => (
            <button key={idx} onClick={() => setI(idx)} aria-label={'Slide ' + (idx + 1)} style={{
              all: 'unset', cursor: 'pointer', flex: 1, height: 3,
              background: idx === i ? '#ffffff' : 'rgba(255,255,255,0.35)',
              transition: 'background var(--dur) var(--ease-out)',
            }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnersExpanded() {
  const includes = [
    ['Introductions', 'Warm intros to Partners who can move your business forward.'],
    ['Referrals', 'Real referral opportunities inside the community.'],
    ['Events & workshops', 'Built for people running actual businesses, not fluff.'],
    ['Accountability', 'Masterminds with entrepreneurs who get the season you\'re in.'],
    ['Collaboration', 'Neighbors who trade skills, not just hallway hellos.'],
    ['A room rooting for you', 'People who genuinely want to see you win.'],
  ];
  return (
    <section id="partners" style={{ background: 'var(--bg)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--space-8)', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-8)', alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 110 }} className="alc-eyebrow-lg">
          <SectionHeading eyebrow="It's not just catchy, its true." title="Partners, not members." lead="At Alchemy you're a Partner, not a member. Here's what that actually delivers." as="h2" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
          {includes.map(([t, d]) => (
            <div key={t} style={{ background: 'var(--surface)', border: '1px solid var(--border)', padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.1rem', color: 'var(--text-strong)' }}>{t}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.92rem', lineHeight: 1.55, color: 'var(--text-body)' }}>{d}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function NeedsNav({ onNavigate }) {
  const needs = [
    { img: '../../assets/lounge.webp', need: '"I need a place to work."', out: 'Drop in, plug in, and get to work with people around you.', to: 'join' },
    { img: '../../assets/desks-open.webp', need: '"I need a desk of my own."', out: 'A permanent spot you can personalize, with storage that locks.', to: 'desks' },
    { img: '../../assets/office-private.webp', need: '"I need an office for my team."', out: 'A turnkey HQ you move into and grow from.', to: 'offices' },
    { img: '../../assets/meeting-room-real.webp', need: '"I need a room for a meeting or event."', out: 'Meet clients or host your next gathering the way you want to.', to: 'meeting' },
  ];
  return (
    <section id="find-your-fit" style={{ background: 'var(--bg-alt)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--space-8)' }}>
        <div style={{ marginBottom: 'var(--space-7)' }}>
          <SectionHeading eyebrow="Find Your Fit" title="What do you need right now?" lead="Start with where you are today. We'll point you to the right space." as="h2" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-4)' }}>
          {needs.map((n) => (
            <button key={n.need} onClick={() => onNavigate(n.to)} style={{
              all: 'unset', cursor: 'pointer', background: 'var(--surface)', border: '1px solid var(--border)',
              boxShadow: 'var(--shadow-sm)', overflow: 'hidden', display: 'flex', flexDirection: 'column',
              transition: 'transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}>
              <div style={{ aspectRatio: '4/3', overflow: 'hidden' }}>
                <img src={n.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.05rem', color: 'var(--text-strong)', lineHeight: 1.2 }}>{n.need}</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.9rem', lineHeight: 1.5, color: 'var(--text-body)', flex: 1 }}>{n.out}</span>
                <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.74rem', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--link)' }}>Explore →</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function Comparison({ onNavigate }) {
  const cols = ['Business Club', 'Dedicated Desk', 'Private Office'];
  const rows = [
    ['Best for', 'Getting started, flexible work', 'A permanent home base', 'Teams & established businesses'],
    ['Access', '24/7 open coworking', '24/7', '24/7'],
    ['Your own space', 'Open seating', 'Your dedicated desk', 'Fully furnished office'],
    ['Storage', 'Phone booths only', 'Locking cabinet with key', 'Furnished storage'],
    ['Mail', 'Mailbox add-on', 'Included', 'Included'],
    ['Meeting-room credits', '4 per month', '5 per month', '6 per month'],
    ['Branding', 'Community access', 'Personalize your desk', 'Custom signage on your door'],
    ['Price', 'Ask us', 'Ask us', 'Ask us'],
  ];
  const quick = [
    ['Flexible workspace', 'Business Club', 'join'],
    ['A permanent desk', 'Dedicated Desk', 'desks'],
    ['My own office', 'Private Office', 'offices'],
    ['Professional meeting space', 'Meeting Rooms', 'meeting'],
  ];
  const cell = { padding: '0.85rem 1rem', fontFamily: 'var(--font-body)', fontSize: '0.92rem', color: 'var(--text-body)', borderBottom: '1px solid var(--border)', verticalAlign: 'top' };
  const colHead = { ...cell, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.05rem', color: 'var(--text-strong)', borderBottom: '2px solid var(--navy-700)' };
  const rowHead = { ...cell, fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.74rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', whiteSpace: 'nowrap' };
  return (
    <section id="compare" style={{ background: 'var(--bg)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
        <div style={{ marginBottom: 'var(--space-7)' }}>
          <SectionHeading eyebrow="Compare" title="Find the right Partnership" lead="Everything side by side, so you don't have to hold three pages in your head." as="h2" />
        </div>
        <div style={{ overflowX: 'auto', border: '1px solid var(--border)', background: 'var(--surface)', boxShadow: 'var(--shadow-sm)' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 680 }}>
            <thead>
              <tr>
                <th style={{ ...colHead, textAlign: 'left', background: 'var(--surface-sunken)' }}></th>
                {cols.map((c, i) => (
                  <th key={c} style={{ ...colHead, textAlign: 'left', background: i === 1 ? 'var(--navy-50)' : 'transparent' }}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r[0]}>
                  <td style={rowHead}>{r[0]}</td>
                  {r.slice(1).map((v, i) => (
                    <td key={i} style={{ ...cell, background: i === 1 ? 'var(--navy-50)' : 'transparent', fontWeight: r[0] === 'Price' ? 700 : 400, color: r[0] === 'Price' ? 'var(--text-muted)' : 'var(--text-body)' }}>{v}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.82rem', color: 'var(--text-muted)', margin: 'var(--space-3) 0 0' }}>Current rates confirmed on your tour. Day passes available for Business Club.</p>

        {/* Quick guide */}
        <div style={{ marginTop: 'var(--space-7)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-3)' }}>
          {quick.map(([need, best, to]) => (
            <button key={need} onClick={() => onNavigate(to)} style={{
              all: 'unset', cursor: 'pointer', border: '1px solid var(--border)', background: 'var(--surface)',
              padding: 'var(--space-4)', display: 'flex', flexDirection: 'column', gap: 4,
            }}>
              <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.72rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>I need…</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.92rem', color: 'var(--text-body)' }}>{need}</span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1rem', color: 'var(--navy-700)' }}>{best} →</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function Community() {
  const pillars = [
    { n: '1', sym: 'Mm', name: 'Mastermind', title: 'Mastermind', img: '../../assets/community-12.webp', body: 'Small peer groups that meet to sharpen each other\'s businesses. Real accountability, honest feedback, shared wins. Iron sharpens iron.' },
    { n: '2', sym: 'Mx', name: 'Mixers', title: 'Creators Mixers', img: '../../assets/community-08.webp', body: 'Regular gatherings where makers, founders, and creatives meet casually over coffee, meals, or drinks. Collaborations start here.' },
    { n: '3', sym: 'Fr', name: 'Friends', title: 'Genuine relationship', img: '../../assets/community-05.webp', body: 'You came for a desk and found a team. The friendships made at Alchemy are the part our Partners talk about most.' },
  ];
  return (
    <section style={{ background: 'var(--bg)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--space-8)' }}>
        <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', marginBottom: 'var(--space-7)' }}>
          <SectionHeading align="center" eyebrow="Really, it's more than space"
            title="Connection is the product"
            lead="The space is just where it happens. What you really join is a room full of people building right alongside you, and rooting for you the whole way." as="h2" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {pillars.map((p) => (
            <div key={p.sym} style={{ background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' }}>
              <div style={{ position: 'relative', aspectRatio: '16/10', overflow: 'hidden' }}>
                <img src={p.img} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.4rem', color: 'var(--text-strong)', margin: 0, lineHeight: 1.15 }}>{p.title}</h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '1rem', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{p.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Collage() {
  const shots = [
    { src: '../../assets/community-19.webp', cap: 'Genuine connection' },
    { src: '../../assets/community-07.webp', cap: 'Tangible Growth' },
    { src: '../../assets/community-03.webp', cap: 'New friends' },
    { src: '../../assets/community-22.webp', cap: 'Always energized' },
  ];
  return (
    <section style={{ background: 'var(--bg)' }}>
      <div style={{ ...homeWrap, paddingBottom: 'var(--section-y)' }}>
        <div style={{ marginBottom: 'var(--space-6)' }}>
          <SectionHeading eyebrow="THIS is &ldquo;Community" title="Picture yourself in the room" lead="Real Partners, real events, real conversations. See more on Instagram @alchemy_cowork." as="h2" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-3)' }}>
          {shots.map((s, i) => (
            <div key={i} style={{ position: 'relative', aspectRatio: i % 2 ? '3/4' : '4/5', overflow: 'hidden', marginTop: i % 2 ? 'var(--space-6)' : 0 }}>
              <img src={s.src} alt={s.cap} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <span style={{ position: 'absolute', left: 10, bottom: 10, background: 'rgba(20,33,65,0.78)', color: '#fff', fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.66rem', letterSpacing: '0.1em', textTransform: 'uppercase', padding: '4px 9px' }}>{s.cap}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  const reviews = [
    { q: 'From weekly masterminds where we share strategies, wins, and challenges, to the monthly Final Friday celebrations, this is a space where business owners genuinely support and uplift each other.', who: 'Catherine S.', role: 'Google review' },
    { q: 'It feels like we gained a whole team that genuinely cares about your success and supports each other\u2019s growth. We had no idea just how much we were about to gain!', who: 'Starr C.', role: 'Google review' },
    { q: 'If you\u2019re searching for more than just a place to work, Alchemy is the answer. From the moment I stepped in, I felt welcomed by a community of like-minded individuals.', who: 'Verified Partner', role: 'Google review' },
  ];
  return (
    <section style={{ background: 'var(--navy-700)', color: 'var(--text-on-dark)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 'var(--space-3)', marginBottom: 'var(--space-7)' }}>
          <span style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: '1.5rem', color: 'var(--gold-500)', letterSpacing: '0.04em' }}>★★★★★ 4.9</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', letterSpacing: '-0.01em', margin: 0 }}>Don't take our word for it</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.05rem', color: 'var(--slate-300)', margin: 0, maxWidth: '42ch' }}>What real entrepreneurs are really saying.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {reviews.map((r, idx) => (
            <figure key={idx} style={{ margin: 0, background: 'var(--navy-800)', border: '1px solid var(--border-on-dark)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <span style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: '0.95rem', color: 'var(--gold-500)', letterSpacing: '0.1em' }}>★★★★★</span>
              <blockquote style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: '1.05rem', lineHeight: 1.6, color: 'rgba(255,255,255,0.92)', flex: 1 }}>"{r.q}"</blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, borderTop: '1px solid var(--border-on-dark)', paddingTop: 'var(--space-4)' }}>
                <span style={{ width: 38, height: 38, flex: 'none', borderRadius: '50%', background: 'var(--slate-500)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '1rem' }}>{r.who[0]}</span>
                <span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '0.95rem', color: '#fff' }}>{r.who}</span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-label)', fontSize: '0.72rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--slate-300)' }}>{r.role}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Locations({ onNavigate }) {
  const locs = [
    { img: '../../assets/exterior-facade.webp', name: 'Downtown Gastonia', addr: '121 W. Main Ave', status: 'open', tourKey: 'dtg',
      character: 'Our flagship. A buzzing coffee shop, premium build, at the heart of Downtown Gastonia for walkability, and the tight-knit community that started it all.',
      benefits: ['24/7 coworking + private offices', 'The Wandering Cup Coffee', 'Weekly masterminds & mixers'] },
    { img: '../../assets/event-space.webp', name: 'Charlotte', addr: '2459 Wilkinson Blvd', status: 'open', tourKey: 'clt',
      character: 'Room to scale. The Launch Pad event space, a podcast studio, and bookable rooms built for teams that are going bigger.',
      benefits: ['The Launch Pad event space', 'Podcast studio + meeting rooms', 'Book any space online, by the hour'] },
    { img: '../../assets/lry/lry-lounge-2.jpg', name: 'Loray Gastonia', addr: '300 S Firestone St, Suite 200 H', status: 'newest', tourKey: 'lry',
      character: 'Exposed brick, massive windows, the definition of an energizing environment.',
      benefits: ['On-site gym (not included)', 'More space to build'] },
  ];
  return (
    <section id="locations" style={{ background: 'var(--bg)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
        <div style={{ marginBottom: 'var(--space-7)' }}>
          <SectionHeading eyebrow="Three locations and growing!" title="Partnership means you also have three locations." lead="Same community, same values, offering more places to build your business. Find the location that fits where you are." as="h2" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {locs.map((l) => {
            const newest = l.status === 'newest';
            return (
              <div key={l.name} style={{ background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' }}>
                <div style={{ position: 'relative', aspectRatio: '3/2', overflow: 'hidden', background: 'var(--surface-inverse)' }}>
                  {l.img
                    ? <img src={l.img} alt={l.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-5)', background: 'linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%)' }}>
                        <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.72rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', textAlign: 'center' }}>Photos coming soon</span>
                      </div>}
                  <div style={{ position: 'absolute', top: 12, left: 12 }}>
                    {newest ? <Tag variant="copper">Newest!</Tag> : <Tag variant="solid" dot>Now Open</Tag>}
                  </div>
                </div>
                <div style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', flex: 1 }}>
                  <div>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.4rem', color: 'var(--text-strong)', margin: 0, lineHeight: 1.15 }}>{l.name}</h3>
                    <p style={{ fontFamily: 'var(--font-label)', fontSize: '0.78rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '4px 0 0' }}>{l.addr}</p>
                  </div>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: '0.98rem', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{l.character}</p>
                  <ul style={{ listStyle: 'none', margin: '4px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                    {l.benefits.map((b, i) => (
                      <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontFamily: 'var(--font-body)', fontSize: '0.92rem', color: 'var(--text-body)' }}>
                        <span style={{ color: 'var(--slate-500)', fontWeight: 700, flex: 'none' }}>+</span>{b}
                      </li>
                    ))}
                  </ul>
                  <div style={{ marginTop: 'var(--space-2)', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    <Button variant="primary" size="sm" onClick={() => onNavigate('tour')}>Tour</Button>
                    <Button variant="outline" size="sm" as="a" href={window.alcUrl ? window.alcUrl('virtualTour', l.tourKey) : 'VirtualTour.html#' + l.tourKey}>Virtual Tour</Button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Tiers({ onNavigate }) {
  const tiers = [
    { name: 'Business Club', price: '$149', sub: '/mo · flexible plans', blurb: 'Best for getting started & flexible work.',
      features: ['24/7 open coworking access', 'Open seating', 'Phone booths for storage', 'Mailbox add-on', '4 meeting-room credits / mo', 'Community access & events'], highlight: false },
    { name: 'Dedicated Desk', price: '$349', sub: '/mo · flexible plans', blurb: 'Best for a permanent home base.',
      features: ['24/7 access', 'Your dedicated desk', 'Locking cabinet with key', 'Mail included', '5 meeting-room credits / mo', 'Personalize your desk'], highlight: true },
    { name: 'Private Office', price: 'Prices Vary', sub: 'month to month', blurb: 'Best for teams & established businesses.',
      features: ['24/7 access', 'Fully furnished office', 'Furnished storage', 'Mail included', '6 meeting-room credits / mo', 'Custom signage on your door'], highlight: false },
  ];
  return (
    <section id="tiers" style={{ background: 'var(--bg-alt)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
        <div id="compare" style={{ position: 'relative', top: '-90px' }} />
        <div style={{ marginBottom: 'var(--space-7)' }}>
          <SectionHeading eyebrow="Compare Partnerships" title="Start where you are" lead="See what comes with each Partnership side by side, then start where you are — every tier is month-to-month, and you can move up as you grow." as="h2" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)', alignItems: 'start' }}>
          {tiers.map((t) => {
            const dark = t.highlight;
            return (
              <div key={t.name} style={{
                display: 'flex', flexDirection: 'column', gap: 'var(--space-4)',
                background: dark ? 'var(--navy-700)' : 'var(--surface)', color: dark ? 'var(--text-on-dark)' : 'var(--text-body)',
                border: '1px solid ' + (dark ? 'var(--navy-700)' : 'var(--border)'), padding: 'var(--space-6)',
                boxShadow: dark ? 'var(--shadow-lg)' : 'var(--shadow-sm)', transform: dark ? 'translateY(-10px)' : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '1.35rem', margin: 0, color: dark ? '#fff' : 'var(--text-strong)' }}>{t.name}</h3>
                  {dark && <Tag variant="copper">Popular</Tag>}
                </div>
                <p style={{ margin: 0, fontSize: '0.92rem', color: dark ? 'var(--slate-300)' : 'var(--text-muted)' }}>{t.blurb}</p>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: '1.7rem', color: dark ? '#fff' : 'var(--navy-700)' }}>{t.price}</span>
                  <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.85rem', color: dark ? 'var(--slate-300)' : 'var(--text-muted)' }}>{t.sub}</span>
                </div>
                <div style={{ height: 1, background: dark ? 'var(--border-on-dark)' : 'var(--border)' }} />
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9, flex: 1 }}>
                  {t.features.map((f, i) => (
                    <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: '0.92rem', lineHeight: 1.4 }}>
                      <span style={{ color: dark ? 'var(--gold-500)' : 'var(--slate-500)', fontWeight: 700, flex: 'none' }}>+</span>
                      <span style={{ color: dark ? 'rgba(255,255,255,0.9)' : 'var(--text-body)' }}>{f}</span>
                    </li>
                  ))}
                </ul>
                <Button variant={dark ? 'onDark' : 'primary'} block onClick={() => onNavigate('intake')}>Get started</Button>
              </div>
            );
          })}
        </div>
        <p style={{ textAlign: 'center', fontFamily: 'var(--font-body)', fontSize: '0.9rem', color: 'var(--text-muted)', margin: 'var(--space-6) 0 0' }}>
          Meeting rooms and day passes available too. See <a href={window.alcUrl ? window.alcUrl('plans') : '#'} style={{ color: 'var(--link)' }}>full plan details</a>.
        </p>
      </div>
    </section>
  );
}

function MeetingBand({ onNavigate }) {
  return (
    <section style={{ position: 'relative', minHeight: 460, display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      <img src="../../assets/meeting-room-real.webp" alt="Meeting room" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(20,33,65,0.92) 0%, rgba(20,33,65,0.66) 55%, rgba(20,33,65,0.30) 100%)' }} />
      <div style={{ ...homeWrap, position: 'relative' }}>
        <div style={{ maxWidth: 540, color: 'var(--text-on-dark)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <SectionHeading onDark eyebrow="Open to the public" title="Meeting rooms for every moment" lead="Conference rooms for the team retreat; intimate rooms for contract signings, interviews, and 1:1s. Hosting something bigger? The Launch Pad at Alchemy CLT is built for it." as="h2" />
          <div style={{ display: 'flex', gap: 12 }}>
            <Button variant="onDark" onClick={() => onNavigate('meeting')}>Book a Room</Button>
            <Button variant="slate" onClick={() => onNavigate('meeting')}>Room details</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function DayPass({ onNavigate }) {
  return (
    <section style={{ background: 'var(--slate-500)' }}>
      <div style={{ ...homeWrap, 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: '2rem', color: '#fff', margin: 0, lineHeight: 1.1 }}>Just passing through? We got you.</p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '1.05rem', color: 'rgba(255,255,255,0.85)', margin: '8px 0 0' }}>Grab a day pass and work from Alchemy for the day.</p>
        </div>
        {(() => {
          /* Day-pass destination comes from the shared registry (links.jsx). */
          const dp = window.alcLink ? window.alcLink(null, 'dayPass') : '';
          return 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('join')}>Get a Day Pass</Button>;
        })()}
      </div>
    </section>
  );
}

function Faq() {
  const items = [
    { q: 'Is there parking?', a: 'Yes. Charlotte offers free direct access parking, a rare find this close to Uptown. Downtown Gastonia offers plenty of public parking surrounding the building. Loray Mill offers ten dedicated parking spots for Alchemy only as well as use of the parking lot as a whole.' },
    { q: 'Can I use Alchemy as my business address and get mail here?', a: 'Yes. Mail is included on Dedicated Desk and Private Office plans, and available as an add-on for Business Club. Listing on maps is reserved for office Parters only.' },
    { q: 'What\'s the guest policy?', a: 'Partners are welcome to bring guests as it serves their business. (Full guest policy available when joining.)' },
    { q: 'How\'s the internet?', a: '1 GIG Fiber internet at each location! Built for the most advanced and complex use cases. Of course, that means reliable connectivity for client calls, video meetings, and uninterrupted work.' },
    { q: 'Is there printing?', a: 'Yes, printing is available on-site and included with Partnership.' },
    { q: 'How flexible is the lease?', a: 'Flexibility is the name of the game. Plans include month-to-month flexibility as well as long-term options, friendly to any size business in any season. Actual entrepreneurs run this place, we get it.' },
    { q: 'What are the building access hours?', a: 'Coworking access is 24/7 for Partners. The coffee shop at Downtown Gastonia is open Mon to Fri 7a to 4p.' },
    { q: 'How fast can I move in?', a: 'As soon as you would like! Seriously, we all have business to tend to, no time for delays. Our solutions are turnkey and ready when you are.' },
    { q: 'Can my team access the office plans?', a: 'Yes — Private Office plans support teams. (Per-plan team access details confirmed on your tour.)' },
    { q: 'Do you offer day passes?', a: 'Yes. Grab a day pass and work from Alchemy for the day.' },
  ];
  return (
    <section id="faq" style={{ background: 'var(--bg)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)', display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'var(--space-8)', alignItems: 'start' }}>
        <SectionHeading eyebrow="FAQs" title="Still have questions? Let's talk." lead="Can't find what you're looking for? Call (704) 753-8722 or email team@alchemycowork.com." as="h2" />
        <Accordion defaultOpen={[0]} items={items} />
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" style={{ background: 'var(--surface-inverse)', color: 'var(--text-on-dark)' }}>
      <div style={{ ...homeWrap, paddingTop: 'var(--section-y)', 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 onDark eyebrow="Contact Us" title="Let's talk" lead="Questions about space, membership, or hosting an event? Send a note and we'll get right back to you." as="h2" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>Call</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: '1.05rem', color: '#fff' }}>(704) 753-8722</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>Email</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: '1.05rem', color: '#fff' }}>team@alchemycowork.com</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>Visit</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: '1.05rem', color: '#fff', lineHeight: 1.5 }}>121 W. Main Ave, Gastonia<br />2459 Wilkinson Blvd, Charlotte</div>
            </div>
          </div>
        </div>
        <window.FormEmbed form="contact" />
      </div>
    </section>
  );
}

function HomeScreen({ onNavigate }) {
  return (
    <React.Fragment>
      {/* Community layer — felt before anything is sold */}
      <Hero onNavigate={onNavigate} />
      <PartnersExpanded />
      <Tiers onNavigate={onNavigate} />
      <Locations onNavigate={onNavigate} />
      <Community />
      <Collage />
      <Quote />
      {/* Selling layer — now that the community is felt */}
      <NeedsNav onNavigate={onNavigate} />
      <MeetingBand onNavigate={onNavigate} />
      <DayPass onNavigate={onNavigate} />
      <Faq />
      <Contact />
    </React.Fragment>
  );
}

window.HomeScreen = HomeScreen;