/* global React, Photo, Reveal, Icon */
const { useState: useStateApp } = React;

function PageApparel({ go, toast }) {
  const [email, setEmail] = useStateApp('');
  const submit = (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) { toast('Please enter a valid email.'); return; }
    toast(`On the list. ${email} gets first access.`);
    setEmail('');
  };

  return (
    <div className="page-enter">
      {/* Hero */}
      <section style={{ position: 'relative', minHeight: '80vh', display: 'flex', alignItems: 'center', paddingTop: 'var(--nav-h)' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <Photo dark src="assets/apparel-hero.png" alt="8tee apparel and gear collection" objectPosition="center 35%" style={{ width: '100%', height: '100%' }} tag={false} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0.35), rgba(45,74,45,0.6))' }} />
        </div>
        <div className="container" style={{ position: 'relative', color: 'var(--cream)', paddingTop: 80, paddingBottom: 80 }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 28 }}>Apparel & Gear</div>
          <h1 className="h-hero" style={{ color: 'var(--cream)', maxWidth: '16ch', marginBottom: 24 }}>
            Gear that's as <em className="serif-italic" style={{ color: 'var(--camel)' }}>individual</em> as your game.
          </h1>
          <p className="lead" style={{ maxWidth: '50ch', color: 'rgba(245,240,232,0.88)' }}>
            8tee apparel and accessories launching end of 2026.
          </p>
          <span className="tag-soon" style={{ marginTop: 32 }}>Late 2026</span>
        </div>
      </section>

      {/* Categories */}
      <section className="bg-off-white sec-pad">
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 56 }}>What's coming</div>
          <div className="tile-grid">
            {[
              ['Golf Athleisure', 'Fit for 18 holes. Fit for brunch after.', 'assets/apparel-athleisure.png'],
              ['Custom Accessories', 'Headcovers, towels, marker sets — yours.', 'assets/apparel-accessories.png'],
              ['Personalized Grips', 'Your club, your palm, your signature.', 'assets/apparel-grips.png'],
              ['Trendy Global Gear', 'Pieces you won\'t see on any US shelf.', 'assets/apparel-global.png'],
            ].map(([t, d, src], i) => (
              <Reveal key={i} delay={i * 60}>
                <div className="tile">
                  <Photo src={src} alt={t} objectPosition="center" />
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                    <h4 style={{ margin: 0 }}>{t}</h4>
                    <span className="tag-outline">Coming Soon</span>
                  </div>
                  <p>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Personalization */}
      <section className="bg-off-white sec-pad">
        <div className="container" style={{ maxWidth: 980, textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16 }}>Personalization</div>
          <h2 className="h-hero" style={{ marginBottom: 28 }}>
            Your gear. <em className="serif-italic" style={{ color: 'var(--camel)' }}>Your identity.</em>
          </h2>
          <p className="body-serif" style={{ maxWidth: '56ch', margin: '0 auto 40px', color: 'rgba(26,26,26,0.75)' }}>
            Custom club grips, headcovers, bags, and accessories designed around your personality. No two setups alike.
          </p>
          <form onSubmit={submit} style={{ display: 'flex', gap: 12, alignItems: 'flex-end', flexWrap: 'wrap', justifyContent: 'center', maxWidth: 560, margin: '0 auto' }}>
            <div className="field" style={{ flex: 1, minWidth: 240, textAlign: 'left' }}>
              <label style={{ color: 'var(--charcoal)' }}>Email</label>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@email.com"
                style={{ color: 'var(--charcoal)', borderColor: 'rgba(26,26,26,0.2)' }} />
            </div>
            <button className="btn btn-camel" type="submit">Join the Waitlist <Icon.arrow /></button>
          </form>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4, marginTop: 80 }} className="perso-grid">
            <Photo caption="Grip: monogram" />
            <Photo caption="Headcover: leather" />
            <Photo caption="Bag: custom" />
            <Photo caption="Towel: woven" />
          </div>
        </div>
        <style>{`
          @media (max-width: 640px) { .perso-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        `}</style>
      </section>
    </div>
  );
}

window.PageApparel = PageApparel;