/* global React, Photo, Reveal, Icon */
const { useState: useStateCom, useEffect: useEffectCom } = React;

function CarouselCom({ slides }) {
  const [i, setI] = useStateCom(0);
  const next = () => setI((i + 1) % slides.length);
  const prev = () => setI((i - 1 + slides.length) % slides.length);
  useEffectCom(() => {
    const id = setInterval(() => setI((v) => (v + 1) % slides.length), 5200);
    return () => clearInterval(id);
  }, [slides.length]);
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '16/10', background: 'var(--forest-deep)' }}>
        {slides.map((s, idx) => (
          <div key={idx} style={{ position: 'absolute', inset: 0, opacity: idx === i ? 1 : 0, transition: 'opacity 700ms ease' }}>
            <Photo src={s.src} alt={s.title} style={{ width: '100%', height: '100%' }} />
          </div>
        ))}
        {/* Caption overlay */}
        <div style={{ position: 'absolute', left: 32, bottom: 28, color: 'var(--cream)', zIndex: 2 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--camel)', textTransform: 'uppercase', marginBottom: 8 }}>
            0{i + 1} / 0{slides.length}
          </div>
          <div className="serif" style={{ fontSize: 28, color: 'var(--cream)' }}>{slides[i].title}</div>
          <div className="body-serif" style={{ fontSize: 15, color: 'rgba(245,240,232,0.78)', marginTop: 4, maxWidth: '42ch' }}>{slides[i].desc}</div>
        </div>
        {/* Arrows */}
        <button aria-label="Previous" onClick={prev} style={{ position: 'absolute', top: '50%', left: 20, transform: 'translateY(-50%)', width: 44, height: 44, borderRadius: '50%', background: 'rgba(26,26,26,0.4)', color: 'var(--cream)', border: '1px solid rgba(245,240,232,0.25)', cursor: 'pointer', zIndex: 3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 2L4 7l5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>
        </button>
        <button aria-label="Next" onClick={next} style={{ position: 'absolute', top: '50%', right: 20, transform: 'translateY(-50%)', width: 44, height: 44, borderRadius: '50%', background: 'rgba(26,26,26,0.4)', color: 'var(--cream)', border: '1px solid rgba(245,240,232,0.25)', cursor: 'pointer', zIndex: 3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>
        </button>
      </div>
      {/* Dots */}
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 24 }}>
        {slides.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)} aria-label={`Slide ${idx+1}`}
            style={{ width: idx === i ? 28 : 8, height: 2, border: 0, padding: 0, background: idx === i ? 'var(--camel)' : 'rgba(26,26,26,0.25)', cursor: 'pointer', transition: 'width 300ms, background 300ms' }} />
        ))}
      </div>
    </div>
  );
}

function PageCommunity({ go, toast }) {
  const [email, setEmail] = useStateCom('');
  const submit = (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) { toast('Please enter a valid email.'); return; }
    toast(`You're on the list. ${email} will hear first.`);
    setEmail('');
  };

  const clubSlides = [
    { title: 'Simulator Bays', desc: 'Tournament-grade sims, private suites.', src: 'assets/club-simulator.png' },
    { title: 'The Lounge', desc: 'A living room with a short game view.', src: 'assets/club-lounge.png' },
    { title: 'Golf School', desc: 'Coaching from first swing to scratch.', src: 'assets/club-school.png' },
    { title: 'Pro Shop', desc: 'Curated apparel, grips, and finds.', src: 'assets/club-proshop.png' },
    { title: 'The Café', desc: 'Matcha, espresso, snacks, long mornings.', src: 'assets/club-cafe.png' },
    { title: 'Private Events', desc: 'Book the space for your night.', src: 'assets/club-events.png' },
  ];

  return (
    <div className="page-enter">
      {/* Hero — image background */}
      <section style={{ minHeight: '90vh', display: 'flex', alignItems: 'center', paddingTop: 'var(--nav-h)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <Photo dark src="assets/club-hero.png" alt="8tee club entertainment space" objectPosition="center" tag={false} style={{ width: '100%', height: '100%' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0.4), rgba(31,54,32,0.7))' }} />
        </div>
        <div className="container" style={{ paddingTop: 80, paddingBottom: 80, position: 'relative', color: 'var(--cream)' }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 32 }}>The 8tee Club · 2027+</div>
          <h1 className="h-display" style={{ color: 'var(--cream)', maxWidth: '16ch' }}>
            A home for <em className="serif-italic" style={{ color: 'var(--camel)' }}>the game.</em>
          </h1>
          <p className="lead" style={{ color: 'rgba(245,240,232,0.88)', marginTop: 40, maxWidth: '48ch' }}>
            A full golf entertainment destination. Simulator bays, a luxury lounge, a golf school, a pro shop, and a café — in one warm, intentional space.
          </p>
        </div>
      </section>

      {/* Inside the Club — carousel */}
      <section className="bg-off-white sec-pad">
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16 }}>Inside the Club</div>
          <h2 className="h-large" style={{ marginBottom: 56, maxWidth: '18ch' }}>
            Every room <em className="serif-italic">invites connection.</em>
          </h2>
          <CarouselCom slides={clubSlides} />
        </div>
      </section>

      {/* Design vision — video placeholder */}
      <section className="bg-cream sec-pad">
        <div className="container">
          <div className="two-col">
            <Reveal>
              <div style={{ position: 'relative', aspectRatio: '9/16', maxHeight: '78vh', margin: '0 auto', background: 'var(--forest-deep)', overflow: 'hidden' }}>
                <iframe
                  src="https://www.youtube.com/embed/uMVh29f41TM?rel=0&playsinline=1"
                  title="Design walkthrough"
                  allow="autoplay; encrypted-media; fullscreen"
                  allowFullScreen
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, display: 'block' }}
                />
                <div style={{ position: 'absolute', left: 24, bottom: 24, color: 'var(--cream)', pointerEvents: 'none', textShadow: '0 2px 12px rgba(0,0,0,0.6)' }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.24em', color: 'var(--camel)', textTransform: 'uppercase', marginBottom: 6 }}>Video</div>
                  <div className="serif" style={{ fontSize: 20 }}>Design walkthrough</div>
                </div>
              </div>
            </Reveal>
            <Reveal delay={100}>
              <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 24 }}>Design</div>
              <h2 className="serif-italic" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.12, marginBottom: 28 }}>
                Designed for play, work, and everything after.
              </h2>
              <p className="body-serif" style={{ marginBottom: 24 }}>
                The Club is being designed the way we source apparel — with a point of view. Warm wood, bronze detailing, linen, ceramic, and earth-toned textiles pulled from the same world the brand lives in.
              </p>
              <p className="body-serif" style={{ color: 'rgba(26,26,26,0.7)' }}>
                It should feel more like a favorite restaurant than a typical clubhouse.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Waitlist */}
      <section id="join" className="bg-forest sec-pad">
        <div className="container" style={{ maxWidth: 760, textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 20 }}>Opening 2027+</div>
          <h2 className="h-hero" style={{ color: 'var(--cream)', marginBottom: 20 }}>
            Join the <em className="serif-italic" style={{ color: 'var(--camel)' }}>waitlist.</em>
          </h2>
          <p className="lead" style={{ color: 'rgba(245,240,232,0.8)', margin: '0 auto 40px', maxWidth: '44ch' }}>
            Hear first about founding memberships, preview nights, and opening.
          </p>
          <form onSubmit={submit} style={{ display: 'flex', gap: 12, alignItems: 'flex-end', flexWrap: 'wrap', color: 'var(--cream)' }}>
            <div className="field" style={{ flex: 1, minWidth: 240, textAlign: 'left' }}>
              <label>Email</label>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@email.com" />
            </div>
            <button className="btn btn-camel" type="submit">Submit <Icon.arrow /></button>
          </form>
        </div>
      </section>
    </div>
  );
}

window.PageCommunity = PageCommunity;