// Uri Padel — landing page (coming-soon teaser).
// Premium, minimal, editorial, architectural. Black & white.

const { Mark, CourtPlaceholder, Hatch } = window.UriSite;

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="nav-logo">
          <Mark size={34} />
          <span className="wordmark">URI&nbsp;PADEL</span>
        </a>
        <div className="nav-links">
          <a href="#manifesto">Manifesto</a>
          <a href="#about">About</a>
          <a href="#locations">Locations</a>
          <a href="#facilities">Facilities</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="nav-cta">Get in touch</a>
      </div>
    </nav>);

}

function Hero() {
  return (
    <header className="hero" id="top">
      <div className="wrap">
        <div className="hero-row-top">
          <div className="label">Uri Padel Network</div>
          <div className="label" style={{ textAlign: 'right' }}>
            Coming soon<br />Seoul · Daegu · More
          </div>
        </div>

        <div className="hero-wordmark">
          <img src="assets/uri-mark.png" alt="" style={{ height: 'clamp(160px, 24vw, 320px)', width: 'auto', display: 'block' }} />
          <div className="word">RI&nbsp;PADEL</div>
        </div>

        <div className="hero-sub">
          <div className="lead">
            In Korea,<br />we say Uri.
          </div>
          <div className="body lg">
            In Korea we don't say <em>mine</em>, we say <strong>Uri</strong> (우리).<br /><br />
            Uri Padel is building a national network of premium padel clubs across Korea.
          
          </div>
        </div>
      </div>
    </header>);

}

function About() {
  return (
    <section className="section" id="about">
      <div className="wrap">
        <div className="section-head">
          <div className="label">02 · About</div>
          <h2>A home<br />for padel<br />in Korea.</h2>
        </div>
        <div className="about-grid">
          <div className="label">What we are</div>
          <div className="about-col body lg">
            <p>
              Uri — 우리 — means <em>ours</em> in Korean.
              It's the word you use for the things that belong to a community:
              our team, our home, our club.
            </p>
            <p>
              Uri Padel is a network of padel clubs being built across Korea.
              Each location is designed as a place to play seriously, and to
              stay after the match — quiet architecture, clay-surface courts,
              a café, a coaching program.
            </p>
          </div>
          <div className="about-col body lg">
            <p>
              Padel is the fastest-growing racquet sport globally, with
              tens of millions of players in Europe and Latin America.
              Korea is early — and that's the opportunity.
            </p>
            <p>
              We're building for the next decade, not the trend cycle.
              Our clubs are conceived with architects, not contractors,
              and programmed for a community that wants a place to
              belong, not just a court to rent.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function Manifesto() {
  return (
    <section className="section" id="manifesto" style={{ padding: '140px 0' }}>
      <div className="wrap">
        <div className="section-head">
          <div className="label">01 · Manifesto</div>
          <h2>Built<br />for Korea.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 40, alignItems: 'start' }}>
          <div className="label">
</div>
          <div style={{ fontFamily: 'Oswald, sans-serif', fontWeight: 300, fontSize: 'clamp(28px, 3.5vw, 48px)', lineHeight: 1.15,
              letterSpacing: '-0.005em', textTransform: 'uppercase',
              maxWidth: '22ch'
            }}>
            <p style={{ margin: '0 0 1em' }}>Uri Padel exists to build the foundation of padel in Korea.</p>
            <p style={{ margin: '0 0 1em' }}>We believe the sport belongs to everyone.</p>
            <p style={{ margin: '0 0 1em' }}>Our mission is to make it premium, accessible, professional and scalable.</p>
            <p style={{ margin: '0 0 1em', opacity: 0.7, fontSize: '0.72em' }}>
              We invest in premium infrastructure,<br />
              develop multi-location clubs,<br />
              organize tournaments,<br />
              create strong community ecosystems,<br />
              and work hand-to-hand with the national federation.
            </p>
            <p style={{ margin: '0 0 1em' }}>Uri Padel is not a single venue.<br />It is a national network.</p>
            <p style={{ margin: '0 0 1em' }}>Built to grow the sport.<br />Built to scale.<br />Built for Korea.</p>
            <p style={{ margin: '0' }}>Because in Korea, we don't say <em style={{ fontStyle: 'normal', opacity: 0.5 }}>mine</em>.<br />We say Uri.</p>
          </div>
        </div>
      </div>
    </section>);

}

function Locations() {
  return (
    <section className="section" id="locations">
      <div className="wrap">
        <div className="section-head">
          <div className="label">03 · The map</div>
          <h2>A national<br />network.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 40, alignItems: 'start' }}>
          <div className="label">Intent</div>
          <div className="body lg" style={{ maxWidth: '52ch' }}>
            <p style={{ margin: '0 0 1em' }}>
              Not a single venue. A system of clubs, connected by one
              standard, one membership, one community.
            </p>
            <p style={{ margin: 0, opacity: 0.6 }}>
              We begin with two flagships. We're mapping the rest of Korea now.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function Facilities() {
  const pillars = [
  { n: '01', t: 'Premium infrastructure',
    d: 'Panoramic courts, architectural clubhouses, calibrated lighting. Built to a single standard across every location.',
    img: { src: 'assets/infrastructure.png', brief: 'Premium indoor padel club interior', ratio: '16/10' } },
  { n: '02', t: 'A professional sport',
    d: 'Certified coaching, tournaments, junior pathways. In partnership with the Korean national federation.',
    img: { src: 'assets/kpf-logo.png', brief: 'Korea Padel Federation', ratio: '16/10', kind: 'logo', caption: 'In partnership with' } },
  { n: '03', t: 'A real community',
    d: 'A club, not a booking platform. Members, rituals, a place to stay after the match.',
    img: { src: 'assets/community.png', brief: 'Players gathering after the match', ratio: '16/10' } }];

  return (
    <section className="section invert" id="facilities">
      <div className="wrap">
        <div className="section-head">
          <div className="label">04 · What we're building</div>
          <h2>The standard,<br />not a venue.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 40, alignItems: 'start', marginBottom: 80 }}>
          <div className="label">Ambition</div>
          <div className="body lg" style={{ maxWidth: '52ch', opacity: 0.85 }}>
            Padel is early in Korea. We're not opening a court — we're
            setting the standard the sport will grow into.
          </div>
        </div>

        <div className="courts-grid">
          {pillars.map((it) =>
          <div key={it.n} className="court-card">
              <div className="num">{it.n}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              <div className="spacer" />
              <ImageSlot brief={it.img.brief} src={it.img.src} ratio={it.img.ratio} kind={it.img.kind} caption={it.img.caption} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

// Editorial image placeholder — labelled with the art-direction brief for
// this slot. Swap `src` with a real photo path when available; the caption
// auto-hides once an image loads.
function ImageSlot({ src, brief, ratio = '16/10', kind, caption }) {
  if (src && kind === 'logo') {
    return (
      <div style={{
        width: '100%', aspectRatio: ratio,
        background: '#f5f3ed',
        position: 'relative',
        display: 'flex', flexDirection: 'column',
        justifyContent: 'center', alignItems: 'center',
        padding: '24px',
      }}>
        {caption && (
          <div style={{
            position: 'absolute', top: 14, left: 14,
            fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'rgba(10,10,10,0.55)',
          }}>
            {caption}
          </div>
        )}
        <img src={src} alt={brief} style={{
          maxWidth: '92%', maxHeight: '78%', objectFit: 'contain',
        }}/>
      </div>
    );
  }
  if (src) {
    return <img src={src} alt={brief} style={{ width: '100%', aspectRatio: ratio, objectFit: 'cover' }}/>;
  }
  return (
    <div style={{
      width: '100%', aspectRatio: ratio,
      background:
        'repeating-linear-gradient(135deg, rgba(245,243,237,.06) 0 1px, transparent 1px 16px)',
      border: '1px solid rgba(245,243,237,.2)',
      position: 'relative',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      padding: 14,
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        opacity: 0.55,
      }}>
        Image · placeholder
      </div>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
        letterSpacing: '0.04em', opacity: 0.75, lineHeight: 1.4,
        maxWidth: '28ch',
      }}>
        {brief}
      </div>
    </div>
  );
}

function Contact() {
  return (
    <section className="section contact" id="contact">
      <div className="wrap">
        <div className="label">05 · Contact</div>
        <h2>
          Partner,<br />play,<br />or invest.
        </h2>
        <a href="mailto:guillermo@uripadel.com" className="contact-email">
          guillermo@uripadel.com →
        </a>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer section invert" style={{ padding: '40px 0 32px', borderBottom: 0 }}>
      <div className="wrap footer-inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Mark size={28} style={{ filter: 'invert(1)' }} />
          <span className="mono" style={{ fontSize: 11 }}>URI&nbsp;PADEL</span>
        </div>
        <div className="legal">© 2026 Uri Padel · Seoul</div>
        <div className="legal">All rights reserved</div>
      </div>
    </footer>);

}

function App() {
  return (
    <>
      <Nav />
      <Hero />
      <Manifesto />
      <About />
      <Locations />
      <Facilities />
      <Contact />
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);