/* Comparison, Services, Guarantee, FAQ, Email, Footer */

function ComparisonSection() {
  const rows = [
    { label: 'Lead exclusivity',  other: 'Shared with multiple competitors',     visory: '100% exclusive, always' },
    { label: 'Lead quality',      other: 'Unverified, high volume',                visory: 'Pre-qualified, high-intent only' },
    { label: 'Pricing model',     other: 'Monthly retainer regardless of results', visory: 'Pay per lead — no results, no pay' },
    { label: 'Contract terms',    other: 'Long-term lock-ins',                     visory: 'Flexible, no long-term commitment' },
    { label: 'Transparency',      other: 'Black box — no insight into sources',    visory: 'Full visibility into every lead' },
    { label: 'Guarantee',         other: 'None',                                   visory: 'We work until you see results' },
  ];

  const X = () => (
    <span className="cmp-mark"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ color: 'var(--fg-faint)' }}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span>
  );
  const Check = () => (
    <span className="cmp-mark"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--accent)' }}><path d="M20 6 9 17l-5-5"/></svg></span>
  );

  return (
    <section id="comparison" className="section" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 64 }}>
          <div className="kicker-line"><span className="eyebrow">The Difference</span></div>
          <h2 className="display display-md" style={{ marginBottom: 24 }}>Not all leads are <em>created equal.</em></h2>
          <p style={{ fontSize: 17, color: 'var(--fg-muted)', maxWidth: 640, margin: 0 }}>
            Here's how Visory AI compares to typical lead vendors.
          </p>
        </div>

        <div className="reveal" style={{ border: '1px solid var(--line-soft)' }}>
          <div className="cmp-grid">
            <div className="cmp-head"></div>
            <div className="cmp-head" style={{ textAlign: 'left' }}>
              <span className="eyebrow-dim">Other Vendors</span>
            </div>
            <div className="cmp-head visory-col" style={{ textAlign: 'left' }}>
              <span className="eyebrow">Visory AI</span>
            </div>

            {rows.map((r, i) => (
              <React.Fragment key={i}>
                <div className="cmp-row-label serif" style={{ fontSize: 18, fontWeight: 400, letterSpacing: '-0.005em' }}>{r.label}</div>
                <div className="cmp-cell"><X /><span style={{ color: 'var(--fg-dim)' }}>{r.other}</span></div>
                <div className="cmp-cell visory-col"><Check /><span style={{ color: 'var(--fg)' }}>{r.visory}</span></div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  const services = [
    { num: '01', title: 'AI Outreach Campaigns', body: 'Automated follow-up sequences that keep your firm top of mind and convert more leads into signed retainers — without your intake team doing the manual work.' },
    { num: '02', title: 'SEO & Organic Visibility', body: "Long-term search optimization that builds consistent inbound traffic to your firm. Every month, more qualified claimants find you before they find a competitor." },
    { num: '03', title: 'CRM Setup & Automation', body: 'Your entire pipeline — every lead, every follow-up, every status — in one fully automated system. Nothing falls through the cracks.' },
  ];
  return (
    <section id="services" className="section" style={{ background: 'var(--bg-elev)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 64 }}>
          <div className="kicker-line"><span className="eyebrow">Add-On Services</span></div>
          <h2 className="display display-md" style={{ marginBottom: 24 }}>We also help you <em>close more</em> of what you get.</h2>
          <p style={{ fontSize: 17, color: 'var(--fg-muted)', maxWidth: 720, margin: 0 }}>
            Our core offering is leads. If you want to build the systems around them, these add-ons help you convert more and scale faster.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line-soft)', border: '1px solid var(--line-soft)' }}>
          {services.map((s, i) => (
            <div key={i} className="reveal lift-card" style={{ background: 'var(--bg-elev)', borderRadius: 0, border: 0, padding: '44px 36px', minHeight: 320 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginBottom: 28, letterSpacing: '0.22em' }}>— {s.num}</div>
              <h3 className="serif" style={{ fontSize: 26, fontWeight: 400, color: 'var(--fg)', margin: '0 0 16px', letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.7, margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function GuaranteeSection() {
  return (
    <section id="guarantee" className="section" style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle, oklch(76% 0.09 78 / 0.08) 0%, transparent 60%)' }} />
      </div>
      <div className="container reveal" style={{ position: 'relative', textAlign: 'center', maxWidth: 900 }}>
        {/* Seal mark */}
        <div style={{ position: 'relative', width: 120, height: 120, margin: '0 auto 48px' }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '1px solid var(--accent-line)' }} />
          <div style={{ position: 'absolute', inset: 12, borderRadius: '50%', border: '1px solid var(--accent-line)' }} />
          <div style={{ position: 'absolute', inset: 24, borderRadius: '50%', background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--accent)' }}><path d="M20 6 9 17l-5-5"/></svg>
          </div>
        </div>
        <div className="eyebrow" style={{ marginBottom: 24 }}>The Guarantee</div>
        <h2 className="display display-md" style={{ marginBottom: 28 }}>Qualified Cases Delivered — <em>or we don't stop.</em></h2>
        <p className="pull" style={{ color: 'var(--fg)', marginBottom: 28 }}>
          We stand behind every lead we send. If quality falls short of what we promised, we make it right.
        </p>
        <p style={{ fontSize: 16, color: 'var(--fg-muted)', maxWidth: 640, margin: '0 auto 48px', lineHeight: 1.7 }}>
          No fine print. No excuses. If we fall short, we keep working at no extra cost until you're seeing real results.
        </p>
        <a className="btn-primary" href="https://outlook.office.com/book/MeetingwithVisoryAICopy@visoryaiconsulting.com/?ismsaljsauthenabled" target="_blank" rel="noopener noreferrer">Book Your Free Strategy Call →</a>
      </div>
    </section>
  );
}

const FAQS = [
  { q: 'How quickly will I start receiving leads?', a: 'First leads can be delivered as soon as the next day, and most firms are fully onboarded and live within 7–14 days. After your discovery call, we configure targeting around your case types and jurisdictions, then start delivery as soon as the first claimants are screened and verified.' },
  { q: 'Are the leads exclusive to my firm?', a: 'Yes. Every lead we deliver is 100% exclusive — never sold or shared with another firm. When you receive a lead, you are the only attorney being introduced to that claimant.' },
  { q: 'How does the pricing work?', a: 'You pay per lead — no monthly retainers, no setup costs, no long-term lock-ins. Choose Exclusive Leads, Live Transfers, or Signed Retainers; budget what fits your firm; and we deliver on a per-unit basis.' },
  { q: 'What case types do you work with?', a: 'We focus exclusively on motor vehicle accidents — including standard MVAs, rideshare collisions, truck and commercial vehicle accidents, pedestrian injury, and uninsured motorist claims.' },
  { q: "What if the leads aren't converting?", a: "We treat lead quality as our problem, not yours. If conversion is below benchmark, we tighten qualification, refine sources, and replace any lead that fails our quality standard at no cost. We work until you see results." },
  { q: 'Do you offer the outreach and CRM services separately from leads?', a: 'Yes. While leads are our core product, AI Outreach, SEO, and CRM Setup can each be engaged independently or bundled with your lead program — whichever fits your stack.' },
];

function FAQItem({ q, a, isOpen, onToggle }) {
  return (
    <div className="faq-item">
      <button className="faq-q" onClick={onToggle} aria-expanded={isOpen}>
        <span>{q}</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ flexShrink: 0, transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)', transition: 'transform .35s', color: isOpen ? 'var(--accent)' : 'var(--fg-dim)' }}>
          <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
        </svg>
      </button>
      <div className={'faq-a ' + (isOpen ? 'open' : '')}>
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.7, maxWidth: 760 }}>{a}</p>
      </div>
    </div>
  );
}

function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section" style={{ background: 'var(--bg-elev)' }}>
      <div className="container reveal">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 120 }}>
            <div className="kicker-line"><span className="eyebrow">Common Questions</span></div>
            <h2 className="display display-sm" style={{ marginBottom: 24 }}>Frequently <em>asked.</em></h2>
            <p style={{ fontSize: 14, color: 'var(--fg-muted)', maxWidth: 280, margin: 0 }}>
              Don't see your question? Book a strategy call and we'll answer it directly.
            </p>
          </div>
          <div>
            {FAQS.map((f, i) => (
              <FAQItem key={i} q={f.q} a={f.a} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function EmailSection() {
  const [first, setFirst] = React.useState('');
  const [last, setLast] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [firm, setFirm] = React.useState('');
  const [state, setState] = React.useState('idle'); // idle | submitting | done
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setState('submitting');
    const subject = encodeURIComponent(`New market notification request — ${first} ${last}`.trim());
    const body = encodeURIComponent(
      `New market-availability request from the Visory site:\n\n` +
      `Name: ${first} ${last}\n` +
      `Email: ${email}\n` +
      `Firm: ${firm || '(not provided)'}\n\n` +
      `Please reach out when their market opens.`
    );
    // Open the visitor's mail client addressed to Tyler with the form details prefilled.
    window.location.href = `mailto:tyler@visoryaiconsulting.com?subject=${subject}&body=${body}`;
    setTimeout(() => setState('done'), 700);
  };
  return (
    <section id="email" className="section-tight" style={{ background: 'var(--bg)', borderTop: '1px solid var(--line-soft)' }}>
      <div className="container reveal" style={{ maxWidth: 680 }}>
        <div style={{ border: '1px solid var(--accent-line)', padding: '56px 48px', textAlign: 'center', background: 'linear-gradient(180deg, rgba(201,169,110,0.04), transparent)' }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Stay In The Loop</div>
          <h2 className="display display-sm" style={{ marginBottom: 16 }}>Get notified when <em>your market opens.</em></h2>
          <p style={{ fontSize: 15, color: 'var(--fg-muted)', marginBottom: 36, maxWidth: 480, margin: '0 auto 36px' }}>
            We work with one firm per market. Enter your details and we'll reach out when availability opens in your area.
          </p>
          {state === 'done' ? (
            <div style={{ padding: '32px 0' }}>
              <div className="serif" style={{ fontSize: 28, color: 'var(--accent)', fontWeight: 400, marginBottom: 8 }}>Thank you, {first || 'counselor'}.</div>
              <p style={{ fontSize: 14, color: 'var(--fg-muted)', margin: 0 }}>We'll reach out as soon as your market opens.</p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <input type="text" placeholder="First name" value={first} onChange={e => setFirst(e.target.value)} className="email-field" />
                <input type="text" placeholder="Last name" value={last} onChange={e => setLast(e.target.value)} className="email-field" />
              </div>
              <input type="email" placeholder="Your email address" value={email} onChange={e => setEmail(e.target.value)} className="email-field" required />
              <input type="text" placeholder="Firm name (optional)" value={firm} onChange={e => setFirm(e.target.value)} className="email-field" />
              <button type="submit" className="btn-primary" style={{ justifyContent: 'center', marginTop: 8 }} disabled={state === 'submitting'}>
                {state === 'submitting' ? 'Submitting…' : 'Get Notified →'}
              </button>
              <p style={{ fontSize: 11, color: 'var(--fg-dim)', marginTop: 4 }}>No spam. Unsubscribe any time.</p>
            </form>
          )}
        </div>
      </div>
      <style>{`
        .email-field {
          background: var(--bg); border: 1px solid var(--line); color: var(--fg);
          padding: 14px 16px; outline: none; font-size: 14px; font-weight: 300;
          transition: border-color .25s;
        }
        .email-field::placeholder { color: var(--fg-faint); }
        .email-field:focus { border-color: var(--accent); }
      `}</style>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--bg)', borderTop: '1px solid var(--line-soft)', padding: '80px 32px 40px' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 56, borderBottom: '1px solid var(--line-soft)' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
            <img src="assets/logo.png" alt="" width="36" height="36" style={{ objectFit: 'contain' }} />
            <span className="serif" style={{ fontSize: 26, color: 'var(--fg)', letterSpacing: '-0.01em' }}>Visory AI</span>
          </div>
          <p style={{ fontSize: 14, color: 'var(--fg-muted)', maxWidth: 380, lineHeight: 1.7, margin: 0 }}>
            Vision-forward — see further, sell faster. Exclusive, pre-qualified leads for personal injury law firms.
          </p>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Explore</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <li><a href="#who" style={{ fontSize: 14, color: 'var(--fg-muted)' }}>Who We Serve</a></li>
            <li><a href="#process" style={{ fontSize: 14, color: 'var(--fg-muted)' }}>Process</a></li>
            <li><a href="#calculator" style={{ fontSize: 14, color: 'var(--fg-muted)' }}>Calculator</a></li>
            <li><a href="#faq" style={{ fontSize: 14, color: 'var(--fg-muted)' }}>FAQ</a></li>
          </ul>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Contact</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <li style={{ fontSize: 14, color: 'var(--fg-muted)' }}>tyler@visoryaiconsulting.com</li>
            <li style={{ fontSize: 14, color: 'var(--fg-muted)' }}>+1 (972) 742-1480</li>
          </ul>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>Leadership</div>
          <p style={{ fontSize: 14, color: 'var(--fg)', margin: '0 0 20px' }}>Tyler Hart</p>
          <a href="https://outlook.office.com/book/MeetingwithVisoryAICopy@visoryaiconsulting.com/?ismsaljsauthenabled" target="_blank" rel="noopener noreferrer" className="btn-ghost" style={{ padding: '10px 16px', fontSize: 10 }}>Book a Call</a>
        </div>
      </div>
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 32, flexWrap: 'wrap', gap: 16 }}>
        <p style={{ fontSize: 12, color: 'var(--fg-dim)', margin: 0 }}>© 2026 Visory AI Consulting. All rights reserved.</p>
        <p style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.28em', textTransform: 'uppercase', margin: 0 }}>See Further · Sell Faster</p>
      </div>
    </footer>
  );
}

Object.assign(window, { ComparisonSection, ServicesSection, GuaranteeSection, FAQSection, EmailSection, Footer });