// ── JT Atelier — FAQ ─────────────────────────────────────────────────

const FAQ_ITEMS = [
  { n:'01', q:'How do I know what size to order?',
    a:'Measure your chest, shoulders, and arms, then check our size guide for the best fit.' },
  { n:'02', q:'What kind of leather do you use?',
    a:'Premium cowhide, lambskin, and shearling. Cowhide for durability, lambskin for softness, shearling for that cozy lined feel.' },
  { n:'03', q:'How do you care for a leather jacket?',
    a:'Use a quality leather cleaner and conditioner regularly. We recommend Bickmore leather care products — any good leather cleaner and conditioner will keep your jacket looking great.' },
  { n:'04', q:'How long does shipping take?',
    a:'Shipping typically takes two to four weeks from the date you order. Because every jacket is made to order, we take the time to craft the highest quality piece — one you\'ll be proud to pass down for generations.' },
  { n:'05', q:'Do you ship internationally?',
    a:'Yes, we ship worldwide — no exceptions.' },
  { n:'06', q:'What\'s your return policy?',
    a:'Every jacket is made to order, so all sales are final except for a genuine manufacturing flaw. If your piece arrives with a defect or damage, email us within 2 days of delivery with photos and we\'ll repair, replace, or refund it and cover return shipping. We do not accept returns or exchanges for fit, sizing, or change of mind — please use the size guide or order bespoke for an exact fit.' },
  { n:'07', q:'Are your jackets real leather or faux?',
    a:'Every jacket is 100% genuine leather. Always.' },
  { n:'08', q:'Can I get a jacket customized?',
    a:'Yes — head to the Bespoke tab at the top of the page to start your commission.' },
  { n:'09', q:'How long does it take to make my jacket?',
    a:'About two to three weeks from the time we process your order.' },
  { n:'10', q:'Do you offer leather color samples?',
    a:'Yes. You can request them during the bespoke customization process.' },
  { n:'11', q:'Are your jackets lined? What\'s the lining made of?',
    a:'Fully lined using premium materials: viscose, satin, silk, cotton, polyester, quilted insulation, or mesh. We also offer fleece or shearling for natural warmth.' },
  { n:'12', q:'What if my jacket arrives damaged?',
    a:'You have two days from delivery to report damage. We cover return shipping and issue a full refund.' },
  { n:'13', q:'Do you offer gift wrapping or gift cards?',
    a:'Not currently — but we\'re planning to add them in the future.' },
  { n:'14', q:'What payment methods do you accept?',
    a:'All major credit and debit cards.' },
  { n:'15', q:'Can I track my order?',
    a:'Yes. You\'ll receive a tracking email with your tracking number and shipping service. You can also check status directly on our website.' },
  { n:'16', q:'Do you offer exchanges?',
    a:'We don\'t offer exchanges because every jacket is made to order specifically for you.' },
  { n:'17', q:'Where are your jackets made?',
    a:'Handcrafted in Sialkot, Pakistan — home to some of the world\'s finest leather manufacturing facilities, by highly skilled artisans.' },
  { n:'18', q:'How do I clean stains on my leather jacket?',
    a:'Gently blot with a clean cloth and mild leather cleaner. For tougher stains: Weiman Leather Cleaner, Chemical Guys Leather Cleaner, or Chamberlain\'s Leather Milk. Always test in a hidden spot first, then condition.' },
  { n:'19', q:'Do you have a size guide?',
    a:'Yes — a detailed size guide is on our website. Measure your chest, shoulders, and arms and refer to the guide for the best fit.' },
  { n:'20', q:'How can I contact customer service?',
    a:'Email us at Inquiries@Jtatelier.shop or use the contact form on our website. We aim to respond within 24–48 hours.' },
];

function FAQ({ goTo }) {
  const [openIdx, setOpenIdx] = React.useState(null);

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

  const toggle = (i) => setOpenIdx(openIdx === i ? null : i);

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

      {/* ── Hero ──────────────────────────────────────────────────────── */}
      <section style={{
        padding: 'clamp(64px,10vw,120px) clamp(24px,8vw,96px) 72px',
        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; F.A.Q.</div>
          <h1 className="display" style={{
            fontSize: 'clamp(52px,8vw,108px)',
            lineHeight: .9,
            margin: 0,
            letterSpacing: '-.02em',
          }}>
            <em>Twenty<br />Answers.</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: 360,
          }}>
            Everything you need to know — from leather selection and sizing to shipping, care, and custom orders.
          </p>
          <div style={{
            marginTop: 32,
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '.22em', textTransform: 'uppercase',
            color: 'var(--fg-3)', opacity: .5,
          }}>Select any question to read the answer</div>
        </div>
      </section>

      {/* ── Questions ─────────────────────────────────────────────────── */}
      <section style={{ padding: '0 clamp(24px,8vw,96px) 80px' }}>
        {FAQ_ITEMS.map((item, i) => {
          const isOpen = openIdx === i;
          return (
            <div
              key={item.n}
              onClick={() => toggle(i)}
              style={{
                borderBottom: '.5px solid var(--line)',
                cursor: 'pointer',
                padding: 'clamp(22px,3vw,36px) 0',
                display: 'grid',
                gridTemplateColumns: '56px 1fr',
                columnGap: 'clamp(16px,3vw,40px)',
              }}
            >
              {/* Number */}
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 11, letterSpacing: '.2em',
                color: isOpen ? 'var(--gold, #d4af37)' : 'var(--fg-3)',
                opacity: isOpen ? 1 : .45,
                paddingTop: 4,
                transition: 'color .3s, opacity .3s',
                userSelect: 'none',
              }}>{item.n}</div>

              {/* Question + Answer */}
              <div>
                <div style={{
                  fontFamily: 'var(--font-display, Georgia, serif)',
                  fontStyle: 'italic',
                  fontSize: 'clamp(16px,2.2vw,22px)',
                  lineHeight: 1.35,
                  color: isOpen ? 'var(--fg)' : 'var(--fg-2)',
                  transition: 'color .25s',
                  paddingRight: 'clamp(16px,4vw,60px)',
                }}>{item.q}</div>

                {isOpen && (
                  <div style={{ animation: 'faq-reveal .32s cubic-bezier(.22,.72,.36,1) both' }}>
                    <div style={{
                      width: 24, height: .5,
                      background: 'var(--gold, #d4af37)',
                      margin: 'clamp(14px,2vw,22px) 0',
                      opacity: .6,
                    }} />
                    <p style={{
                      fontFamily: 'var(--font-mono)',
                      fontSize: 'clamp(11px,1.2vw,13px)',
                      letterSpacing: '.04em',
                      lineHeight: 1.85,
                      color: 'var(--fg-3)',
                      margin: 0,
                      maxWidth: 620,
                      paddingBottom: 4,
                    }}>{item.a}</p>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </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 }}>Still have questions?</div>
          <div className="display" style={{ fontSize: 'clamp(20px,3vw,32px)' }}>
            <em>We reply within 24 hours.</em>
          </div>
        </div>
        <button className="btn" onClick={() => goTo('contact')}>
          Contact us <span className="arrow">→</span>
        </button>
      </section>

      <style>{`
        @keyframes faq-reveal {
          from { opacity: 0; transform: translateY(-6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 600px) {
          .faq-hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}

Object.assign(window, { FAQ });
