/* global React, Photo, Reveal, Icon */

function PageStory({ go, toast }) {
  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/about-hero.png" alt="Golf course at golden hour" objectPosition="center 55%"
                 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.65))' }} />
        </div>
        <div className="container" style={{ position: 'relative', color: 'var(--cream)', paddingTop: 80, paddingBottom: 80 }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 28 }}>Our Story</div>
          <h1 className="h-hero" style={{ color: 'var(--cream)', maxWidth: '18ch' }}>
            We didn't find golf. <em className="serif-italic" style={{ color: 'var(--camel)' }}>Golf found us.</em>
          </h1>
        </div>
      </section>

      {/* Angelina's journey */}
      <section className="bg-cream sec-pad">
        <div className="container" style={{ maxWidth: 960, textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 32 }}>Angelina's Story</div>
          <blockquote className="serif-italic" style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', lineHeight: 1.18, color: 'var(--camel)', margin: '0 auto 48px', maxWidth: '18ch' }}>
            "I picked up a club for the first time and everything changed."
          </blockquote>
          <p className="body-serif" style={{ color: 'var(--charcoal)', maxWidth: '52ch', margin: '0 auto 40px' }}>
            Angelina is documenting her entire journey — first lessons, first tournament nerves, first hole-in-one (eventually). No filters. No pretending. For every woman, every beginner, and every person who's ever felt like golf wasn't built for them.
          </p>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--camel)', textTransform: 'uppercase', marginBottom: 24 }}>
            Follow her journey
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 28, flexWrap: 'wrap' }}>
            <a href="https://www.instagram.com/angegolfs" target="_blank" rel="noopener" style={{ color: 'var(--charcoal)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}><Icon.instagram /> <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Instagram</span></a>
            <a href="https://www.tiktok.com/@angegolfs" target="_blank" rel="noopener" style={{ color: 'var(--charcoal)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}><Icon.tiktok /> <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>TikTok</span></a>
            <a href="https://www.youtube.com/@8teegolf/shorts" target="_blank" rel="noopener" style={{ color: 'var(--charcoal)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}><Icon.youtube /> <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>YouTube</span></a>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="bg-off-white sec-pad">
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16, textAlign: 'center' }}>What we believe</div>
          <h2 className="h-large" style={{ textAlign: 'center', marginBottom: 80, maxWidth: '16ch', marginLeft: 'auto', marginRight: 'auto' }}>
            Three things <em className="serif-italic">guide</em> every decision.
          </h2>
          <div className="value-grid">
            {[
              ['community', 'People over scorecards', 'We lead with people. The number on the card comes second.'],
              ['gate', 'Golf without the gatekeeping', 'No stiff dress codes. No unspoken rules. Everyone gets a tee time.'],
              ['style', 'Your style, your game', 'Your clubs, your fit, your flow. No two setups alike.'],
            ].map(([ic, title, body], i) => {
              const IconCmp = Icon[ic];
              return (
                <Reveal key={i} delay={i * 80}>
                  <div className="value">
                    <div style={{ color: 'var(--camel)', marginBottom: 24 }}><IconCmp /></div>
                    <h3 className="h-med" style={{ marginBottom: 12 }}>{title}</h3>
                    <p style={{ color: 'rgba(26,26,26,0.72)', fontSize: 16, lineHeight: 1.6, margin: 0 }}>{body}</p>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="bg-forest sec-pad">
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 16 }}>The Plan</div>
          <h2 className="h-large" style={{ color: 'var(--cream)', maxWidth: '16ch' }}>
            Building 8tee, <em className="serif-italic" style={{ color: 'var(--camel)' }}>one chapter at a time.</em>
          </h2>
          <div className="timeline">
            <div className="t-item">
              <div className="t-year">2026 · Summer</div>
              <div className="t-label" style={{ color: 'var(--cream)' }}>Simulator rentals launch</div>
              <div style={{ fontSize: 14, color: 'rgba(245,240,232,0.72)', marginTop: 8 }}>
                Mobile setups for private events and brand activations.
              </div>
            </div>
            <div className="t-item">
              <div className="t-year">2026 · Late</div>
              <div className="t-label" style={{ color: 'var(--cream)' }}>Apparel drops begin</div>
              <div style={{ fontSize: 14, color: 'rgba(245,240,232,0.72)', marginTop: 8 }}>
                High quality, exclusive drops.
              </div>
            </div>
            <div className="t-item">
              <div className="t-year">2027+</div>
              <div className="t-label" style={{ color: 'var(--cream)' }}>The 8tee Golf Club opens</div>
              <div style={{ fontSize: 14, color: 'rgba(245,240,232,0.72)', marginTop: 8 }}>
                Simulator bays, lounge, school, café, shop.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PageStory = PageStory;