/* FAQ page — organized into four categories with accordion-style expand/collapse.
   Matches the site's design language: Geist font, CSS variable tokens, crimson accent. */

const FAQ_CATEGORIES = [
  {
    id: 'general',
    label: 'General',
    items: [
      {
        q: 'What is OrthoVaultOS?',
        a: 'OrthoVaultOS is a personal notes and surgical workflow app for orthopedic surgeons and residents. It lets you organize procedure steps, surgeon preferences, implant references, and operative pearls in one place — available on macOS and Windows. It isn’t limited to orthopedics, either: any surgeon in any subspecialty can use it today to build the same kind of personal library — orthopedics is just the only subspecialty with ready-made procedure templates so far.'
      },
      {
        q: 'Who is it designed for?',
        a: 'OrthoVaultOS is designed for any subspecialty — surgical residents, fellows, and attending surgeons who want a fast, organized way to reference cases, capture surgeon preferences, and build their personal knowledge base over a rotation or career. Right now, pre-built procedure templates only exist for orthopedic surgery, but the app itself works the same way for any surgical specialty — you can build out your own procedures and preferences from scratch.'
      },
      {
        q: 'What platforms does it run on?',
        a: 'OrthoVaultOS runs natively on macOS and Windows. Cloud photo sync (Professional tier) is available via the web. There is no mobile app at this time.'
      },
      {
        q: 'Is OrthoVaultOS connected to my hospital\'s EHR?',
        a: 'No. OrthoVaultOS is a standalone personal workflow tool and has no connection to any institutional EHR, clinical system, or hospital network. Your institution\'s EHR remains the official source of truth for all patient records.'
      },
      {
        q: 'Can I use it during a case in the OR?',
        a: 'Yes — it\'s designed for that. The interface is built for quick, one-handed reference so you can glance at steps, surgeon preferences, or implant details without breaking sterile field. Always ensure use complies with your institution\'s policies.'
      },
    ]
  },
  {
    id: 'data',
    label: 'Data & Privacy',
    items: [
      {
        q: 'Is OrthoVaultOS HIPAA compliant?',
        a: 'No. OrthoVaultOS is a personal workflow and notes tool, not a clinical record system. It does not comply with HIPAA or healthcare security regulations. Do not enter patient names, MRNs, diagnoses, or any identifying information into the app.'
      },
      {
        q: 'Where is my data stored?',
        a: 'Your data is stored securely in the cloud, so it\'s always accessible from any device you\'re signed in to. We use Supabase encrypted cloud storage to keep your procedures, surgeon profiles, and notes safe and in sync.'
      },
      {
        q: 'Can I export my data?',
        a: 'Yes. You can export your entire library as a JSON file at any time from Settings → Export. This is useful if you\'re moving institutions or want a personal backup.'
      },
      {
        q: 'What happens to my data if I delete my account?',
        a: 'You have 30 days to export your library after requesting account deletion. After that, all data is permanently removed from our servers.'
      },
      {
        q: 'Do you sell my data?',
        a: 'No. We do not sell your data, share your notes with third parties, or use your content for advertising. Anonymous aggregate usage analytics are used solely to improve the app.'
      },
    ]
  },
  {
    id: 'pricing',
    label: 'Pricing & Billing',
    items: [
      {
        q: 'Is there a free tier?',
        a: 'Yes. The free tier includes 1 surgeon profile and 1 procedure template with no time limit. No credit card required to get started.'
      },
      {
        q: 'What\'s the difference between Essentials and Professional?',
        a: 'Essentials ($9.99/mo) gives you up to 10 surgeon profiles and 20 procedures. Professional ($19.99/mo) gives you unlimited surgeons and procedures, plus cloud photo sync — upload intraoperative photos from the web and access them directly in the app. Professional syncs across up to 3 devices.'
      },
      {
        q: 'Can I cancel anytime?',
        a: 'Yes. Cancel from your account settings at any time. You keep access until the end of your current billing period. No refunds are issued for partial months.'
      },
      {
        q: 'Is there a discount for medical students or residents?',
        a: 'Not at the moment. The free tier is designed to cover most student and early-resident use cases. Reach out to support if you have a specific situation and we\'ll do our best to help.'
      },
      {
        q: 'What payment methods do you accept?',
        a: 'We accept all major credit and debit cards through Stripe. Payments are processed securely — we never see or store your card number.'
      },
    ]
  },
  {
    id: 'technical',
    label: 'Using the App',
    items: [
      {
        q: 'How do I get started?',
        a: 'Download OrthoVaultOS from the home page, create a free account, and you\'re in. The setup takes under two minutes — pick your subspecialty, add your first procedure, and go.'
      },
      {
        q: 'Does my library sync across my devices?',
        a: 'Yes. Sign in and your procedures, steps, surgeon preferences, implant lists, evidence links, videos, and notes sync automatically across every device you use — a status dot in Settings shows idle, syncing, synced, or error. Upgrade to Professional for cloud photo sync too.'
      },
      {
        q: 'Can I share my library with a co-resident?',
        a: 'Not directly in the current version — sync keeps your own library current across your own devices, but doesn\'t share it with other users. You can export your library as a JSON file from Account → Data & Privacy and share it manually, or export a single procedure as a template. Collaborative sync is on the roadmap.'
      },
      {
        q: 'How do surgeon preference panels work?',
        a: 'Each surgeon gets their own profile — gloves, suture sizes, tourniquet pressure, positioning notes, and the pearls they always mention. When you select a surgeon on any procedure, the entire panel reconfigures to their preferences automatically.'
      },
      {
        q: 'What is the AI assistant, and how do I set it up?',
        a: <>
          The AI assistant lets you ask surgical questions in plain language — "What are the key steps for a pelvic ex-fix?" or "Suggest implant sizing for a TKA." Quick Search's evidence summaries work the same way. Both are bring-your-own-key — available on every tier, including Free, no upgrade required.
          <br /><br />
          To turn it on: open <strong>Settings</strong> in the app, and paste in an API key from either provider (or both) —
          {' '}<a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', fontWeight: 600 }}>console.anthropic.com</a> for Claude, or
          {' '}<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', fontWeight: 600 }}>aistudio.google.com</a> for Gemini (Gemini has a free tier — no credit card needed). Each Settings section has a "Get one →" link straight to the right page.
          <br /><br />
          Your key is never sent to or stored on our servers — usage is billed directly to your own Anthropic or Google account.
        </>
      },
      {
        q: 'How do I contact support?',
        a: 'Email us or use the contact form on the Support page. We respond to every message within 48 hours. Bug reports during an active rotation are bumped to the top of the queue.'
      },
    ]
  }
];

function FAQItem({ item, accent, isOpen, onToggle }) {
  return (
    <div style={{
      borderBottom: '1px solid var(--border-soft)',
    }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%', background: 'none', border: 'none',
          padding: '20px 0', cursor: 'pointer', fontFamily: 'inherit',
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
          gap: 20, textAlign: 'left'
        }}>
        <span style={{
          fontSize: 15.5, fontWeight: 600, color: 'var(--text)',
          letterSpacing: -0.2, lineHeight: 1.4
        }}>{item.q}</span>
        <span style={{
          width: 22, height: 22, borderRadius: 11, flexShrink: 0,
          background: isOpen ? accent : 'var(--surface-2)',
          border: `1px solid ${isOpen ? accent : 'var(--border)'}`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          transition: 'background 0.15s ease, border-color 0.15s ease',
          marginTop: 2
        }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none"
            stroke={isOpen ? '#fff' : 'var(--muted)'} strokeWidth="3"
            strokeLinecap="round" strokeLinejoin="round"
            style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s ease' }}>
            <polyline points="6 9 12 15 18 9" />
          </svg>
        </span>
      </button>
      {isOpen && (
        <div style={{
          paddingBottom: 20, paddingRight: 40,
          fontSize: 14.5, lineHeight: 1.7, color: 'var(--muted)', textWrap: 'pretty'
        }}>
          {item.a}
        </div>
      )}
    </div>
  );
}

function FAQApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent || '#b91c2c';
  const theme  = t.theme  || 'light';
  const isMobile = useIsMobile();
  const [openId, setOpenId] = React.useState(null);
  const [activeCategory, setActiveCategory] = React.useState('general');

  React.useEffect(() => {
    document.body.setAttribute('data-theme', theme);
    return () => { document.body.removeAttribute('data-theme'); };
  }, [theme]);

  function toggle(id) {
    setOpenId(prev => prev === id ? null : id);
  }

  const activeItems = FAQ_CATEGORIES.find(c => c.id === activeCategory)?.items || [];

  return (
    <div data-theme={theme} style={{
      fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      color: 'var(--text)', background: 'var(--bg)', minHeight: '100vh',
    }}>
      <Nav accent={accent} />

      {/* Header */}
      <section style={{ padding: isMobile ? '40px 20px 32px' : '80px 28px 48px', position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(40% 70% at 80% 0%, ${accent}1a, transparent 60%)`,
        }}></div>
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
          <div style={{
            fontSize: 11.5, fontWeight: 600, color: accent, letterSpacing: 1.4,
            textTransform: 'uppercase', marginBottom: 14
          }}>FAQ</div>
          <h1 style={{
            fontSize: isMobile ? 32 : 64, lineHeight: 1.05, letterSpacing: isMobile ? -1 : -1.8, fontWeight: 600,
            margin: '0 0 18px', color: 'var(--text)', textWrap: 'balance'
          }}>
            Frequently asked{' '}
            <span style={{ color: accent, fontWeight: 600, textTransform: 'uppercase', letterSpacing: -0.5 }}>
              QUESTIONS.
            </span>
          </h1>
          <p style={{
            fontSize: isMobile ? 15.5 : 18, lineHeight: 1.55, color: 'var(--muted)',
            margin: 0, maxWidth: 560, textWrap: 'pretty'
          }}>
            Everything you need to know about OrthoVaultOS — from getting started to data and billing.
          </p>
        </div>
      </section>

      {/* Category tabs + questions */}
      <section style={{ padding: isMobile ? '0 20px 56px' : '0 28px 96px', borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>

          {/* Category pill tabs */}
          <div style={{
            display: 'flex', gap: 8, flexWrap: 'wrap',
            padding: '28px 0 36px',
            borderBottom: '1px solid var(--border-soft)'
          }}>
            {FAQ_CATEGORIES.map(cat => {
              const isActive = activeCategory === cat.id;
              return (
                <button key={cat.id} onClick={() => { setActiveCategory(cat.id); setOpenId(null); }} style={{
                  padding: '8px 18px', borderRadius: 100,
                  border: `1px solid ${isActive ? accent : 'var(--border)'}`,
                  background: isActive ? `${accent}1a` : 'var(--surface)',
                  color: isActive ? accent : 'var(--muted)',
                  fontSize: 13.5, fontWeight: isActive ? 600 : 500,
                  cursor: 'pointer', fontFamily: 'inherit', letterSpacing: -0.1,
                  transition: 'all 0.15s ease'
                }}>
                  {cat.label}
                  <span style={{
                    marginLeft: 7, fontSize: 11,
                    fontFamily: '"Geist Mono", ui-monospace, monospace',
                    opacity: 0.6
                  }}>{cat.items.length}</span>
                </button>
              );
            })}
          </div>

          {/* Questions */}
          <div style={{ maxWidth: 760, marginTop: 8 }}>
            {activeItems.map((item, i) => (
              <FAQItem
                key={i}
                item={item}
                accent={accent}
                isOpen={openId === `${activeCategory}-${i}`}
                onToggle={() => toggle(`${activeCategory}-${i}`)}
              />
            ))}
          </div>

          {/* Still have questions CTA */}
          <div style={{
            maxWidth: 760, marginTop: 48,
            padding: '28px 32px',
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 18, flexWrap: 'wrap'
          }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text)', letterSpacing: -0.2 }}>
                Still have questions?
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>
                A real person reads every message and responds within 48 hours.
              </div>
            </div>
            <a href="support.html" style={{
              padding: '11px 20px', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
              background: accent, color: '#fff',
              border: 'none', borderRadius: 9, cursor: 'pointer', letterSpacing: -0.1,
              textDecoration: 'none', whiteSpace: 'nowrap',
              boxShadow: `0 6px 16px -6px ${accent}99`
            }}>Contact support →</a>
          </div>
        </div>
      </section>

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

ReactDOM.createRoot(document.getElementById('root')).render(<FAQApp />);
