// ── JT Atelier — Returns & Refunds ───────────────────────────────────

function Returns({ goTo }) {
  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, []);

  const Rule = ({ n, title, children }) => (
    <div style={{
      borderBottom: '.5px solid var(--line)',
      padding: 'clamp(28px,4vw,48px) 0',
      display: 'grid',
      gridTemplateColumns: '56px 1fr',
      columnGap: 'clamp(16px,3vw,40px)',
    }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.2em', color: 'var(--fg-3)', opacity: .45, paddingTop: 4 }}>{n}</div>
      <div>
        <div style={{ fontFamily: 'var(--font-display, Georgia, serif)', fontStyle: 'italic', fontSize: 'clamp(16px,2vw,20px)', color: 'var(--fg)', marginBottom: 14 }}>{title}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.85, color: 'var(--fg-3)', letterSpacing: '.03em', maxWidth: 580 }}>{children}</div>
      </div>
    </div>
  );

  return (
    <main style={{ background: 'var(--bg)', minHeight: '100vh' }}>

      {/* Hero */}
      <section style={{
        padding: 'clamp(64px,10vw,120px) clamp(24px,8vw,96px) 64px',
        borderBottom: '.5px solid var(--line)',
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 'clamp(32px,6vw,80px)', alignItems: 'end',
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>◇ &nbsp; Policy</div>
          <h1 className="display" style={{ fontSize: 'clamp(44px,7vw,96px)', lineHeight: .9, margin: 0, letterSpacing: '-.02em' }}>
            <em>Returns &amp;<br />Refunds.</em>
          </h1>
        </div>
        <div style={{ paddingBottom: 8 }}>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.06em', lineHeight: 1.85, color: 'var(--fg-3)', margin: 0, maxWidth: 380 }}>
            Every piece is made to order from premium leather. We accept returns <strong style={{ color: 'var(--fg)' }}>only for a verified manufacturing flaw</strong> — all other sales are final.
          </p>
        </div>
      </section>

      {/* Rules */}
      <section style={{ padding: '0 clamp(24px,8vw,96px) 80px' }}>

        <Rule n="01" title="Made to Order — Final Sale">
          Every jacket is crafted individually to your order from premium, hand-selected leather. For this reason we
          <strong style={{ color: 'var(--fg)' }}> do not accept returns or exchanges</strong> for fit, sizing, change of mind, or any reason other than a genuine manufacturing flaw.
        </Rule>

        <Rule n="02" title="Returns Only for a Verified Flaw">
          The only returns we accept are for jackets with a <strong style={{ color: 'var(--fg)' }}>genuine manufacturing defect or damage present on arrival</strong> — faulty stitching, hardware failure, a material flaw, or the wrong item or specification.
          When a flaw is verified, we will repair, replace, or fully refund the piece and cover return shipping.
        </Rule>

        <Rule n="03" title="How to Report a Flaw">
          Email <strong style={{ color: 'var(--fg)' }}>Inquiries@Jtatelier.shop within 2 days of delivery</strong> with your order number and clear, well-lit photos of the defect.
          Claims made after 2 days, or without photos, cannot be processed.
        </Rule>

        <Rule n="04" title="What Does Not Qualify">
          Fit or sizing (please use our detailed Size Guide, or order Bespoke for an exact fit), change of mind, ordinary wear, damage from misuse or improper care, and any alteration made after delivery.
          These are <strong style={{ color: 'var(--fg)' }}>not eligible</strong> for return, refund, or exchange.
        </Rule>

        <Rule n="05" title="No Exchanges">
          Because every piece is made to order specifically for you, we cannot swap one jacket for another. If a verified flaw cannot be repaired or replaced, we issue a <strong style={{ color: 'var(--fg)' }}>full refund</strong>.
        </Rule>

        <Rule n="06" title="Our Quality Promise">
          Every jacket passes a <strong style={{ color: 'var(--fg)' }}>documented quality-control inspection</strong> — photographed front, back, and open to show the lining — before it ships.
          We keep this record so that, in the rare event of a genuine flaw, we can resolve it quickly and fairly.
        </Rule>

      </section>

      {/* Footer CTA */}
      <section style={{
        borderTop: '.5px solid var(--line)',
        padding: 'clamp(40px,6vw,72px) clamp(24px,8vw,96px)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24,
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Questions about a return?</div>
          <div className="display" style={{ fontSize: 'clamp(18px,3vw,28px)' }}><em>We reply within 24 hours.</em></div>
        </div>
        <button className="btn" onClick={() => goTo('contact')}>Contact us <span className="arrow">→</span></button>
      </section>

    </main>
  );
}

Object.assign(window, { Returns });