123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
const FAQS = [
|
|
{
|
|
q: 'Is this a sportsbook?',
|
|
a: 'No. We don\'t take bets. We grade props so you make better ones. VYNDR is an analytics platform — you bring the prop, we show you every angle on it.',
|
|
},
|
|
{
|
|
q: 'How accurate is the model?',
|
|
a: 'Check the ledger. Every grade, every result, updated nightly. We don\'t hide misses. Brier score and CLV are tracked from day one and published.',
|
|
},
|
|
{
|
|
q: 'What sports do you cover?',
|
|
a: 'NBA, MLB, and WNBA at launch. NFL is targeted for September 2026. Each sport has its own calibrated weights and sport-specific factor models.',
|
|
},
|
|
{
|
|
q: 'Can I cancel anytime?',
|
|
a: 'Yes. No contracts. No cancellation fees. No guilt-trip retention emails. Your access continues through the end of the billing period.',
|
|
},
|
|
{
|
|
q: 'What is the Founder Access price?',
|
|
a: 'First 100 users lock $14.99/mo for life. After that the price moves to $24.99/mo and never comes back to $14.99. Locked-in pricing carries if you maintain continuous subscription.',
|
|
},
|
|
{
|
|
q: 'How is payment processed?',
|
|
a: 'We use NexaPay. You pay with Visa, Mastercard, Apple Pay, or Google Pay. We never see your card data. We are PCI-out-of-scope.',
|
|
},
|
|
];
|
|
|
|
export default function FAQ() {
|
|
const [open, setOpen] = useState<number | null>(0);
|
|
|
|
return (
|
|
<section
|
|
style={{
|
|
padding: '96px 24px',
|
|
borderTop: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: 760, margin: '0 auto' }}>
|
|
<header style={{ textAlign: 'center', marginBottom: 48 }}>
|
|
<h2
|
|
style={{
|
|
fontSize: 'clamp(28px, 4vw, 44px)',
|
|
fontWeight: 700,
|
|
letterSpacing: '-0.02em',
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
Questions, answered.
|
|
</h2>
|
|
</header>
|
|
|
|
<div style={{ display: 'grid', gap: 8 }}>
|
|
{FAQS.map((faq, i) => {
|
|
const isOpen = open === i;
|
|
return (
|
|
<div
|
|
key={faq.q}
|
|
className="surface"
|
|
style={{
|
|
padding: 0,
|
|
overflow: 'hidden',
|
|
transition: 'border-color 200ms ease',
|
|
borderColor: isOpen ? 'var(--border-focus)' : 'var(--border)',
|
|
}}
|
|
>
|
|
<button
|
|
onClick={() => setOpen(isOpen ? null : i)}
|
|
aria-expanded={isOpen}
|
|
style={{
|
|
width: '100%',
|
|
padding: '18px 24px',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
color: 'var(--text-primary)',
|
|
fontFamily: 'inherit',
|
|
fontSize: 15,
|
|
fontWeight: 600,
|
|
textAlign: 'left',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
}}
|
|
>
|
|
<span>{faq.q}</span>
|
|
<span
|
|
aria-hidden
|
|
style={{
|
|
color: 'var(--text-tertiary)',
|
|
fontSize: 18,
|
|
transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
|
|
transition: 'transform 200ms ease',
|
|
}}
|
|
>
|
|
+
|
|
</span>
|
|
</button>
|
|
{isOpen && (
|
|
<div
|
|
style={{
|
|
padding: '0 24px 20px',
|
|
fontSize: 14,
|
|
color: 'var(--text-secondary)',
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
{faq.a}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|