// Static info pages — Shipping & Returns, FAQ, Size Guide

const { useState: useStateI } = React;

// ─── shared ─────────────────────────────────────────────
function InfoSection({ title, children }) {
  return (
    <div style={{ borderBottom: '1px solid var(--line)', paddingBottom: 36, marginBottom: 36 }}>
      <div className="eyebrow" style={{ marginBottom: 20 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, color: 'var(--fg-mute)', lineHeight: 1.75 }}>
        {children}
      </div>
    </div>
  );
}

function FaqRow({ q, a }) {
  const [open, setOpen] = useStateI(false);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(o => !o)}
              onMouseEnter={() => onCursor('hover')} onMouseLeave={() => onCursor('default')}
              style={{ width: '100%', padding: '18px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, textAlign: 'left' }}>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--fg)', fontWeight: 500, lineHeight: 1.4 }}>{q}</span>
        <span className="num" style={{ color: 'var(--fg-mute)', flexShrink: 0, marginTop: 2, transition: 'transform 300ms', transform: open ? 'rotate(45deg)' : 'none' }}>+</span>
      </button>
      <div style={{ display: 'grid', gridTemplateRows: open ? '1fr' : '0fr', transition: 'grid-template-rows 380ms cubic-bezier(.2,.6,.2,1)' }}>
        <div style={{ overflow: 'hidden', minHeight: 0 }}>
          <p style={{ paddingBottom: 20, color: 'var(--fg-mute)', lineHeight: 1.75, maxWidth: 580 }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

const DELIVERY_REGIONS = [
  { label: 'EU / UK',          est: '3–7 business days'  },
  { label: 'United States',    est: '5–10 business days' },
  { label: 'Australia',        est: '7–14 business days' },
  { label: 'Rest of world',    est: '7–21 business days' },
];

const FAQ_ITEMS = [
  {
    q: 'Where are products made?',
    a: 'Everything is made to order by our production partner in Portugal, via Fourthwall. Each piece is cut, printed or embroidered, and finished after your order is placed — nothing sits in a warehouse.'
  },
  {
    q: 'How long will my order take?',
    a: 'Production takes 2–3 business days. After dispatch, EU and UK orders typically arrive in 3–7 days; US orders in 5–10 days; international in 7–21 days depending on destination and customs. You\'ll receive tracking when your order ships.'
  },
  {
    q: 'How does sizing work?',
    a: 'Everything is cut oversized with a dropped shoulder — think boxy, relaxed fit. If you want something closer to a standard fit, size down one. Detailed flat measurements are on every product page.'
  },
  {
    q: "What's the difference between Print and Embroidered?",
    a: "Print pieces carry the main Peripheral design large across the back of the garment, with a clean front. Embroidered pieces have a small embroidered Peripheral mark on the chest, with nothing on the back. Same garment, two very different ways to wear it."
  },
  {
    q: 'Can I return or exchange my order?',
    a: 'Because everything is printed or embroidered to order specifically for you, we can\'t accept returns for sizing preference or change of mind. If your order arrives with a quality issue — wrong size, damaged, or misprinted — contact us within 30 days and we\'ll sort it.'
  },
  {
    q: 'What if my item has a defect?',
    a: 'Contact us at music.peripheral@gmail.com within 30 days of delivery with your order number and clear photos of the issue. We\'ll send a replacement at no cost to you.'
  },
  {
    q: 'Do you ship internationally?',
    a: 'Yes, we ship worldwide. International orders may be subject to import duties and customs fees on arrival — these are set by your country and are the buyer\'s responsibility. We don\'t collect them at checkout.'
  },
  {
    q: 'Can I cancel my order?',
    a: 'Orders are sent to production quickly, so cancellation isn\'t always possible. Email us as soon as possible after placing your order and we\'ll do our best. Once production has started, we can\'t halt the order.'
  },
  {
    q: 'Where does the money go?',
    a: 'Everything goes back into the channel — studio time, mastering, equipment, and buying the music I play. Every order keeps the platter spinning. Thank you.'
  },
];

// ─── sub-pages ──────────────────────────────────────────
function ShippingPage() {
  return (
    <>
      <InfoSection title="Production">
        <p>All products are made to order in Portugal. Once you place your order, production takes <strong style={{color:'var(--fg)',fontWeight:500}}>2–3 business days</strong> before your order is dispatched. Production times do not include weekends or public holidays.</p>
      </InfoSection>

      <InfoSection title="Estimated delivery">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1px', background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ background: 'var(--bg-elev)', padding: '10px 16px', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>Destination</div>
          <div style={{ background: 'var(--bg-elev)', padding: '10px 16px', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>After dispatch</div>
          {DELIVERY_REGIONS.map(r => (
            <React.Fragment key={r.label}>
              <div style={{ background: 'var(--bg)', padding: '14px 16px', fontFamily: 'var(--mono)', fontSize: 12, borderTop: '1px solid var(--line)' }}>{r.label}</div>
              <div style={{ background: 'var(--bg)', padding: '14px 16px', fontFamily: 'var(--mono)', fontSize: 12, borderTop: '1px solid var(--line)', color: 'var(--fg)' }}>{r.est}</div>
            </React.Fragment>
          ))}
        </div>
        <p>Delivery estimates run from dispatch date and exclude customs processing time. We ship via DHL, with handoff to your local carrier for final delivery — tracking may pause briefly during this handoff, which is normal.</p>
        <p>International orders may incur import duties or customs fees on arrival. These are set by your country's customs authority and are the buyer's responsibility. We do not collect them at checkout.</p>
      </InfoSection>

      <InfoSection title="Returns & refunds">
        <p>Because everything is made to order specifically for you, we can't accept returns for sizing preference or change of mind.</p>
        <p>If your order arrives damaged, misprinted, or with a production defect, <strong style={{color:'var(--fg)',fontWeight:500}}>contact us within 30 days of delivery</strong> with your order number and clear photos of the issue. We'll arrange a replacement at no cost to you — your profits are protected and the replacement is covered by the production partner.</p>
        <p>Size exchanges are only possible when the production partner shipped the wrong size. Preference-based size changes don't qualify as items are made to your specification.</p>
        <p>Reach us at <a href="mailto:music.peripheral@gmail.com" style={{color:'var(--accent)', textDecoration:'underline', textUnderlineOffset:3}}>music.peripheral@gmail.com</a></p>
      </InfoSection>

      <InfoSection title="Lost or delayed packages">
        <p>If your tracking hasn't updated for several days, give it a little more time — packages sometimes pause during carrier handoffs. If your order appears genuinely lost, contact us with your order number and we'll investigate and arrange a replacement.</p>
        <p>Please allow at least 2 weeks from the dispatch date for domestic orders and 3 weeks for international orders before reporting a lost package.</p>
      </InfoSection>
    </>
  );
}

function FAQPage() {
  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {FAQ_ITEMS.map(item => (
          <FaqRow key={item.q} q={item.q} a={item.a}/>
        ))}
      </div>
    </>
  );
}

function SizeTable({ label, rows, sleeveLabel = 'Sleeve' }) {
  return (
    <div style={{ marginBottom: 36 }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg)', marginBottom: 12 }}>{label}</div>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>
            <th style={{ textAlign: 'left', paddingBottom: 10, fontWeight: 400 }}>Size</th>
            <th style={{ textAlign: 'right', paddingBottom: 10, fontWeight: 400 }}>Chest</th>
            <th style={{ textAlign: 'right', paddingBottom: 10, fontWeight: 400 }}>Length</th>
            <th style={{ textAlign: 'right', paddingBottom: 10, fontWeight: 400 }}>{sleeveLabel}</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(r => (
            <tr key={r.size} style={{ borderTop: '1px solid var(--line)' }}>
              <td style={{ padding: '10px 0', fontFamily: 'var(--mono)', fontSize: 12 }}>{r.size}</td>
              <td style={{ padding: '10px 0', fontFamily: 'var(--mono)', fontSize: 12, textAlign: 'right' }}>{r.chest} cm</td>
              <td style={{ padding: '10px 0', fontFamily: 'var(--mono)', fontSize: 12, textAlign: 'right' }}>{r.length} cm</td>
              <td style={{ padding: '10px 0', fontFamily: 'var(--mono)', fontSize: 12, textAlign: 'right' }}>{r.sleeve} cm</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function SizeGuidePage() {
  return (
    <>
      <InfoSection title="How to measure">
        <p>All measurements below are taken flat across the garment (not around the body). Multiply the flat measurement by 2 for a body measurement equivalent.</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 4 }}>
          {[
            { k: 'Chest', v: 'Measured across the widest point of the chest, 2 cm below the armhole.' },
            { k: 'Length', v: 'From the highest point of the shoulder seam to the bottom hem.' },
            { k: 'Sleeve', v: 'From the shoulder seam to the end of the cuff.' },
          ].map(({ k, v }) => (
            <div key={k} style={{ padding: '16px', background: 'var(--bg-elev)', borderRadius: 2 }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>{k}</div>
              <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--fg-mute)', margin: 0 }}>{v}</p>
            </div>
          ))}
        </div>
      </InfoSection>

      <InfoSection title="Fit">
        <p>All garments are cut with an oversized, boxy silhouette and a dropped shoulder. If you prefer a closer fit, size down one. When in doubt, size up — the relaxed look is intentional.</p>
      </InfoSection>

      <div>
        <SizeTable label="Tops — Tees, Crop Tops, Tanks (cm, measured flat)" rows={SIZES.tees}/>
        <SizeTable label="Knits — Hoodies, Pullovers (cm, measured flat)" rows={SIZES.hoodies} sleeveLabel="Sleeve"/>
      </div>
    </>
  );
}

// ─── main export ────────────────────────────────────────
function InfoPage({ id, navigate }) {
  const labels = {
    'shipping':   'Shipping & Returns',
    'faq':        'FAQ',
    'size-guide': 'Size Guide',
  };
  const label = labels[id] || 'Info';

  return (
    <main style={{ paddingTop: 80, minHeight: '70vh' }}>
      <div style={{ maxWidth: 740, margin: '0 auto', padding: '32px var(--pad) 80px' }}>
        <div className="pdp-crumb" style={{ marginBottom: 40 }}>
          <a onClick={() => navigate({ name: 'home' }, '/merch')}
             onMouseEnter={() => onCursor('hover')} onMouseLeave={() => onCursor('default')}>Shop</a>
          <span className="sep">/</span>
          <span>{label}</span>
        </div>
        <h1 className="h-1" style={{ marginBottom: 48 }}>{label}</h1>

        {id === 'shipping'   && <ShippingPage/>}
        {id === 'faq'        && <FAQPage/>}
        {id === 'size-guide' && <SizeGuidePage/>}
      </div>
    </main>
  );
}

Object.assign(window, { InfoPage });
