/* Pricing, FAQ, FinalCTA, Footer */
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

/* ------------------------------------------------------------------ PRICING */
function Pricing({ onJoin }) {
  const plans = [
  {
    name: 'Starter', price: '$49', cadence: '/month',
    vol: '15 proposals / month',
    features: [
    'Proposal micro-site',
    'Section-level tracking',
    'Email pulse engine',
    'Basic analytics',
    '14-day free trial']

  },
  {
    name: 'Growth', price: '$99', cadence: '/month',
    vol: '50 proposals / month',
    featured: true,
    features: [
    'Everything in Starter',
    'AI proposal companion',
    'Advanced analytics',
    '1 CRM integration',
    'Custom domain',
    'Priority email support']

  },
  {
    name: 'Agency', price: '$199', cadence: '/month',
    vol: 'Unlimited proposals',
    features: [
    'Everything in Growth',
    '5 team seats',
    'All integrations (HubSpot, Pipedrive, Slack, Zapier)',
    'Template library',
    'Priority support']

  }];


  return (
    <Section id="pricing">
      <SectionHeader
        eyebrow="Pricing"
        body="Early access pricing — locked for life for waitlist members.">
        
        One recovered deal pays for<br />a year of ProposalPulse
      </SectionHeader>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 14, alignItems: 'stretch'
      }}>
        {plans.map((p) =>
        <div key={p.name} style={{
          position: 'relative',
          padding: '32px 28px 30px',
          background: p.featured ? 'rgba(229,83,60,0.07)' : PP.surface,
          border: '1px solid ' + (p.featured ? 'rgba(229,83,60,0.45)' : PP.border),
          borderRadius: 16,
          display: 'flex', flexDirection: 'column', gap: 22,
          boxShadow: p.featured ? '0 20px 60px -30px rgba(229,83,60,0.6)' : 'none'
        }}>
            {p.featured &&
          <div style={{
            position: 'absolute', top: -13, left: '50%',
            transform: 'translateX(-50%)',
            padding: '5px 14px', borderRadius: 999,
            background: PP.accent, color: '#fff',
            fontFamily: PP.mono, fontSize: 10.5, letterSpacing: '1.4px',
            textTransform: 'uppercase', fontWeight: 500,
            whiteSpace: 'nowrap',
            boxShadow: '0 8px 24px -8px rgba(229,83,60,0.7)'
          }}>Most popular</div>
          }

            <div>
              <div style={{
              fontFamily: PP.mono, fontSize: 11, letterSpacing: '1.4px',
              color: p.featured ? PP.accentHi : 'rgba(14,14,12,0.5)',
              textTransform: 'uppercase'
            }}>{p.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 14 }}>
                <span style={{
                fontFamily: PP.serif, fontStyle: 'italic', fontWeight: 'var(--pp-serif-weight, 400)',
                fontSize: 44, color: PP.text, letterSpacing: '-1.2px', lineHeight: 1
              }}>{p.price}</span>
                <span style={{ fontFamily: PP.sans, fontSize: 13, color: 'rgba(14,14,12,0.5)' }}>{p.cadence}</span>
              </div>
              <div style={{
              marginTop: 8, fontFamily: PP.sans, fontSize: 13,
              color: 'rgba(14,14,12,0.62)'
            }}>{p.vol}</div>
            </div>

            <div style={{ height: 1, background: PP.border, margin: '0 -28px' }} />

            <ul style={{
            margin: 0, padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 11,
            flex: 1
          }}>
              {p.features.map((f) =>
            <li key={f} style={{
              display: 'flex', alignItems: 'flex-start', gap: 11,
              fontFamily: PP.sans, fontSize: 13.5, color: 'rgba(14,14,12,0.72)',
              lineHeight: 1.5
            }}>
                  <span style={{
                flex: '0 0 16px', height: 16, borderRadius: 999,
                background: 'rgba(31,138,91,0.13)',
                border: '1px solid rgba(31,138,91,0.35)',
                display: 'grid', placeItems: 'center',
                color: PP.green, fontSize: 10, fontWeight: 600,
                marginTop: 2
              }}>✓</span>
                  {f}
                </li>
            )}
            </ul>

            <button onClick={onJoin} className="pp-btn-primary" style={{
            width: '100%', padding: '12px 16px', borderRadius: 10,
            background: p.featured ? PP.accent : 'rgba(14,14,12,0.06)',
            border: p.featured ? '0' : '1px solid ' + PP.border,
            color: p.featured ? '#fff' : PP.text,
            fontFamily: PP.sans, fontSize: 14, fontWeight: 500,
            boxShadow: p.featured ? '0 8px 24px -8px rgba(229,83,60,0.7)' : 'none',
            transition: 'transform .2s ease, background .2s ease'
          }}>Join waitlist for {p.name}</button>
          </div>
        )}
      </div>

      <div style={{
        marginTop: 28, textAlign: 'center',
        fontFamily: PP.mono, fontSize: 11, letterSpacing: '1.2px',
        color: 'rgba(14,14,12,0.4)', textTransform: 'uppercase'
      }}>
        No credit card required · 14-day free trial · Annual billing saves 20%
      </div>
    </Section>);

}

/* ---------------------------------------------------------------------- FAQ */
function FAQ() {
  const items = [
  {
    q: 'How is ProposalPulse different from Qwilr, GetAccept, or PandaDoc?',
    a: 'Those tools help you create and design proposals. ProposalPulse is built for what happens after you send — tracking prospect behavior in granular detail, answering their questions instantly with AI, and re-engaging silence with anonymous micro-commitment interactions. No competitor combines all three in one product built specifically for software agencies. Qwilr is design-forward and creation-focused. GetAccept has live chat but it is a generic sales tool, not an AI trained on your specific proposal. PandaDoc is document management. ProposalPulse is proposal intelligence.'
  },
  {
    q: 'Does the prospect know they are being tracked?',
    a: 'Section tracking is disclosed in the proposal footer as standard practice — the same way email marketing tools disclose open tracking. Most business buyers accept this as normal today. The AI companion is clearly branded as an AI assistant, not a human. The pulse re-engagement is anonymous and single-question — the prospect is never pressured or identified. We are not building surveillance software. We are giving agencies the information they need to have better conversations.'
  },
  {
    q: 'What file types can I import and what are the limits?',
    a: 'ProposalPulse accepts PDF and DOCX (Microsoft Word) files up to 20MB. The AI extraction pipeline identifies section headings and their hierarchy, maps content to the correct block types, extracts lists, pricing tables, team members, and FAQ pairs as structured data, and assigns a confidence score from 0 to 100 to each extracted block. Blocks scored above 80 are marked as Auto-detected in green. Blocks below 80 are flagged for review in amber. Nothing is discarded — unrecognized sections go into a Custom Text block so you can format them manually.'
  },
  {
    q: 'How does the AI companion get trained on my proposal?',
    a: "The AI companion does not require training or fine-tuning. Before each chat session, your complete proposal content is loaded into the AI model\u2019s context window as a system prompt. The model reads your scope, pricing, team details, timeline, and FAQ content, then responds as a knowledgeable representative of your agency. This is called in-context learning. It requires no setup time, no data sharing between agencies, and no ongoing maintenance. The AI only knows what is in your proposal — it cannot speculate or make things up about your company beyond what is written there."
  },
  {
    q: 'Is my proposal data private? Can competitors see my pricing?',
    a: 'Yes, completely private. Every agency account has strict data isolation. Your proposal content, prospect engagement data, and AI conversation logs are never visible to other agencies or users. The AI sessions are stateless — no information from one agency\u2019s proposal is retained or accessible in another. All data is encrypted in transit and at rest, and we follow GDPR guidelines for prospect data anonymisation.'
  },
  {
    q: 'What CRM integrations are available?',
    a: 'Phase 1 (current build) includes a Slack integration for real-time notifications. Phase 2 adds native integrations for HubSpot, Pipedrive, Gmail, Outlook, and Zapier for custom automation. Phase 3 adds Salesforce and DocuSign. All integrations are included in the Agency and Growth plans. Starter plan includes Slack only.'
  },
  {
    q: 'How many pulses can be sent per proposal and can I customise the questions?',
    a: 'Up to three pulse emails can be sent per proposal lifecycle, spaced at configurable intervals. Default sequence: Pulse 1 at 5 days (Is this project still on your radar?), Pulse 2 at 14 days (Was our pricing in the right ballpark?), Pulse 3 at 28 days (What is the main factor holding the decision back?). All questions are fully customisable. You can also trigger a manual pulse at any time from the proposal detail view with a question you write yourself.'
  },
  {
    q: 'When does early access open?',
    a: 'We are targeting Q3 2026 for the soft launch with a limited cohort of early access agencies. Waitlist members are admitted first. Early access members get their signup pricing locked for life, a personal onboarding call with the founding team, and direct input into the product roadmap.'
  }];

  const [open, setOpen] = useStateB(0);
  return (
    <Section id="faq" style={{ maxWidth: 880 }}>
      <SectionHeader eyebrow="FAQ">Questions we get asked</SectionHeader>

      <div style={{
        border: '1px solid ' + PP.border,
        borderRadius: 16,
        background: PP.surface,
        overflow: 'hidden'
      }}>
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{
              borderTop: i ? '1px solid ' + PP.border : 'none'
            }}>
              <button
                aria-expanded={isOpen}
                onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: '100%', textAlign: 'left',
                  padding: '22px 26px',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 18,
                  fontFamily: PP.sans, fontSize: 15.5, fontWeight: 500,
                  color: isOpen ? PP.text : 'rgba(14,14,12,0.78)'
                }}>
                
                <span style={{ flex: 1 }}>{it.q}</span>
                <span aria-hidden style={{
                  flex: '0 0 28px', width: 28, height: 28, borderRadius: 999,
                  border: '1px solid ' + (isOpen ? 'rgba(229,83,60,0.45)' : PP.border),
                  display: 'grid', placeItems: 'center',
                  color: isOpen ? PP.accentHi : 'rgba(14,14,12,0.6)',
                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                  transition: 'transform .25s ease, color .25s ease, border-color .25s ease',
                  fontSize: 16, lineHeight: 1
                }}>+</span>
              </button>
              <div style={{
                maxHeight: isOpen ? 400 : 0,
                opacity: isOpen ? 1 : 0,
                overflow: 'hidden',
                transition: 'max-height .35s ease, opacity .35s ease'
              }}>
                <div style={{
                  padding: '0 26px 26px',
                  fontFamily: PP.sans, fontSize: 14.5, lineHeight: 1.7,
                  color: 'rgba(14,14,12,0.62)', maxWidth: 700,
                  textWrap: 'pretty'
                }}>{it.a}</div>
              </div>
            </div>);

        })}
      </div>
    </Section>);

}

/* ----------------------------------------------------------------- FINAL CTA */
function FinalCTA({ shared, onJoined }) {
  return (
    <section id="waitlist" data-screen-label="11 Waitlist" style={{
      position: 'relative', padding: '140px 32px',
      overflow: 'hidden'
    }} data-reveal="finalcta">
      <div aria-hidden style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
        width: 1100, height: 700,
        background: 'radial-gradient(ellipse at center, rgba(229,83,60,0.22) 0%, transparent 65%)',
        pointerEvents: 'none'
      }} />
      <div style={{
        position: 'relative', maxWidth: 720, margin: '0 auto',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center', gap: 50
      }}>
        <PulsePill>Early access open now</PulsePill>
        <h2 style={{
          margin: 0, fontFamily: PP.serif, fontStyle: 'italic',
          fontWeight: 'var(--pp-serif-weight, 400)', fontSize: 'clamp(36px, 5.2vw, 64px)',
          lineHeight: 1.22, letterSpacing: '-1.2px', color: PP.text,
          textWrap: 'balance', paddingBottom: '0.1em'
        }}>
          Stop losing deals<br />
          <span style={{
            background: 'linear-gradient(100deg, #0E0E0C 10%, #E5533C 95%)',
            WebkitBackgroundClip: 'text', backgroundClip: 'text',
            WebkitTextFillColor: 'transparent', color: 'transparent'
          }}>to silence</span>
        </h2>
        <p style={{
          margin: 0, maxWidth: 560,
          fontFamily: PP.sans, fontSize: 16.5, lineHeight: 1.7,
          color: 'rgba(14,14,12,0.6)', textWrap: 'pretty'
        }}>
          Join {shared.count} agency owners on the waitlist. Early access members get
          their pricing locked for life, a personal onboarding session with the
          founding team, and direct input into the product roadmap.
        </p>
        <WaitlistForm shared={shared} onJoined={onJoined} />
        <div style={{
          fontFamily: PP.mono, fontSize: 11, letterSpacing: '1.2px',
          color: 'rgba(14,14,12,0.38)', textTransform: 'uppercase'
        }}>No spam · No credit card · Unsubscribe anytime · Pricing locked at signup</div>
      </div>
    </section>);

}

/* --------------------------------------------------------------------- FOOTER */
function Footer() {
  const links = [
  { label: 'Privacy Policy', href: '#' },
  { label: 'Terms of Service', href: '#' },
  { label: 'Contact Us', href: '#' },
  { label: 'Blog', href: '#' }];

  return (
    <footer style={{
      borderTop: '1px solid rgba(14,14,12,0.1)',
      padding: '40px 32px 44px'
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'minmax(220px,1fr) auto minmax(220px,1fr)',
        alignItems: 'start', gap: 32
      }}>
        <div>
          <div style={{
            fontFamily: PP.serif, fontStyle: 'italic', fontSize: 20,
            color: PP.text, letterSpacing: '-0.2px',
            fontWeight: 'var(--pp-serif-weight, 400)'
          }}>
            Proposal<span style={{ color: PP.accentHi }}>Pulse</span>
          </div>
          <div style={{
            marginTop: 8, fontFamily: PP.sans, fontSize: 12.5,
            color: 'rgba(14,14,12,0.52)', maxWidth: 280, lineHeight: 1.55
          }}>
            The proposal intelligence platform for software agencies.
          </div>
        </div>
        <div style={{
          fontFamily: PP.mono, fontSize: 11, letterSpacing: '1px',
          color: 'rgba(14,14,12,0.42)', textTransform: 'uppercase',
          textAlign: 'center', alignSelf: 'center'
        }}>© 2026 · ALL RIGHTS RESERVED</div>
        <div style={{ justifySelf: 'end', display: 'flex', flexWrap: 'wrap', gap: '10px 22px', alignSelf: 'center' }}>
          {links.map((l) =>
          <a key={l.label} href={l.href}
          className="pp-foot-link"
          style={{
            fontFamily: PP.sans, fontSize: 12.5,
            color: 'rgba(14,14,12,0.5)',
            transition: 'color .15s ease',
            whiteSpace: 'nowrap'
          }}>{l.label}</a>
          )}
        </div>
      </div>
    </footer>);

}

window.Pricing = Pricing;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;