/* EBITDAswag — UI primitives, top bar, hero, ticker, origin */

const { useState, useEffect, useRef } = React;

/* ─────────────────── Top Bar ─────────────────── */
function TopBar() {
  const [time, setTime] = useState(() => new Date());
  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const hh = String(time.getHours()).padStart(2, '0');
  const mm = String(time.getMinutes()).padStart(2, '0');
  const ss = String(time.getSeconds()).padStart(2, '0');
  return (
    <header className="topbar">
      <div className="topbar-strip">
        <div className="wrap" style={{ display: 'flex', gap: 20, width: '100%', alignItems: 'center' }}>
          <span><span className="live-dot"></span> LIVE</span>
          <span className="hide-sm">NYC {hh}:{mm}:{ss}</span>
          <span className="hide-sm">·</span>
          <span className="hide-sm">EBTDA <span className="gain">+12.4%</span></span>
          <span className="hide-sm">·</span>
          <span className="hide-sm">SWAG.US <span className="gain">▲ ALL-TIME HIGH</span></span>
          <span style={{ marginLeft: 'auto' }}>FREE SHIPPING · NO MINIMUMS</span>
        </div>
      </div>
      <div className="wrap topnav">
        <div className="brand">
          <span>EBITDA<span className="swag">swag</span></span>
          <span className="ticker-tag">$EBTDA</span>
        </div>
        <nav className="links">
          <a href="#shop">Shop</a>
          <a href="#new">New Drops</a>
          <a href="#about">About</a>
          <a href="#corp">Corporate</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="actions">
          <button className="icon-btn" aria-label="Search">⌕</button>
          <button className="icon-btn" aria-label="Account">◍</button>
          <button className="icon-btn" aria-label="Cart">
            ◰<span className="badge">2</span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* ─────────────────── Hero ─────────────────── */
function Hero() {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-meta">
          <span className="eyebrow"><span className="dot"></span>VOL. 01 · SPRING DROP · LIVE NOW</span>
          <span className="pill"><span className="dot"></span>ON THE TAPE</span>
        </div>
        <h1 className="hero-headline">
          <span className="line1"><span className="strike-through">Not financial advice.</span></span>
          <span className="line2">Just financial swag.</span>
        </h1>
        <p className="hero-sub">
          Apparel for people who <b>dream in DCFs</b>, speak fluent EBITDA, and think
          <b> "synergies"</b> is the funniest word in the English language.
        </p>
        <div className="hero-ctas">
          <a href="#shop" className="btn btn-primary">Shop the Collection <span className="arrow">→</span></a>
          <a href="#new" className="btn btn-ghost">See what's new</a>
        </div>

        <div className="hero-stats">
          <div className="hero-stat">
            <div className="num">100<span className="accent">+</span></div>
            <div className="lbl">washes / no fade</div>
          </div>
          <div className="hero-stat">
            <div className="num">02–05</div>
            <div className="lbl">day shipping · free</div>
          </div>
          <div className="hero-stat">
            <div className="num">14</div>
            <div className="lbl">designs · vol. 01</div>
          </div>
          <div className="hero-stat">
            <div className="num"><span className="accent">A+</span></div>
            <div className="lbl">credit rating · self-issued</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── Ticker ─────────────────── */
function Ticker() {
  const renderRow = (quotes, reverse, label) => {
    const items = [...quotes, ...quotes]; // duplicate for seamless loop
    return (
      <div className={`ticker-row${reverse ? ' reverse' : ''}`}>
        <span className="ticker-label">
          <span className="dot"></span>{label}
        </span>
        <div className="ticker-track">
          {items.map((q, i) => (
            <span className="ticker-quote" key={i}>
              <span className="arrow-up">▲</span>
              <span className="quote-text">{q.quote}</span>
              <span className="attrib">— {q.who}</span>
              <span className="sep">///</span>
            </span>
          ))}
        </div>
      </div>
    );
  };
  return (
    <section className="ticker-section" aria-label="Customer quotes">
      {renderRow(TICKER_QUOTES_A, false, 'WHAT THEY\'RE SAYING')}
      {renderRow(TICKER_QUOTES_B, true, 'OFF THE RECORD')}
    </section>
  );
}

/* ─────────────────── Origin ─────────────────── */
function Origin() {
  return (
    <section className="section" id="about">
      <div className="wrap origin">
        <div className="origin-copy">
          <span className="eyebrow"><span className="dot"></span>// 01 · ORIGIN STORY</span>
          <h2>It started <em>with a visor.</em></h2>
          <p>
            <b>One EBITDA visor. One trip to Mexico. Three total strangers</b> stopping
            to say they loved it.
          </p>
          <p>
            That's when it clicked: finance people don't just <i>understand</i> these
            terms — they <b>identify</b> with them. EBITDA isn't just a metric. It's a
            personality type. A love language. A way of seeing the world that only 2%
            of the population shares, and 100% of that 2% thinks is completely normal.
          </p>
          <p>
            EBITDAswag exists because nobody was making gear for us. Not the flimsy
            blanks with clip-art fonts. <b>Real gear.</b> Stuff you'd actually wear to a
            rooftop bar, a board meeting, or a beach in Cancún while three strangers
            tell you they love your hat.
          </p>
          <div className="iykyk">If you know, you know.</div>
        </div>
        <div className="origin-photo">
          <span className="corner tl"></span>
          <span className="corner tr"></span>
          <span className="corner bl"></span>
          <span className="corner br"></span>
          <img src="assets/founder-beach.webp" alt="Founder wearing the original EBITDA visor on a beach in Mexico" />
          <div className="photo-meta">
            <span><span className="frame-no">FRAME 001 ·</span> CANCÚN, MX</span>
            <span>03 / 2025</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TopBar, Hero, Ticker, Origin });