resolutionflow/frontend/src/pages/LandingPage.tsx

import { useState, useEffect, useRef } from 'react'
import { Link } from 'react-router-dom'
import { PageMeta } from '@/components/common/PageMeta'
import { useAppConfig } from '@/hooks/useAppConfig'
import { MarketingFooter } from '@/components/common/MarketingFooter'
import '@/styles/landing.css'

const FAQ_ITEMS = [
  {
    q: 'How is this different from just using ChatGPT?',
    a: 'FlowPilot is purpose-built for MSP troubleshooting. It understands your stack (AD, Exchange, networking, VPN), captures every diagnostic step as you work, and generates formatted ticket notes ready for your PSA. ChatGPT doesn\u2019t build documentation and can\u2019t push notes to ConnectWise.',
  },
  {
    q: 'Is my data safe?',
    a: 'Troubleshooting sessions are encrypted and isolated per team. We never use your data to train AI models. You control what gets documented and exported.',
  },
  {
    q: 'What PSA tools do you integrate with?',
    a: 'Launching with ConnectWise PSA — session documentation exports directly as internal ticket notes. Atera and Syncro integrations are next. During beta, you can copy formatted notes into any PSA.',
  },
  {
    q: 'What counts as a \u201csession\u201d?',
    a: 'One session = one troubleshooting conversation. Describe an issue, work through it with FlowPilot, resolve it. Whether that takes 2 minutes or 2 hours, it\u2019s one session. Free plan: 20 sessions/month. Pro and Team: unlimited.',
  },
  {
    q: 'What if FlowPilot gets it wrong?',
    a: 'FlowPilot is a copilot, not autopilot. Every suggestion is a recommendation — you decide what to act on. And because every step is documented, you always have a full audit trail of what was tried and why.',
  },
]

export default function LandingPage() {
  const appConfig = useAppConfig()
  const [navScrolled, setNavScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [openFaq, setOpenFaq] = useState<number | null>(null)
  const mobileMenuRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handleScroll = () => setNavScrolled(window.scrollY > 40)
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (mobileMenuRef.current && !mobileMenuRef.current.contains(e.target as Node)) {
        setMobileMenuOpen(false)
      }
    }
    if (mobileMenuOpen) {
      document.addEventListener('mousedown', handleClickOutside)
      return () => document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [mobileMenuOpen])

  const handleMobileNavClick = () => setMobileMenuOpen(false)

  useEffect(() => {
    const els = document.querySelectorAll('.landing-reveal')
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) entry.target.classList.add('visible')
        })
      },
      { threshold: 0.15 }
    )
    els.forEach(el => observer.observe(el))
    return () => observer.disconnect()
  }, [])

  const toggleFaq = (index: number) => {
    setOpenFaq(prev => prev === index ? null : index)
  }

  return (
    <>
      <PageMeta
        title="ResolutionFlow — From Issue to Resolution, Documented"
        description="Your AI troubleshooting copilot. Describe the issue, get help fixing it, and get clean ticket notes — automatically."
      />

      <div className="landing-page">
        <a href="#main" className="landing-skip-link">Skip to content</a>

        {/* Navigation */}
        <nav className={`landing-nav ${navScrolled ? 'scrolled' : ''}`} ref={mobileMenuRef}>
          <div className="landing-nav-inner">
            <a href="#" className="landing-nav-logo">
              <div className="landing-nav-logo-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="5" r="2" />
                  <line x1="12" y1="7" x2="12" y2="11" />
                  <circle cx="6" cy="15" r="2" />
                  <circle cx="18" cy="15" r="2" />
                  <line x1="12" y1="11" x2="6" y2="13" />
                  <line x1="12" y1="11" x2="18" y2="13" />
                </svg>
              </div>
              <div className="landing-nav-wordmark">Resolution<span>Flow</span></div>
            </a>
            <ul className="landing-nav-links">
              <li><a href="#features">Features</a></li>
              <li><a href="#how-it-works">How It Works</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
            <div className="landing-nav-cta">
              <Link to="/login" className="landing-btn-ghost">Sign In</Link>
              <Link to="/register" className="landing-btn-primary">Get Started Free</Link>
            </div>
            <button
              className={`landing-hamburger ${mobileMenuOpen ? 'open' : ''}`}
              onClick={() => setMobileMenuOpen(v => !v)}
              aria-label="Toggle menu"
              aria-expanded={mobileMenuOpen}
            >
              <span /><span /><span />
            </button>
          </div>
          {mobileMenuOpen && (
            <div className="landing-mobile-menu">
              <a href="#features" onClick={handleMobileNavClick}>Features</a>
              <a href="#how-it-works" onClick={handleMobileNavClick}>How It Works</a>
              <a href="#pricing" onClick={handleMobileNavClick}>Pricing</a>
              <a href="#faq" onClick={handleMobileNavClick}>FAQ</a>
              <div className="landing-mobile-menu-divider" />
              <Link to="/login" onClick={handleMobileNavClick}>Sign In</Link>
              <Link to="/register" className="landing-btn-primary" onClick={handleMobileNavClick} style={{ textAlign: 'center' }}>Get Started Free</Link>
            </div>
          )}
        </nav>

        <main id="main" className="landing-main">
          {/* Hero — left-aligned, two columns */}
          <section className="landing-hero">
            <div className="landing-hero-inner">
              <div className="landing-hero-content">
                <div className="landing-hero-badge">Now in Beta</div>
                <h1>
                  Resolve tickets faster.<br />
                  <span className="landing-hero-accent">Notes write themselves.</span>
                </h1>
                <p className="landing-hero-sub">
                  Your AI troubleshooting copilot for MSPs. Describe the issue, get expert guidance, and get clean ticket documentation &mdash; without writing a single note.
                </p>
                <div className="landing-hero-actions">
                  <Link to="/register" className="landing-btn-hero-primary">Start Free</Link>
                  {appConfig.self_serve_enabled && (
                    <Link
                      to="/pricing"
                      className="landing-btn-hero-secondary"
                      data-testid="landing-see-pricing"
                    >
                      See pricing
                    </Link>
                  )}
                  <a href="#how-it-works" className="landing-btn-hero-secondary">See How It Works</a>
                </div>
                <p className="landing-hero-credibility">
                  Built by a 15-year MSP veteran who got tired of empty ticket notes.
                </p>
              </div>
            </div>
          </section>

          {/* Problem — editorial list, no cards */}
          <section id="problem" className="landing-section landing-section-alt landing-reveal landing-section-tight">
            <div className="landing-section-inner">
              <div className="landing-problem-layout">
                <div className="landing-problem-headline">
                  <div className="landing-section-label">The Problem</div>
                  <h2>Documentation is broken.<br />Everyone knows it.</h2>
                  <p>Engineers don&apos;t want to write it. Managers hate chasing it. Clients never see it. The same issues get solved from scratch, every time.</p>
                </div>
                <ol className="landing-problem-list">
                  <li className="landing-problem-item">
                    <span className="landing-problem-num">01</span>
                    <div className="landing-problem-body">
                      <h3>15&ndash;25 min lost per ticket</h3>
                      <p>More time documenting than resolving. After a complex issue, writing notes is the last thing anyone does.</p>
                    </div>
                  </li>
                  <li className="landing-problem-item">
                    <span className="landing-problem-num">02</span>
                    <div className="landing-problem-body">
                      <h3>Vague, useless notes</h3>
                      <p>&ldquo;Fixed Outlook&rdquo; tells no one anything. Notes under pressure are always too vague to help next time.</p>
                    </div>
                  </li>
                  <li className="landing-problem-item">
                    <span className="landing-problem-num">03</span>
                    <div className="landing-problem-body">
                      <h3>Knowledge walks out the door</h3>
                      <p>When a senior engineer leaves, years of tribal knowledge vanish overnight.</p>
                    </div>
                  </li>
                  <li className="landing-problem-item">
                    <span className="landing-problem-num">04</span>
                    <div className="landing-problem-body">
                      <h3>Context switching kills speed</h3>
                      <p>Jumping between the issue, docs, PSA tickets, and knowledge bases fragments focus.</p>
                    </div>
                  </li>
                </ol>
              </div>
            </div>
          </section>

          {/* Equation — typographic moment */}
          <div className="landing-equation-section landing-reveal">
            <div className="landing-equation-inner">
              <div className="landing-section-label">The Answer</div>
              <div className="landing-brand-equation" aria-label="Resolution plus documentation minus time equals ResolutionFlow">
                <div className="landing-eq-lhs">
                  <span className="landing-eq-item">Resolution</span>
                  <span className="landing-eq-operator">+</span>
                  <span className="landing-eq-item">Documentation</span>
                  <span className="landing-eq-operator">&minus;</span>
                  <span className="landing-eq-item">Time</span>
                </div>
                <div className="landing-eq-equals">
                  <span className="landing-eq-operator-equals">=</span>
                </div>
                <div className="landing-eq-result">ResolutionFlow</div>
              </div>
              <p className="landing-equation-desc">
                What if documentation was a <em>byproduct</em> of solving the issue, not a separate task?
              </p>
            </div>
          </div>

          {/* How It Works — zigzag */}
          <section id="how-it-works" className="landing-section landing-reveal landing-section-tight">
            <div className="landing-section-inner">
              <div className="landing-section-label">How It Works</div>
              <h2 className="landing-section-title">Three steps. Zero note-writing.</h2>
            </div>
            <div className="landing-zigzag">
              <div className="landing-zigzag-step">
                <div className="landing-zigzag-text">
                  <div className="landing-zigzag-number">01</div>
                  <h3>Describe the Issue</h3>
                  <p>Type what&apos;s happening, paste an error, or drop a screenshot. FlowPilot understands MSP environments &mdash; AD, Exchange, networking, VPN, you name it.</p>
                </div>
                <div className="landing-zigzag-visual">
                  <div className="landing-mock-input">
                    <span className="landing-mock-input-icon">&#128172;</span>
                    <span>User can&apos;t access shared drive after password reset, getting Access Denied in Event Viewer</span>
                  </div>
                </div>
              </div>
              <div className="landing-zigzag-step reverse">
                <div className="landing-zigzag-text">
                  <div className="landing-zigzag-number">02</div>
                  <h3>Troubleshoot Together</h3>
                  <p>FlowPilot acts like a senior engineer on the call. It suggests next steps, provides commands, and captures every action &mdash; documentation builds itself as you work.</p>
                </div>
                <div className="landing-zigzag-visual">
                  <div className="landing-mock-session compact">
                    <div className="landing-mock-chat-line ai">
                      <span className="label">FlowPilot</span>
                      <span className="text">Is the user on VPN?</span>
                    </div>
                    <div className="landing-mock-chat-line user">
                      <span className="label">You</span>
                      <span className="text">Yes, Cisco AnyConnect</span>
                    </div>
                    <div className="landing-mock-chat-line ai">
                      <span className="label">FlowPilot</span>
                      <span className="text">Check split tunnel config &rarr;</span>
                    </div>
                    <div className="landing-mock-chat-line doc">
                      <span className="label">Auto-doc</span>
                      <span className="text">Step captured &#10003;</span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="landing-zigzag-step">
                <div className="landing-zigzag-text">
                  <div className="landing-zigzag-number">03</div>
                  <h3>Resolve &amp; Document</h3>
                  <p>Hit resolve and get clean, timestamped ticket notes &mdash; ready to paste into ConnectWise, Atera, or Syncro. Every step documented automatically.</p>
                </div>
                <div className="landing-zigzag-visual">
                  <div className="landing-mock-ticket">
                    <div className="landing-mock-ticket-header">ConnectWise Ticket #48291</div>
                    <div className="landing-mock-ticket-line"><span className="time">10:04</span><span className="check">&#10003;</span><span>Verified VPN connection active</span></div>
                    <div className="landing-mock-ticket-line"><span className="time">10:06</span><span className="check">&#10003;</span><span>Split tunnel misconfigured &mdash; fixed</span></div>
                    <div className="landing-mock-ticket-line"><span className="time">10:08</span><span className="check">&#10003;</span><span>Confirmed Outlook sync restored</span></div>
                    <div className="landing-mock-ticket-line"><span className="time">10:09</span><span className="check">&#10003;</span><span>Resolution: VPN split tunnel updated</span></div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Features — editorial spec list */}
          <section id="features" className="landing-section landing-section-alt landing-reveal landing-section-generous">
            <div className="landing-section-inner">
              <div className="landing-section-label">Features</div>
              <h2 className="landing-section-title">Everything you need to troubleshoot faster.</h2>

              <div className="landing-feature-highlight">
                <div className="landing-feature-highlight-marker" aria-hidden="true">FP</div>
                <div className="landing-feature-highlight-content">
                  <h3>FlowPilot, your AI copilot</h3>
                  <p>Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself, as a byproduct of solving the problem.</p>
                </div>
              </div>

              <dl className="landing-feature-spec">
                <div className="landing-feature-row">
                  <dt>Guided Flows</dt>
                  <dd>Build step-by-step troubleshooting paths your team can follow. Great for onboarding and consistency.</dd>
                </div>
                <div className="landing-feature-row">
                  <dt>Zero Empty Tickets</dt>
                  <dd>Every session generates timestamped notes, formatted for your PSA. No more empty ticket closures.</dd>
                </div>
                <div className="landing-feature-row">
                  <dt>Team Knowledge</dt>
                  <dd>Solutions are saved and surfaced when the next engineer hits a similar issue.</dd>
                </div>
                <div className="landing-feature-row">
                  <dt>Session Analytics</dt>
                  <dd>Track resolution times, identify recurring issues, and measure team performance.</dd>
                </div>
                <div className="landing-feature-row">
                  <dt>PSA Integration</dt>
                  <dd>Connect to ConnectWise, Atera, and Syncro. Push session docs straight to tickets.</dd>
                </div>
              </dl>
            </div>
          </section>

          {/* Pricing */}
          <section id="pricing" className="landing-section landing-reveal landing-section-generous">
            <div className="landing-section-inner">
              <div className="landing-section-label">Pricing</div>
              <h2 className="landing-section-title">Simple pricing. No surprises.</h2>
              <p className="landing-section-desc">Start free. Upgrade when your team is ready.</p>
              <div className="landing-pricing-grid">
                <PricingCard
                  name="Free"
                  target="Individual techs evaluating"
                  amount="$0"
                  note="Free forever"
                  features={['3 guided flows', '20 sessions per month', 'Auto-documentation export', '30-day session history']}
                  btnLabel="Get Started"
                  btnStyle="outline"
                  plan="free"
                />
                <PricingCard
                  featured
                  name="Pro"
                  target="Small MSPs &middot; 1&ndash;5 techs"
                  amount="$15"
                  period="/user/mo"
                  note="Billed monthly or annually"
                  features={['Unlimited flows & sessions', 'FlowPilot AI copilot', 'Full session history', 'Flow templates library', 'Priority support']}
                  btnLabel="Start Free Trial"
                  btnStyle="filled"
                  plan="pro"
                />
                <PricingCard
                  name="Team"
                  target="Growing MSPs &middot; 5&ndash;25 techs"
                  amount="$25"
                  period="/user/mo"
                  note="Billed monthly or annually"
                  features={['Everything in Pro', 'PSA integration', 'Team analytics dashboard', 'Session sharing', 'Role-based permissions', 'Dedicated support']}
                  btnLabel="Start Free Trial"
                  btnStyle="outline"
                  plan="team"
                />
              </div>
              <p className="landing-pricing-session-note">One session = one troubleshooting conversation, regardless of length.</p>
              <p className="landing-pricing-enterprise">
                Enterprise (25+ techs, SSO, custom branding)?{' '}
                <a href="mailto:hello@resolutionflow.com">Let&apos;s talk</a>
              </p>
            </div>
          </section>

          {/* FAQ */}
          <section id="faq" className="landing-section landing-section-alt landing-reveal landing-section-tight">
            <div className="landing-section-inner">
              <div className="landing-section-label">FAQ</div>
              <h2 className="landing-section-title">Common questions</h2>
              <div className="landing-faq-list">
                {FAQ_ITEMS.map((item, i) => (
                  <div key={i} className={`landing-faq-item ${openFaq === i ? 'open' : ''}`}>
                    <button
                      className="landing-faq-trigger"
                      onClick={() => toggleFaq(i)}
                      aria-expanded={openFaq === i}
                    >
                      <span>{item.q}</span>
                      <span className="landing-faq-icon" aria-hidden="true">{openFaq === i ? '\u2212' : '+'}</span>
                    </button>
                    <div className="landing-faq-answer" role="region">
                      <p>{item.a}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* Founder — replaces anonymous testimonial */}
          <div className="landing-founder-section landing-reveal">
            <div className="landing-founder-inner">
              <div className="landing-section-label">Why We Built This</div>
              <blockquote>
                After 15 years in the MSP trenches, I got tired of the same cycle: solve the issue in 10 minutes, spend 20 minutes writing notes about it. Or worse &mdash; close the ticket with &ldquo;Fixed issue&rdquo; because there&apos;s no time. ResolutionFlow is the tool I wanted on every call.
              </blockquote>
              <div className="landing-founder-name">&mdash; Michael, Founder</div>
            </div>
          </div>

          {/* CTA — drenched */}
          <section className="landing-cta-section landing-cta-drench landing-reveal">
            <div className="landing-cta-inner">
              <div className="landing-cta-eyebrow">Stop writing ticket notes</div>
              <h2>Troubleshoot your next ticket with FlowPilot.</h2>
              <p>Get early access. Free to start, no credit card.</p>
              <div className="landing-cta-actions">
                <Link to="/register?from=beta" className="landing-btn-cta-invert">Get started</Link>
                <a href="#how-it-works" className="landing-btn-cta-ghost">See how it works</a>
              </div>
            </div>
          </section>

          <MarketingFooter />
        </main>
      </div>
    </>
  )
}


/* ---- Sub-components ---- */

function PricingCard({ name, target, amount, period, note, features, btnLabel, btnStyle, featured, plan }: {
  name: string; target: string; amount: string; period?: string; note: string
  features: string[]; btnLabel: string; btnStyle: 'outline' | 'filled'; featured?: boolean; plan: string
}) {
  return (
    <div className={`landing-pricing-card ${featured ? 'featured' : ''}`}>
      {featured && <div className="landing-pricing-badge">Most Popular</div>}
      <div className="landing-pricing-plan-name">{name}</div>
      <div className="landing-pricing-target">{target}</div>
      <div className="landing-pricing-price">
        <span className="amount">{amount}</span>
        {period && <span className="period">{period}</span>}
      </div>
      <div className="landing-pricing-note">{note}</div>
      <ul className="landing-pricing-features">
        {features.map(f => <li key={f}>{f}</li>)}
      </ul>
      <Link to={`/register?plan=${plan}`} className={`landing-pricing-btn ${btnStyle}`}>{btnLabel}</Link>
    </div>
  )
}