/* EBITDAswag — Products, You-Might-Need, Values, Wild grid, Email, FAQ, Footer */

const { useState: useState2 } = React;

/* ─────────────────── Products ─────────────────── */
function Products() {
  return (
    <section className="section" id="shop">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>// 02 · THE COLLECTION · VOL. 01</span>
            <h2 className="title">The collection.<br/>From OG to deep cuts.</h2>
            <p className="lede">
              Every piece designed to make someone at a networking event say,
              <i> "where did you get that?"</i>
            </p>
          </div>
          <div className="right">
            <a href="#all" className="btn btn-ghost">Shop All <span className="arrow">→</span></a>
          </div>
        </div>
        <div className="product-grid">
          {PRODUCTS.map((p, i) => (
            <a className="product-card" href={`#p-${p.id}`} key={p.id}>
              <div className="product-img">
                {p.tag && (
                  <span className={`product-tag ${p.tag === 'NEW' ? 'new' : p.tag === 'HOT' ? 'hot' : p.tag === 'LOW STOCK' ? 'low' : ''}`}>
                    {p.tag}
                  </span>
                )}
                <img src={p.img} alt={p.name} />
              </div>
              <div className="product-meta">
                <div className="row1">
                  <span className="name">{p.name}</span>
                  <span className="price">{p.price}</span>
                </div>
                <div className="desc">{p.desc}</div>
                <div className="ticker-line">
                  <span>SKU.{String(i + 1).padStart(3, '0')}</span>
                  <span>·</span>
                  <span className={`delta ${p.dir === 'down' ? 'down' : ''}`}>
                    {p.dir === 'up' ? '▲' : '▼'} {p.delta} 30D
                  </span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── You Might Need ─────────────────── */
function YouMightNeed() {
  const renderText = (line, idx) => {
    const phrases = YMN_HIGHLIGHT[idx] || [];
    let result = [<>{line}</>];
    phrases.forEach((phrase) => {
      const next = [];
      result.forEach((node) => {
        if (typeof node === 'string' || (node && node.props && typeof node.props.children === 'string')) {
          const text = typeof node === 'string' ? node : node.props.children;
          const parts = text.split(phrase);
          parts.forEach((part, i) => {
            if (i > 0) next.push(<em key={`${idx}-${phrase}-${i}`}>{phrase}</em>);
            if (part) next.push(part);
          });
        } else {
          next.push(node);
        }
      });
      result = next;
    });
    return result;
  };
  return (
    <section className="section" id="ymn" style={{ background: 'var(--bg-deep)' }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>// 03 · CONFESSIONS · SHARE THIS</span>
            <h2 className="title">You might need EBITDAswag if…</h2>
            <p className="lede">
              Ten dark truths about working in finance. Read them. Recognize yourself.
              Screenshot the one that hurts most.
            </p>
          </div>
          <div className="right">
            <span className="eyebrow" style={{ display: 'inline-block' }}>
              SCREENSHOTTABLE · 1080×1350
            </span>
          </div>
        </div>
        <div className="ymn-grid">
          {YMN_LINES.map((line, i) => (
            <div className="ymn-card" key={i}>
              <span className="corner tl"></span>
              <span className="corner tr"></span>
              <span className="corner bl"></span>
              <span className="corner br"></span>
              <div className="num">№ {String(i + 1).padStart(2, '0')} / 10</div>
              <div className="text">{renderText(line, i)}</div>
              <div className="footer">
                <span>EBITDASWAG.COM</span>
                <span className="share">SHARE ↗</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── Values ─────────────────── */
function Values() {
  const items = [
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 7l9-4 9 4v10l-9 4-9-4V7z"/><path d="M3 7l9 4 9-4M12 11v10"/></svg>),
      title: 'Premium blanks.',
      body: <><b>Bella+Canvas. Comfort Colors. Champion.</b> No scratchy stuff. These shirts feel like a well-run balance sheet — clean and comfortable.</>,
      badge: 'GROSS MARGIN ▲',
    },
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 4h16v12H4z"/><path d="M8 20h8M12 16v4M7 8l3 3 7-7"/></svg>),
      title: 'DTF printed.',
      body: <><b>Vibrant colors that survive 100+ washes.</b> Unlike your Q4 forecast, these don't fade under pressure.</>,
      badge: '100+ WASH GUARANTEE',
    },
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="7" width="14" height="10" rx="1"/><path d="M16 10h4l2 3v4h-6"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></svg>),
      title: 'Free shipping.',
      body: <><b>On every order. No minimums. No games.</b> We factored it into our pricing model because we're responsible like that.</>,
      badge: 'NO CAPITAL CALL',
    },
  ];
  return (
    <section className="section section-light" id="why">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>// 04 · WHY WE'RE DIFFERENT</span>
            <h2 className="title" style={{ color: 'var(--bg)' }}>Built like a well-run balance sheet.</h2>
          </div>
        </div>
        <div className="values" style={{ borderTopColor: 'rgba(0,0,0,0.12)' }}>
          {items.map((it, i) => (
            <div className="value" key={i} style={{ borderRightColor: 'rgba(0,0,0,0.08)' }}>
              <div className="icon" style={{ borderColor: 'rgba(0,0,0,0.18)', color: 'var(--bg)' }}>{it.icon}</div>
              <h3 style={{ color: 'var(--bg)' }}>{it.title}</h3>
              <p style={{ color: 'rgba(0,0,0,0.65)' }}>{it.body}</p>
              <div className="badge" style={{ color: 'var(--bg)' }}>▲ {it.badge}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── Wild ─────────────────── */
function Wild() {
  return (
    <section className="section" id="wild">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>// 05 · AS SEEN IN THE WILD</span>
            <h2 className="title">Spotted on trading floors,<br/>airport lounges, and at least one wedding.</h2>
            <p className="lede">They know who they are.</p>
          </div>
          <div className="right">
            <a href="#tag" className="btn btn-ghost">Tag @ebitdaswag <span className="arrow">↗</span></a>
          </div>
        </div>
      </div>
      <div className="wrap" style={{ paddingLeft: 'var(--pad-x)', paddingRight: 'var(--pad-x)' }}>
        <div className="wild-grid">
          {WILD.map((w, i) => (
            <a key={i} className={`wild-tile${w.wide ? ' wide' : ''}`} href="#feed">
              <img src={w.img} alt="In-the-wild photo" />
              <span className="handle">{w.handle}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── Email Capture ─────────────────── */
function EmailCapture() {
  const [email, setEmail] = useState2('');
  const [done, setDone] = useState2(false);
  const submit = (e) => {
    e.preventDefault();
    if (email.includes('@')) setDone(true);
  };
  return (
    <section className="email" id="email">
      <div className="wrap email-inner">
        <div>
          <span className="eyebrow"><span className="dot"></span>// 06 · LP LIST</span>
          <h2>Get early access.<br/>No capital call required.</h2>
          <p>
            New drops, limited editions, and the occasional finance joke that
            our lawyers said was fine. Delivered to your inbox.
          </p>
        </div>
        <form className="email-form" onSubmit={submit}>
          {!done ? (
            <>
              <div className="input-row">
                <input
                  type="email"
                  placeholder="you@your-fund.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
                <button type="submit">Join the LP list →</button>
              </div>
              <div className="fineprint">
                We email like once a week. We're not monsters.
              </div>
            </>
          ) : (
            <div className="ok">▲ ALLOCATION CONFIRMED · Welcome to the cap table.</div>
          )}
        </form>
      </div>
    </section>
  );
}

/* ─────────────────── FAQ ─────────────────── */
function FAQSection() {
  const [open, setOpen] = useState2(0);
  return (
    <section className="section" id="faq">
      <div className="wrap faq">
        <div>
          <span className="eyebrow"><span className="dot"></span>// 07 · FAQ</span>
          <h2>Questions you<br/>were going to ask.</h2>
          <p style={{ color: 'var(--ink-muted)', marginTop: 18, maxWidth: '38ch' }}>
            All answers reviewed by our compliance team. (Our compliance team is also us.)
          </p>
        </div>
        <div className="faq-list">
          {FAQ.map((item, i) => (
            <div className={`faq-item${open === i ? ' open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span style={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
                  <span className="num">Q.{String(i + 1).padStart(2, '0')}</span>
                  <span>{item.q}</span>
                </span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a"><div><p>{item.a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────── Footer ─────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <h2 className="footer-tagline">
          Not financial advice.<br/><em>Just financial swag.</em>
        </h2>
        <div className="footer-cols">
          <div>
            <h4>EBITDAswag</h4>
            <p style={{ color: 'var(--ink-muted)', fontSize: 14, lineHeight: 1.6, margin: 0, maxWidth: '36ch' }}>
              The unofficial uniform of finance culture. Premium blanks, sharp jokes, no clip-art fonts.
            </p>
          </div>
          <div>
            <h4>Shop</h4>
            <ul>
              <li><a href="#tees">Tees</a></li>
              <li><a href="#hoodies">Hoodies & Crews</a></li>
              <li><a href="#hats">Hats & Visors</a></li>
              <li><a href="#acc">Accessories</a></li>
              <li><a href="#all">Shop all</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#corp">Corporate Orders</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Follow</h4>
            <ul>
              <li><a href="#ig">Instagram</a></li>
              <li><a href="#li">LinkedIn</a></li>
              <li><a href="#tt">TikTok</a></li>
              <li><a href="#x">X / Twitter</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-meta">
          <span>© 2026 EBITDASWAG · NOT FINANCIAL ADVICE · JUST FINANCIAL SWAG</span>
          <span>BUILT IN BROOKLYN · SHIPPED EVERYWHERE</span>
        </div>
        <p className="footer-disclaimer">
          EBITDAswag is not affiliated with any financial institution, accounting firm, or regulatory body.
          We are just a company that thinks EBITDA is inherently funny. If you disagree, that's fine —
          we've adjusted for your opinion.
        </p>
      </div>
    </footer>
  );
}

Object.assign(window, { Products, YouMightNeed, Values, Wild, EmailCapture, FAQSection, Footer });