// BHP — Support / FAQ Page

const { useState } = React;

const FAQ_SECTIONS = [
  {
    title: 'The Mouse',
    items: [
      { q: "What's the shell made of?",
        a: "316L stainless steel, CNC machined from a solid billet. Not cast, not stamped, not injection moulded. The same alloy grade used in surgical instruments and marine hardware." },
      { q: "How does the shell swap work?",
        a: "Turn the mouse over. The shell slides out from the bottom with a light downward push. No tools, no screws, no adhesive. A new shell drops in the same way and clicks into place." },
      { q: "Is the shell dishwasher safe?",
        a: "Yes. The electronics sit inside the mouse body and never touch water. The steel shell is fully waterproof and can go in the dishwasher or be rinsed under a tap." },
      { q: "What sensor does it use?",
        a: "PixArt PAW3395. 26,000 DPI, 650 IPS, 50G acceleration. The DPI knob on the dock adjusts settings without opening any software." },
    ],
  },
  {
    title: 'Shell Sets',
    items: [
      { q: "Do all shell sets fit all BHP mice?",
        a: "Yes. The shell form factor is constant across the BHP mouse line. Any shell set — current or future — fits any BHP Steele mouse." },
      { q: "What finishes are available?",
        a: "Brushed Steel, Raw Steel, and Blackened Steel are in stock. PVD Gold, PVD Copper, and Mirror Polish are coming soon and available to reserve now." },
      { q: "How many shells come in a set?",
        a: "Each shell set contains two shells — one complete left/right pair. The mouse comes with one Brushed Steel shell included in the base price." },
    ],
  },
  {
    title: 'Shipping & Returns',
    items: [
      { q: "When does the base ship?",
        a: "The BHP Steele Base is in production. Reserving your place today is no-charge. You'll be notified directly when fulfilment begins and asked to confirm your order before any charge." },
      { q: "How long does shipping take?",
        a: "Orders ship within 3 business days of fulfilment. Domestic delivery is 2–5 business days. International shipping times vary — you'll see an estimate at checkout." },
      { q: "What is the return policy?",
        a: "30-day returns, no questions asked. If the product isn't right for any reason, contact us within 30 days of delivery for a full refund. Return shipping is covered." },
      { q: "Do you ship internationally?",
        a: "Yes. International shipping is available at checkout. Import duties and taxes are the responsibility of the customer and vary by country." },
    ],
  },
  {
    title: 'Orders & Payment',
    items: [
      { q: "Is this a pre-order?",
        a: "Yes, at launch. Reserving your place requires no payment. You'll be contacted when production is complete and given the option to complete your order before any charge." },
      { q: "What payment methods are accepted?",
        a: "All major credit and debit cards, Apple Pay, and Google Pay are accepted at checkout." },
      { q: "Can I change or cancel my order?",
        a: "Yes. Contact us any time before your order ships and we'll accommodate any changes or cancellations without charge." },
    ],
  },
];

function FAQPage({ setPage }) {
  const { Eyebrow, Reveal } = window;
  const [open, setOpen] = useState({});
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);

  const toggle = (sec, i) => {
    const key = `${sec}-${i}`;
    setOpen(prev => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div>

      {/* ── HERO ── */}
      <section style={{ background: '#0F0F0F', padding: '128px 60px 72px' }} className="px-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <nav style={{ marginBottom: 36 }}>
            <ol style={{ display: 'flex', gap: 10, listStyle: 'none', padding: 0, alignItems: 'center' }}>
              <li><button onClick={() => setPage('home')} style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', letterSpacing: '0.06em', color: '#B07D45', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>BHP</button></li>
              <li style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: 'rgba(194,196,199,0.25)' }}>—</li>
              <li style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: 'rgba(194,196,199,0.5)', letterSpacing: '0.06em' }}>Support</li>
            </ol>
          </nav>
          <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
            <div>
              <Eyebrow light>Support</Eyebrow>
              <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(2.4rem, 5vw, 4rem)', color: '#FAFAF8', lineHeight: 1.05 }}>
                Questions.<br /><em style={{ color: '#B07D45' }}>Answered.</em>
              </h1>
            </div>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(194,196,199,0.5)', lineHeight: 1.8, maxWidth: '42ch', paddingBottom: 8 }}>
              If you can't find what you need here, use the contact form at the bottom of this page. I reply to every message personally.
            </p>
          </div>
        </div>
      </section>

      {/* ── FAQ SECTIONS ── */}
      <section style={{ background: '#FAFAF8', padding: '72px 60px 96px' }} className="px-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 80, alignItems: 'start' }} className="g2">

          {/* Sticky section nav */}
          <div style={{ position: 'sticky', top: 88 }}>
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.65rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 16 }}>Topics</div>
            <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
              {FAQ_SECTIONS.map(sec => (
                <li key={sec.title}>
                  <a href={`#faq-${sec.title.toLowerCase().replace(/\s/g,'-')}`}
                    style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.92rem', color: 'rgba(15,15,15,0.5)', display: 'block', padding: '6px 0', letterSpacing: '0.02em', transition: 'color 200ms' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#B07D45'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(15,15,15,0.5)'}>
                    {sec.title}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* FAQ accordions */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
            {FAQ_SECTIONS.map(sec => (
              <div key={sec.title} id={`faq-${sec.title.toLowerCase().replace(/\s/g,'-')}`}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.5rem', color: '#0F0F0F', marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid rgba(15,15,15,0.1)' }}>
                  {sec.title}
                </div>
                {sec.items.map((item, i) => {
                  const key = `${sec.title}-${i}`;
                  const isOpen = open[key];
                  const [hov, setHov] = useState(false);
                  return (
                    <div key={i} style={{ borderBottom: '1px solid rgba(15,15,15,0.09)' }}>
                      <button
                        onClick={() => toggle(sec.title, i)}
                        onMouseEnter={() => setHov(true)}
                        onMouseLeave={() => setHov(false)}
                        style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 0', background: 'none', border: 'none', cursor: 'pointer', gap: 24 }}>
                        <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '1.05rem', color: hov ? '#B07D45' : '#0F0F0F', textAlign: 'left', lineHeight: 1.4, transition: 'color 200ms' }}>{item.q}</span>
                        <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '1.2rem', color: '#B07D45', flexShrink: 0, transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform 250ms' }}>+</span>
                      </button>
                      {isOpen && (
                        <div style={{ paddingBottom: 20 }}>
                          <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.98rem', color: 'rgba(15,15,15,0.6)', lineHeight: 1.85, maxWidth: '58ch' }}>{item.a}</p>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>

        </div>
      </section>

      {/* ── CONTACT ── */}
      <section style={{ background: '#0C1F14', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 620, margin: '0 auto' }}>
          <Reveal style={{ marginBottom: 40 }}>
            <Eyebrow light>Contact</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 2.8vw, 2.2rem)', color: '#FAFAF8', lineHeight: 1.15, marginBottom: 14 }}>
              I reply to every message.
            </h2>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.95rem', color: 'rgba(194,196,199,0.45)', lineHeight: 1.75 }}>
              BHP is a one-person operation. If you have a question that isn't covered above, send it here and I'll get back to you directly.
            </p>
          </Reveal>

          {sent ? (
            <Reveal>
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.95rem', color: '#6aad7e', border: '1px solid #6aad7e', padding: '16px 24px', letterSpacing: '0.06em' }}>
                Message received. I'll be in touch.
              </div>
            </Reveal>
          ) : (
            <Reveal>
              <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email address" required
                  style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: '#FAFAF8', background: 'rgba(250,250,248,0.06)', border: '1px solid rgba(194,196,199,0.2)', padding: '13px 18px', outline: 'none' }} />
                <textarea placeholder="Your message" rows={5} required
                  style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: '#FAFAF8', background: 'rgba(250,250,248,0.06)', border: '1px solid rgba(194,196,199,0.2)', padding: '13px 18px', outline: 'none', resize: 'vertical' }}></textarea>
                <button type="submit"
                  style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FAFAF8', background: 'transparent', border: '1px solid rgba(250,250,248,0.28)', padding: '13px', cursor: 'pointer', alignSelf: 'flex-start', minWidth: 160, transition: 'background 220ms' }}
                  onMouseEnter={e => e.currentTarget.style.background = '#B07D45'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  Send message
                </button>
              </form>
            </Reveal>
          )}
        </div>
      </section>

      <Footer setPage={setPage} />
    </div>
  );
}

Object.assign(window, { FAQPage });