// Pricing + FAQ + Final CTA + Footer

const Pricing = () => {
  const tier = {
    name: 'Standard',
    price: 300,
    features: [
      '18-page diminished value report',
      '8 comparable-sales benchmarks',
      'AutoCheck vehicle history report',
      'Formal demand calculation',
      'Licensed appraiser signature',
      'Cover letter to claims adjuster',
      'PDF delivery in 3 business days',
    ],
  };

  const credentials = [
    { label: 'Methodology', body: 'Backed by case law and 4M+ real vehicle sales.' },
    { label: 'Credentials', body: 'Signed by an ASCAA-certified appraiser.' },
    { label: 'Coverage', body: 'Filed in 44 states + DC.' },
    { label: 'We serve', body: 'Vehicle owners · Lawyers · Insurance companies' },
  ];

  const [quoteIndex, setQuoteIndex] = React.useState(0);

  const quotes = [
    {
      quote: 'My vehicle was hit with damage to the door 2 years ago. Yesterday, we received a $700 diminished value check from the accident. Thank you!',
      author: 'Nick R.',
      meta: '2006 Toyota Avalon · Pennsylvania',
      recovery: '$700',
    },
    {
      quote: 'I almost took the $1,200 the adjuster offered. Deevy\'s report came back showing $4,800. I recovered thousands of dollars extra getting my own appraisal from Deevy.',
      author: 'Priya S.',
      meta: '2020 Honda CR-V · Texas',
      recovery: '$4,800',
    },
    {
      quote: 'My body shop owner sends every customer here now. The reports just work.',
      author: 'Daniel R.',
      meta: 'Referral · Body shop owner',
      recovery: null,
    },
  ];

  return (
    <SectionShell dark id="pricing" screenLabel="07 Pricing" padY={96}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'end', marginBottom: 64 }}>
        <div>
          <Eyebrow color="#378ADD">Pricing</Eyebrow>
          <SerifH size={56} color="#F0F4FA" style={{ marginTop: 20 }}>
            Flat fee. <em style={{ fontStyle: 'italic', color: '#85B7EB' }}>No contingency.</em>
          </SerifH>
        </div>
        <Body color="#85B7EB" size={17}>
          You keep 100% of your recovery. We charge once for the report.
        </Body>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
        {/* Standard tier card */}
        <div style={{
          background: '#F0F4FA',
          color: '#0D1420',
          padding: '44px 40px',
        }}>
          <div>
            <SerifH size={28}>{tier.name}</SerifH>
          </div>

          <div style={{ marginTop: 24, display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{
              fontFamily: '"Source Serif 4", serif',
              fontWeight: 500, fontSize: 64, letterSpacing: '-2px', color: '#0D1420',
              lineHeight: 1,
            }}>
              ${tier.price}
            </span>
            <Mono style={{ fontSize: 12, color: '#3A4A5E', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              · one-time
            </Mono>
          </div>

          <Hair style={{ margin: '12px 0' }} />

          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {tier.features.map((f, i) => (
              <li key={i} style={{
                display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12,
                padding: '10px 0',
                fontFamily: '"Inter", sans-serif', fontSize: 14, color: '#3A4A5E',
              }}>
                <Mono style={{ color: '#185FA5', fontSize: 12, lineHeight: 1.6 }}>+</Mono>
                <span>{f}</span>
              </li>
            ))}
          </ul>

          <a href="Eligibility.html" style={{
            marginTop: 32, width: '100%', padding: '16px',
            background: '#185FA5',
            color: '#fff',
            textDecoration: 'none',
            textAlign: 'center',
            display: 'block',
            boxSizing: 'border-box',
            fontFamily: '"Inter", sans-serif', fontWeight: 500, fontSize: 15,
            cursor: 'pointer', transition: 'background 200ms',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.background = '#0D1420'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = '#185FA5'; }}
          >
            Order standard report →
          </a>
        </div>

        {/* Credentials + testimonial slider (right column) */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          {/* Credentials stack (1 per row, fills available height) */}
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 8, flex: 2,
          }}>
            {credentials.map((c, i) => (
              <div key={i} style={{
                padding: '12px 16px',
                background: 'rgba(255,255,255,0.025)',
                border: '1px solid rgba(133,183,235,0.14)',
                display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 4,
                flex: 1,
              }}>
                <Mono style={{
                  fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#378ADD',
                }}>
                  {c.label}
                </Mono>
                <div style={{
                  fontFamily: '"Source Serif 4", serif',
                  fontSize: 14, lineHeight: 1.3, color: '#F0F4FA',
                }}>
                  {c.body}
                </div>
              </div>
            ))}
          </div>

          {/* Testimonial slider header */}
          <div style={{
            paddingBottom: 8, marginTop: 4,
            borderBottom: '1px solid rgba(133,183,235,0.18)',
          }}>
            <Mono style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#85B7EB' }}>
              From recent claimants
            </Mono>
          </div>

          {/* Testimonial card */}
          <div style={{
            padding: '18px 20px',
            background: 'rgba(255,255,255,0.025)',
            border: '1px solid rgba(133,183,235,0.14)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 14,
            flex: 1,
          }}>
            <div style={{
              fontFamily: '"Source Serif 4", serif',
              fontStyle: 'italic',
              fontSize: 15, lineHeight: 1.45, color: '#F0F4FA',
            }}>
              <span style={{ color: '#85B7EB', fontSize: 20, marginRight: 4, verticalAlign: '-2px' }}>“</span>
              {quotes[quoteIndex].quote}
              <span style={{ color: '#85B7EB', fontSize: 20, marginLeft: 2, verticalAlign: '-2px' }}>”</span>
            </div>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12,
              paddingTop: 10, borderTop: '1px solid rgba(133,183,235,0.14)',
            }}>
              <div>
                <div style={{ fontFamily: '"Inter", sans-serif', fontSize: 13, fontWeight: 500, color: '#F0F4FA' }}>
                  {quotes[quoteIndex].author}
                </div>
                <Mono style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#85B7EB', marginTop: 3 }}>
                  {quotes[quoteIndex].meta}
                </Mono>
              </div>
              {quotes[quoteIndex].recovery && (
                <div style={{ textAlign: 'right' }}>
                  <Mono style={{ fontSize: 8, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#85B7EB' }}>
                    Recovered
                  </Mono>
                  <div style={{
                    fontFamily: '"Source Serif 4", serif', fontWeight: 500, fontSize: 20, color: '#85B7EB',
                    letterSpacing: '-0.5px', lineHeight: 1, marginTop: 3,
                  }}>
                    {quotes[quoteIndex].recovery}
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Slider controls */}
          {quotes.length > 1 && (
            <div style={{
              display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14,
            }}>
              <button
                onClick={() => setQuoteIndex((quoteIndex - 1 + quotes.length) % quotes.length)}
                aria-label="Previous testimonial"
                style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: 'transparent', border: '1px solid rgba(133,183,235,0.35)',
                  color: '#85B7EB', cursor: 'pointer',
                  fontSize: 14, fontFamily: 'inherit',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'all 200ms',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#85B7EB'; e.currentTarget.style.color = '#F0F4FA'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(133,183,235,0.35)'; e.currentTarget.style.color = '#85B7EB'; }}
              >‹</button>
              <div style={{ display: 'flex', gap: 8 }}>
                {quotes.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setQuoteIndex(i)}
                    aria-label={`Show testimonial ${i + 1}`}
                    style={{
                      width: 7, height: 7, borderRadius: '50%',
                      background: i === quoteIndex ? '#85B7EB' : 'rgba(133,183,235,0.3)',
                      border: 'none', cursor: 'pointer', padding: 0,
                      transition: 'background 200ms',
                    }}
                  />
                ))}
              </div>
              <button
                onClick={() => setQuoteIndex((quoteIndex + 1) % quotes.length)}
                aria-label="Next testimonial"
                style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: 'transparent', border: '1px solid rgba(133,183,235,0.35)',
                  color: '#85B7EB', cursor: 'pointer',
                  fontSize: 14, fontFamily: 'inherit',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'all 200ms',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#85B7EB'; e.currentTarget.style.color = '#F0F4FA'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(133,183,235,0.35)'; e.currentTarget.style.color = '#85B7EB'; }}
              >›</button>
            </div>
          )}
        </div>
      </div>

      <div style={{
        marginTop: 56, paddingTop: 24,
        borderTop: '1px solid rgba(219,233,255,0.14)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
      }}>
        <Mono style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#85B7EB' }}>
          Bulk · fleet · attorney rates available
        </Mono>
        <Mono style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#85B7EB' }}>
          info@mydeevy.com
        </Mono>
      </div>
    </SectionShell>
  );
};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: 'Am I eligible to file a diminished value claim?',
      a: 'You likely qualify if another driver was at fault and your vehicle was repaired rather than declared a total loss. Diminished value attaches from the moment your vehicle is damaged, because the resale market discounts accident history regardless of how it is documented. The intake form confirms eligibility and your state\'s rules before any charge.',
    },
    {
      q: 'Whose insurance pays the diminished value claim?',
      a: 'In nearly all cases, the at-fault driver\'s insurance company pays. Diminished value is a third-party property damage claim, meaning we file it against the insurance policy of the driver who caused the accident, not your own. Georgia is the one state where you can also recover diminished value from your own collision policy. In every other state, the claim goes to the at-fault insurer.',
    },
    {
      q: 'How much can I expect to recover?',
      a: 'Diminished value typically ranges from 5 to 25 percent of your vehicle\'s pre-loss market value. The biggest factors are vehicle age, mileage, severity of damage, and whether structural components were affected. Newer vehicles with structural damage see the largest reductions. We deliver a specific dollar figure tied to your vehicle, not a generic range, so you know what to demand before negotiating.',
    },
    {
      q: 'How is Deevy\'s report different from the 17c formula insurers use?',
      a: 'The 17c formula uses a flat 10 percent multiplier with no empirical basis. It traces back to a single 2001 Georgia class-action settlement and was never adopted as a legal standard. The Deevy report measures your specific vehicle against millions of real comparable sales, then anchors the result in U.S. tort law under Restatement (Second) of Torts § 928. It is a documented appraisal, not a formula.',
    },
    {
      q: 'What do I need to submit to start?',
      a: 'Three things: a few details about you and your vehicle, the repair invoice or estimate, and photos of the damage if you have them. Most customers complete intake in under five minutes. We pull vehicle history, comparable sales, and market data on our end.',
    },
    {
      q: 'Will the at-fault insurer actually pay the claim?',
      a: 'Insurers are obligated to pay legitimate property damage owed under tort law, and a defensible appraisal with real comparable sales is significantly harder to ignore than a verbal request. Most adjusters settle once the report is in front of them, especially when the figure is documented and the methodology holds up to review. If the insurer disputes the number, the report is built to support arbitration or an attorney demand.',
    },
    {
      q: 'What if the insurer denies or undervalues my claim?',
      a: 'The Deevy report is built to hold up beyond the initial demand. If the at-fault insurer refuses or lowballs, you can invoke the appraisal clause in most state policies, escalate to arbitration, or hand the report to an attorney experienced in DV recovery. The report remains yours and supports any escalation path.',
    },
    {
      q: 'How long do I have to file a claim?',
      a: 'Most states allow between two and six years from the date of the accident. Sooner is better. Comparable sales data ages, repair documentation becomes harder to retrieve, and adjusters are more receptive within the first six months. If you are uncertain about your state\'s deadline, the intake form confirms it before you commit.',
    },
  ];

  return (
    <SectionShell id="faq" screenLabel="08 FAQ" padY={96}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80, alignItems: 'start' }}>
        <div>
          <Eyebrow>Common questions</Eyebrow>
          <SerifH size={48} style={{ marginTop: 20 }}>
            What people<br />ask first.
          </SerifH>
          <Body size={15} style={{ marginTop: 24 }}>
            Don't see your question? Email{' '}
            <a href="mailto:info@mydeevy.com" style={{ color: '#185FA5', textDecoration: 'underline', textDecorationThickness: 1, textUnderlineOffset: 4 }}>
              info@mydeevy.com
            </a>{' '}
            - a real appraiser will answer.
          </Body>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? '1px solid #0D1420' : '1px solid #DBE9FF',
                borderBottom: i === items.length - 1 ? '1px solid #0D1420' : 'none',
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left',
                    padding: '24px 0',
                    background: 'none', border: 'none', cursor: 'pointer',
                    display: 'grid', gridTemplateColumns: '40px 1fr 24px',
                    gap: 16, alignItems: 'center',
                  }}
                >
                  <Mono style={{ fontSize: 11, letterSpacing: '0.14em', color: '#185FA5' }}>
                    0{i + 1}
                  </Mono>
                  <span style={{
                    fontFamily: '"Source Serif 4", serif',
                    fontWeight: 500, fontSize: 22, letterSpacing: '-0.3px', color: '#0D1420',
                    lineHeight: 1.3,
                  }}>{it.q}</span>
                  <Mono style={{
                    fontSize: 18, color: '#185FA5', textAlign: 'right',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform 200ms ease',
                  }}>+</Mono>
                </button>
                <div style={{
                  display: 'grid',
                  gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows 300ms ease',
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{ padding: '0 0 28px 56px' }}>
                      <Body size={16}>{it.a}</Body>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </SectionShell>
  );
};

const FinalCTA = () => (
  <SectionShell dark id="final-cta" screenLabel="09 Final CTA" padY={96} style={{ paddingBottom: 44 }}>
    <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
      <Eyebrow color="#378ADD">Recover what you're owed</Eyebrow>
      <SerifH size={88} color="#F0F4FA" style={{
        marginTop: 28,
        fontSize: 'clamp(48px, 6.5vw, 96px)',
        lineHeight: 1.0,
      }}>
        The wreck happened.<br />
        <em style={{ fontStyle: 'italic', color: '#85B7EB' }}>Don't let it cost you twice.</em>
      </SerifH>
      <Body color="#85B7EB" size={19} style={{ marginTop: 32, maxWidth: 600, margin: '32px auto 0' }}>
        Eligibility check is free. The report is $300.
      </Body>

      <div style={{ marginTop: 48, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="Eligibility.html" style={{
          background: '#185FA5', color: '#fff',
          padding: '18px 32px',
          fontFamily: '"Inter", sans-serif', fontWeight: 500, fontSize: 15,
          textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          Submit a claim
          <Mono style={{ opacity: 0.7 }}>→</Mono>
        </a>
        <a href="Eligibility.html" style={{
          background: 'transparent', color: '#F0F4FA',
          padding: '18px 32px',
          border: '1px solid rgba(219,233,255,0.3)',
          fontFamily: '"Inter", sans-serif', fontWeight: 500, fontSize: 15,
          textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          Check my state eligibility
        </a>
      </div>

      <div style={{
        marginTop: 80, paddingTop: 44,
        borderTop: '1px solid rgba(219,233,255,0.14)',
        display: 'flex', justifyContent: 'center', gap: 48, flexWrap: 'wrap',
      }}>
        {[
          ['Free eligibility check', 'No commitment'],
          ['3 business days', 'Standard delivery'],
          ['100% yours', 'No contingency fee'],
        ].map(([k, v]) => (
          <div key={v} style={{ textAlign: 'center' }}>
            <Mono style={{
              fontSize: 16, color: '#F0F4FA', fontWeight: 500, letterSpacing: '-0.3px',
            }}>{k}</Mono>
            <div style={{
              fontFamily: '"IBM Plex Mono", monospace', fontSize: 10,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: '#85B7EB', marginTop: 6,
            }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  </SectionShell>
);

const Footer = () => (
  <footer id="contact" style={{
    background: '#0D1420',
    backgroundImage: plusPatternBg({ density: 28, opacity: 0.4 }),
    borderTop: '1px solid rgba(219,233,255,0.1)',
    padding: '64px 0 32px',
    color: '#85B7EB',
    fontFamily: '"Inter", sans-serif',
  }}>
    <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 64 }}>
        <div>
          <div style={{
            display: 'flex', alignItems: 'baseline',
            fontFamily: '"Source Serif 4", serif',
            fontWeight: 500, fontSize: 36, color: '#F0F4FA',
            letterSpacing: '-0.4px',
          }}>
            Deevy
            <svg viewBox="0 0 22 11" aria-hidden="true" style={{ width: '0.73em', height: '0.36em', marginLeft: '0.32em', marginBottom: '0.18em', fill: '#378ADD', flexShrink: 0 }}>
              <circle cx="5.5" cy="9" r="1.4" />
              <circle cx="16.5" cy="9" r="1.4" />
              <path d="M 1 7.8 C 1 6.8 1.8 6.3 3 6.3 L 4.2 6.3 Q 5 4.2 7 3.7 L 14 3.7 Q 16 4.2 17.3 5.7 L 18.8 6.3 C 20 6.3 21 6.8 21 7.8 L 21 8.5 L 1 8.5 Z" />
            </svg>
          </div>
          <Mono style={{
            fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: '#378ADD', marginTop: 4, display: 'block',
          }}>The diminished value authority</Mono>
          <Body color="#85B7EB" size={14} style={{ marginTop: 24, maxWidth: 320 }}>
            The most comprehensive diminished value report on the market, analyzing millions of real vehicle sales, accident histories, and repair records.
          </Body>
        </div>

        {[
          ['Service', [['How it works', '#how-it-works'], ['Coverage', '#map'], ['Pricing', '#pricing'], ['Eligibility check', '#hero']]],
          ['Knowledge', ['Am I eligible?', 'How much can I recover?', 'What do I need to submit?', 'How long do I have to file?'], '#faq'],
          ['Contact', ['info@mydeevy.com', 'St. Petersburg, FL']],
        ].map(([title, links, href]) => (
          <div key={title}>
            <Mono style={{
              fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: '#F0F4FA', marginBottom: 20, display: 'block',
            }}>{title}</Mono>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {links.map((l) => {
                const [label, lhref] = Array.isArray(l) ? l : [l, href];
                return (
                  <li key={label} style={{ padding: '6px 0' }}>
                    <a href={lhref || '#'} style={{ color: '#85B7EB', textDecoration: 'none', fontSize: 14 }}>{label}</a>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </div>

      <div style={{
        paddingTop: 32, borderTop: '1px solid rgba(219,233,255,0.12)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
      }}>
        <Mono style={{ fontSize: 11, letterSpacing: '0.14em', color: '#85B7EB' }}>
          © 2026 Deevy · All rights reserved
        </Mono>
        <div style={{ display: 'flex', gap: 24 }}>
          {[['Privacy', 'Privacy.html'], ['Terms', 'Terms.html']].map(([l, href]) => (
            <a key={l} href={href} style={{
              fontFamily: '"IBM Plex Mono", monospace',
              fontSize: 11, letterSpacing: '0.14em',
              color: '#85B7EB', textDecoration: 'none',
            }}>{l}</a>
          ))}
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Pricing, FAQ, FinalCTA, Footer });
