// ============================================
// Studio Tools — the plugins behind the studio
// ============================================

function Tools() {
  const PC = window.PC;
  return (
    <section className="section tools" id="tools">
      <div className="wrap">
        <header className="section-head">
          <div className="section-head__l">
            <span className="eyebrow reveal">05 — Studio Tools</span>
            <h2 className="h-1 reveal" data-d="1">
              The plugins that <span className="serif it gold-text">power our studio</span>.
            </h2>
          </div>
          <div className="section-head__r reveal" data-d="2">
            <p className="lead">
              We build our own production tools — for 3ds Max and Unreal Engine — to ship faster, cleaner, and at higher quality. They're available to other studios too.
            </p>
          </div>
        </header>

        <div className="tools__grid">
          {PC.tools.map((t, i) => (
            <article key={t.id} className={`tool tool--${t.status} reveal`} data-d={i + 1}>
              <div className="tool__top">
                <span className="label tool__platform">{t.platform}</span>
                <span className={`tool__status tool__status--${t.status}`}>
                  <span className="tool__dot"></span>
                  {t.statusLabel}
                </span>
              </div>
              <h3 className="h-2 serif tool__name">{t.name}</h3>
              <p className="body tool__desc">{t.desc}</p>
              <div className="tool__foot">
                <span className="tool__price serif it gold-text">{t.price}</span>
                <a href={t.gumroadUrl || PC.social.linktree} target="_blank" rel="noreferrer" className="link tool__cta">
                  <span>{t.status === 'live' ? 'Buy on Gumroad' : 'Notify me'}</span>
                  <span className="btn__arrow"></span>
                </a>
              </div>
              <div className="tool__decor" aria-hidden="true">
                <span className="serif it">/{String(i + 1).padStart(2, '0')}</span>
              </div>
            </article>
          ))}
        </div>

        {/* UPI Direct Pay */}
        <div className="upi-block reveal" data-d="4" style={{
          marginTop: '64px',
          padding: '40px 48px',
          border: '1px solid rgba(0,160,224,0.25)',
          borderRadius: '2px',
          background: 'rgba(0,160,224,0.04)',
          display: 'flex',
          alignItems: 'center',
          gap: '48px',
          flexWrap: 'wrap',
        }}>
          <div style={{flex: '1', minWidth: '220px'}}>
            <span className="label" style={{color: 'var(--accent, #00A0E0)', letterSpacing: '0.12em'}}>PAY DIRECT · 0% FEES</span>
            <h3 className="h-2 serif" style={{marginTop: '8px', marginBottom: '8px'}}>Skip the platform cut.</h3>
            <p className="body" style={{opacity: 0.7, maxWidth: '42ch'}}>
              Pay via UPI and get the same plugin delivered to your inbox — we keep 100%, you save nothing extra. Works with Google Pay, PhonePe, Paytm, and any UPI app.
            </p>
          </div>
          <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px'}}>
            <div style={{fontFamily: 'var(--font-mono, monospace)', fontSize: '1.1rem', letterSpacing: '0.06em', color: 'var(--accent, #00A0E0)', background: 'rgba(0,160,224,0.08)', padding: '12px 24px', borderRadius: '2px', border: '1px solid rgba(0,160,224,0.3)'}}>
              varun18rathod-1@okhdfcbank
            </div>
            <a href="upi://pay?pa=varun18rathod-1@okhdfcbank&pn=PolyCraft%20Visuals&cu=INR" className="btn btn--gold" style={{width: '100%', textAlign: 'center'}}>
              <span>Open UPI App</span>
              <span className="btn__arrow"></span>
            </a>
            <p className="label" style={{opacity: 0.5, textAlign: 'center', maxWidth: '28ch'}}>After payment, email your receipt to <a href="mailto:polycraftvisuals@gmail.com" style={{color: 'inherit', textDecoration: 'underline'}}>polycraftvisuals@gmail.com</a> and we'll send the plugin link.</p>
          </div>
        </div>

      </div>
    </section>
  );
}

window.Tools = Tools;