// extras.jsx — How It Works, Account, Support, Compliance screens
// Content sourced from live WP pages (FAQ id 13, Support id 14, Shipping id 18, Refund id 19)

const FF_FAQS = [
  {
    cat: 'Orders & Shipping',
    items: [
      { q: 'How long does shipping take?', a: 'Most orders ship within 1-2 business days. Standard shipping is 3-7 business days. Priority shipping is 1-3 business days.' },
      { q: 'Do you offer free shipping?', a: 'Yes. Orders over $150 qualify for free standard shipping within the continental US.' },
      { q: 'Can I change or cancel my order after placing it?', a: 'Orders can be modified or cancelled within 1 hour of placement. After that, contact support immediately - we will do our best to help if the order has not yet shipped.' },
      { q: 'Do you ship internationally?', a: 'We currently ship within the continental United States only. We are working on expanding our shipping coverage.' },
      { q: 'Will I receive a tracking number?', a: 'Yes. A tracking number is emailed as soon as your order ships.' },
    ],
  },
  {
    cat: 'Compatibility',
    items: [
      { q: 'How do I know if a product is compatible with my firearm?', a: 'Each product page lists full compatibility information. If you are unsure, contact our support team with your specific firearm model before ordering.' },
      { q: 'Are AR platform products compatible with both AR-15 and AR-10?', a: 'Compatibility varies by product. Each product page specifies exact platform compatibility. Always check before ordering.' },
      { q: 'Do I need any special tools for installation?', a: 'Most installations require basic armorer\'s tools - punch set, hammer, and a vise block. Full tool requirements are listed on each product page.' },
    ],
  },
  {
    cat: 'Installation',
    items: [
      { q: 'Are FlowFire products really drop-in?', a: 'Yes. All FlowFire components are engineered for true drop-in installation to mil-spec dimensions. No fitting, stoning, or permanent modification is required.' },
      { q: 'Do I need a gunsmith to install FlowFire components?', a: 'No. Our products are designed for DIY installation. Detailed guides are included. That said, if you are not comfortable working on firearms, consult a qualified gunsmith.' },
      { q: 'Where can I find installation guides?', a: 'Installation guides are included with every product. Additional guides are available on our support page.' },
    ],
  },
  {
    cat: 'Returns & Warranty',
    items: [
      { q: 'What is your return policy?', a: 'We accept returns of unused, uninstalled products in original packaging within 30 days of purchase. Items that have been installed or show signs of use are not eligible for return.' },
      { q: 'What does your warranty cover?', a: 'FlowFire products are warranted against defects in materials and workmanship. Warranty does not cover damage from improper installation, misuse, or modification. Contact support to initiate a warranty claim.' },
      { q: 'How do I start a return or warranty claim?', a: 'Email support@flowfiredefense.com with your order number and a description of the issue. We will respond within 1 business day with next steps.' },
    ],
  },
];

// ─── How It Works screen ───
function HowItWorksScreen({ onNav }) {
  return (
    <div>
      <section style={{ padding: '32px 16px 16px' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>SIMPLE PROCESS</div>
        <h1 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 700, letterSpacing: '-0.025em' }}>How It Works</h1>
        <p style={{ marginTop: 10, color: 'var(--ff-text-2)', fontSize: 15.5, lineHeight: 1.6, maxWidth: 360 }}>
          From order to performance in three straightforward steps. CNC-precision components designed for true drop-in installation.
        </p>
      </section>

      <section style={{ padding: '8px 16px 0' }}>
        {FF_PROCESS.map((s, i) => (
          <div key={i} style={{
            padding: '24px 0',
            borderTop: '1px solid var(--ff-border)',
            ...(i === FF_PROCESS.length - 1 ? { borderBottom: '1px solid var(--ff-border)' } : {}),
          }}>
            <div className="mono" style={{ fontSize: 13, color: 'var(--ff-orange)', letterSpacing: '0.14em', fontWeight: 600, marginBottom: 8 }}>
              STEP {s.n}
            </div>
            <h2 className="display" style={{ fontSize: 22, fontWeight: 600, margin: 0, marginBottom: 10, lineHeight: 1.2 }}>{s.title}</h2>
            <p style={{ margin: 0, color: 'var(--ff-text-2)', fontSize: 15, lineHeight: 1.6 }}>{s.body}</p>
          </div>
        ))}
      </section>

      <section style={{ padding: '40px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>WHAT YOU NEED</div>
        <ul style={{ margin: 0, padding: '0 0 0 18px', color: 'var(--ff-text-2)', fontSize: 14.5, lineHeight: 1.85 }}>
          <li>Punch set (3/32", 1/8", 5/32")</li>
          <li>Brass or nylon-tip hammer (8 oz)</li>
          <li>Vise block for AR-15 lower receiver</li>
          <li>15 minutes on the bench</li>
        </ul>
        <p style={{ marginTop: 16, fontSize: 13, color: 'var(--ff-text-3)', lineHeight: 1.55 }}>
          Detailed installation guides are included with every product. If you're not comfortable working on firearms, a qualified gunsmith can install in under 30 minutes.
        </p>
      </section>

      <section style={{ padding: '40px 16px calc(120px + var(--safe-bottom))' }}>
        <button className="btn btn-primary tap" onClick={() => onNav('shop')} style={{ width: '100%', height: 56, fontSize: 16 }}>
          Shop products <IconArrowRight size={18}/>
        </button>
        <button className="btn btn-secondary tap" onClick={() => onNav('support')} style={{ width: '100%', height: 52, marginTop: 10 }}>
          Need help? Contact support
        </button>
      </section>
    </div>
  );
}

// ─── Account screen ───
function AccountScreen({ onNav }) {
  return (
    <div>
      <section style={{ padding: '32px 16px 16px' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>ACCOUNT</div>
        <h1 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 700, letterSpacing: '-0.025em' }}>Welcome back.</h1>
        <p style={{ marginTop: 10, color: 'var(--ff-text-2)', fontSize: 15.5, lineHeight: 1.6, maxWidth: 360 }}>
          Track orders, manage shipping addresses, and view your purchase history.
        </p>
      </section>

      <section style={{ padding: '24px 16px 0' }}>
        <a href="/my-account" className="btn btn-primary tap" style={{ width: '100%', height: 56, fontSize: 16, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          Sign in <IconArrowRight size={18}/>
        </a>
        <a href="/my-account" className="btn btn-secondary tap" style={{ width: '100%', height: 52, marginTop: 10, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          Create an account
        </a>
      </section>

      <section style={{ padding: '48px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>YOUR ACCOUNT INCLUDES</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {[
            { t: 'Order history', d: 'Every FlowFire order in one place. Re-order, request returns, view tracking.' },
            { t: 'Shipping addresses', d: 'Save multiple addresses. Default ships in two clicks.' },
            { t: 'Faster checkout', d: 'Saved payment methods. No re-entering details.' },
            { t: 'Warranty claims', d: 'Open and track warranty claims. Replacement parts shipped fast.' },
          ].map((it, i, arr) => (
            <div key={i} style={{
              padding: '18px 0', borderTop: '1px solid var(--ff-border)',
              ...(i === arr.length - 1 ? { borderBottom: '1px solid var(--ff-border)' } : {}),
            }}>
              <div style={{ fontFamily: 'var(--ff-display)', fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{it.t}</div>
              <div style={{ color: 'var(--ff-text-2)', fontSize: 13.5, lineHeight: 1.55 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '40px 16px calc(120px + var(--safe-bottom))', textAlign: 'center' }}>
        <p style={{ margin: 0, color: 'var(--ff-text-3)', fontSize: 12.5, lineHeight: 1.55 }}>
          Account, login, and order management are powered by WordPress + WooCommerce.
        </p>
      </section>
    </div>
  );
}

// ─── Support screen ───
function SupportScreen({ onNav }) {
  const [openIdx, setOpenIdx] = React.useState(null);
  return (
    <div>
      <section style={{ padding: '32px 16px 16px' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>HELP CENTER</div>
        <h1 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 700, letterSpacing: '-0.025em' }}>Support</h1>
        <p style={{ marginTop: 10, color: 'var(--ff-text-2)', fontSize: 15.5, lineHeight: 1.6, maxWidth: 360 }}>
          Email support@flowfiredefense.com. Response within 1 business day. Monday-Friday, 9am-5pm EST.
        </p>
      </section>

      <section style={{ padding: '8px 16px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <a href="mailto:support@flowfiredefense.com" style={{
            padding: 14, background: 'var(--ff-surface)', border: '1px solid var(--ff-border)',
            borderRadius: 6, color: 'var(--ff-text)', textDecoration: 'none', textAlign: 'center',
          }}>
            <div className="mono" style={{ fontSize: 9, color: 'var(--ff-orange)', letterSpacing: '0.14em', marginBottom: 6 }}>EMAIL</div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Email Support</div>
          </a>
          <a href="/my-account/orders" style={{
            padding: 14, background: 'var(--ff-surface)', border: '1px solid var(--ff-border)',
            borderRadius: 6, color: 'var(--ff-text)', textDecoration: 'none', textAlign: 'center',
          }}>
            <div className="mono" style={{ fontSize: 9, color: 'var(--ff-orange)', letterSpacing: '0.14em', marginBottom: 6 }}>ORDERS</div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Track My Order</div>
          </a>
        </div>
      </section>

      <section style={{ padding: '40px 16px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>FREQUENTLY ASKED</div>
        {FF_FAQS.map((cat, ci) => (
          <div key={ci} style={{ marginBottom: 24 }}>
            <h3 className="display" style={{ fontSize: 18, fontWeight: 600, margin: 0, marginBottom: 8 }}>{cat.cat}</h3>
            {cat.items.map((qa, qi) => {
              const idx = `${ci}-${qi}`;
              const open = openIdx === idx;
              return (
                <div key={qi} style={{ borderTop: '1px solid var(--ff-border)' }}>
                  <button onClick={() => setOpenIdx(open ? null : idx)}
                    style={{ width: '100%', textAlign: 'left', padding: '14px 0', background: 'none', border: 'none',
                      color: 'var(--ff-text)', fontFamily: 'var(--ff-body)', fontSize: 14.5, lineHeight: 1.4, cursor: 'pointer',
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                    <span style={{ fontWeight: 500 }}>{qa.q}</span>
                    <span style={{ color: 'var(--ff-orange)', fontSize: 18, lineHeight: 1, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 200ms' }}>+</span>
                  </button>
                  {open && (
                    <div style={{ padding: '0 0 14px', color: 'var(--ff-text-2)', fontSize: 13.5, lineHeight: 1.6 }}>
                      {qa.a}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        ))}
      </section>

      <section style={{ padding: '20px 16px calc(120px + var(--safe-bottom))' }}>
        <a href="mailto:support@flowfiredefense.com" className="btn btn-primary tap"
          style={{ width: '100%', height: 56, fontSize: 16, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          Contact support <IconArrowRight size={18}/>
        </a>
      </section>
    </div>
  );
}

// ─── Compliance / Shipping & Returns screen ───
function ComplianceScreen({ onNav }) {
  return (
    <div>
      <section style={{ padding: '32px 16px 16px' }}>
        <div className="eyebrow" style={{ marginBottom: 6 }}>POLICY</div>
        <h1 className="display" style={{ fontSize: 32, margin: 0, fontWeight: 700, letterSpacing: '-0.025em' }}>Shipping & Compliance</h1>
        <p style={{ marginTop: 10, color: 'var(--ff-text-2)', fontSize: 15.5, lineHeight: 1.6, maxWidth: 360 }}>
          Where we ship, how we ship, returns, and warranty.
        </p>
      </section>

      <section style={{ padding: '24px 16px 0' }}>
        <div style={{
          padding: 18, background: 'rgba(245,158,11,0.06)', border: '1px solid rgba(245,158,11,0.3)',
          borderRadius: 6, marginBottom: 16,
        }}>
          <div className="mono" style={{ fontSize: 9, color: 'var(--ff-warning)', letterSpacing: '0.14em', marginBottom: 8 }}>RESTRICTED</div>
          <div style={{ fontFamily: 'var(--ff-display)', fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
            We do not ship to these states
          </div>
          <div className="mono" style={{ color: 'var(--ff-text-2)', fontSize: 12.5, lineHeight: 1.7, letterSpacing: '0.04em' }}>
            {FF_RESTRICTED_STATES}
          </div>
          <p style={{ margin: '10px 0 0', color: 'var(--ff-text-3)', fontSize: 12, lineHeight: 1.5 }}>
            Check your state's regulations before ordering. Orders placed from restricted states will be cancelled and refunded.
          </p>
        </div>
      </section>

      <section style={{ padding: '24px 16px 0' }}>
        <h2 className="display" style={{ fontSize: 20, fontWeight: 600, margin: '0 0 12px' }}>Shipping</h2>
        <ul style={{ margin: 0, padding: '0 0 0 18px', color: 'var(--ff-text-2)', fontSize: 14, lineHeight: 1.7 }}>
          <li>Orders ship via USPS within 1-5 business days after payment is verified</li>
          <li>Estimated delivery: 3-5 business days after shipment</li>
          <li>Flat-rate shipping: $8 under $120, $5 over $120</li>
          <li>Tracking info emailed when order ships</li>
        </ul>
      </section>

      <section style={{ padding: '24px 16px 0' }}>
        <h2 className="display" style={{ fontSize: 20, fontWeight: 600, margin: '0 0 12px' }}>Returns</h2>
        <ul style={{ margin: 0, padding: '0 0 0 18px', color: 'var(--ff-text-2)', fontSize: 14, lineHeight: 1.7 }}>
          <li>30 days from delivery</li>
          <li>Resalable condition - no excessive wear, damage, or modification</li>
          <li>Email support for a Return Merchandise Authorization (RMA) before shipping back</li>
          <li>Customer pays return shipping unless item is defective</li>
          <li>Refund processed in 3-5 business days after return is received and inspected</li>
        </ul>
      </section>

      <section style={{ padding: '24px 16px 0' }}>
        <h2 className="display" style={{ fontSize: 20, fontWeight: 600, margin: '0 0 12px' }}>Warranty</h2>
        <p style={{ margin: 0, color: 'var(--ff-text-2)', fontSize: 14, lineHeight: 1.65 }}>
          FlowFire products are warranted against defects in materials and workmanship for the life of the product. Warranty does not cover damage from improper installation, misuse, or modification. Email support to start a warranty claim.
        </p>
      </section>

      <section style={{ padding: '32px 16px calc(120px + var(--safe-bottom))' }}>
        <a href="mailto:support@flowfiredefense.com" className="btn btn-primary tap"
          style={{ width: '100%', height: 56, fontSize: 16, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          Contact support <IconArrowRight size={18}/>
        </a>
      </section>
    </div>
  );
}

Object.assign(window, { FF_FAQS, HowItWorksScreen, AccountScreen, SupportScreen, ComplianceScreen });