// Top nav + Hero

const Nav = ({ showSampleReport = true }) => (
  <nav style={{
    position: 'fixed',
    top: 0, left: 0, right: 0, zIndex: 100,
    fontFamily: '"Inter", system-ui, sans-serif',
    background: 'rgba(13, 20, 32, 0.78)',
    backdropFilter: 'blur(16px) saturate(140%)',
    WebkitBackdropFilter: 'blur(16px) saturate(140%)',
    borderBottom: '1px solid rgba(133, 183, 235, 0.14)',
    boxShadow: '0 1px 0 rgba(133, 183, 235, 0.04), 0 12px 40px -20px rgba(0, 0, 0, 0.6)',
  }}>
    {/* Hairline accent bar at top */}
    <div style={{
      height: 2,
      background: 'linear-gradient(90deg, transparent 0%, rgba(133,183,235,0.0) 8%, #185FA5 22%, #85B7EB 50%, #185FA5 78%, rgba(133,183,235,0.0) 92%, transparent 100%)',
      opacity: 0.55,
    }} />
    <div style={{
      maxWidth: 1240,
      margin: '0 auto',
      padding: '14px 40px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 24,
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline',
        fontFamily: '"Source Serif 4", serif',
        fontWeight: 500,
        fontSize: 20,
        letterSpacing: '-0.4px',
        color: '#F0F4FA',
      }}>
        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>
      <div style={{ display: 'flex', alignItems: 'center', gap: 22, fontSize: 12.5, color: '#DBE9FF', whiteSpace: 'nowrap' }}>
        {[
          ["What You're Owed", '#three-things'],
          ['How it works', '#how-it-works'],
          ['What is DV', '#formula'],
          ['Availability', '#map'],
          ...(showSampleReport
            ? [['Sample report', '#sample-report'], ['Pricing', '#pricing']]
            : [['Contents & Pricing', '#pricing']]),
          ['FAQ', '#faq'],
          ['Contact', '#contact'],
        ].map(([label, href]) => (
          <a key={label} href={href} style={{
            color: 'inherit', textDecoration: 'none', opacity: 0.82,
            transition: 'opacity 0.15s',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
          onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.82'; }}
          >{label}</a>
        ))}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 4 }}>
          <a href="Eligibility.html" style={{
            color: '#F0F4FA',
            background: 'transparent',
            border: '1px solid rgba(219,233,255,0.3)',
            textDecoration: 'none',
            padding: '7px 14px',
            fontSize: 12.5,
            fontWeight: 500,
            borderRadius: 2,
          }}>Check Eligibility</a>
          <a href="Eligibility.html" style={{
            color: '#fff',
            background: '#185FA5',
            textDecoration: 'none',
            padding: '8px 14px',
            fontSize: 12.5,
            fontWeight: 500,
            borderRadius: 2,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
          }}>
            Submit Your Claim
            <span style={{ fontFamily: '"IBM Plex Mono", monospace', opacity: 0.7 }}>→</span>
          </a>
        </div>
      </div>
    </div>
  </nav>
);

const STATES = window.STATE_CODES;

// Hard knockouts (no viable third-party DV claim) - derived from the ruleset
const INELIGIBLE_STATES = window.DV_KNOCKOUT_STATES;

const EligibilityForm = () => {
  const [state, setState] = React.useState('');
  const [date, setDate] = React.useState('');
  const [hover, setHover] = React.useState(false);

  const ineligible = state && INELIGIBLE_STATES.includes(state);
  const rule = state ? window.STATE_RULES[state] : null;
  const solYears = (rule && rule.sol_years) || 3;

  // Date validity: must be within the state's statute of limitations
  const dateValid = (() => {
    if (!date || !state) return false;
    const d = new Date(date);
    if (isNaN(d.getTime())) return false;
    const cutoff = new Date();
    cutoff.setFullYear(cutoff.getFullYear() - solYears);
    return d >= cutoff && d <= new Date();
  })();
  const dateExpired = date && !dateValid;

  // States that require an in-state licensed appraiser - not yet supported (coming soon)
  const comingSoon = !!(rule && rule.licensed_appraiser_required);

  // Any condition that should block navigation to the claim flow
  const blockNav = ineligible || dateExpired || comingSoon;

  const eligible = state && !ineligible && !comingSoon && dateValid;
  const status = !state ? 'empty'
               : ineligible ? 'no-state'
               : comingSoon ? 'coming-soon'
               : !date ? 'empty'
               : dateExpired ? 'no-date'
               : 'yes';

  // Build href for next page with carry-over params
  const params = new URLSearchParams();
  if (state) params.set('state', state);
  if (date) params.set('date', date);
  const nextHref = `Eligibility.html${params.toString() ? '?' + params.toString() : ''}`;

  const fieldStyle = {
    width: '100%',
    padding: '14px 14px',
    fontFamily: '"Inter", system-ui, sans-serif',
    fontSize: 14,
    color: '#0D1420',
    background: '#fff',
    border: '1px solid #DBE9FF',
    borderRadius: 0,
    outline: 'none',
    boxSizing: 'border-box',
  };
  const labelStyle = {
    fontFamily: '"IBM Plex Mono", monospace',
    fontSize: 11,
    fontWeight: 500,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    color: '#0D1420',
    marginBottom: 8,
    display: 'block',
  };

  // Status panel - color shifts based on state
  const statusBg = status === 'yes' ? '#E6F4EA'
                 : status === 'coming-soon' ? '#FBF0DD'
                 : status === 'no-state' || status === 'no-date'  ? '#FCE8E6'
                 : '#F0F4FA';
  const statusBorder = status === 'yes' ? '#1E7E34'
                     : status === 'coming-soon' ? '#B26A00'
                     : status === 'no-state' || status === 'no-date'  ? '#C62828'
                     : '#185FA5';
  const statusText = status === 'yes' ? '#1E7E34'
                   : status === 'coming-soon' ? '#8A5200'
                   : status === 'no-state' || status === 'no-date'  ? '#C62828'
                   : '#185FA5';

  return (
    <div style={{
      background: '#F0F4FA',
      borderLeft: `2px solid ${statusBorder}`,
      padding: '36px 36px 32px',
      fontFamily: '"Inter", system-ui, sans-serif',
      boxShadow: '0 30px 60px -30px rgba(0,0,0,0.5)',
      transition: 'border-color 400ms ease',
    }}>
      <Eyebrow color="#0D1420" style={{ transition: 'color 400ms ease' }}>
        Check your eligibility
      </Eyebrow>
      <SerifH size={32} style={{ marginTop: 12, marginBottom: 4 }}>
        Free in 60 seconds.
      </SerifH>
      <Body size={14} style={{ color: '#3A4A5E', marginBottom: 24 }}>
        No card, no commitment. Eligibility check only.
      </Body>

      <div style={{ marginBottom: 18 }}>
        <label style={labelStyle}>State of accident</label>
        <select value={state} onChange={(e) => setState(e.target.value)} style={fieldStyle}>
          <option value="">Select state…</option>
          {STATES.map((s) => <option key={s} value={s}>{s}</option>)}
        </select>
      </div>
      <div style={{ marginBottom: 18 }}>
        <label style={labelStyle}>Date of accident</label>
        <input type="date" value={date} max={new Date().toISOString().slice(0, 10)} onChange={(e) => {
          const today = new Date().toISOString().slice(0, 10);
          setDate(e.target.value && e.target.value > today ? today : e.target.value);
        }} style={fieldStyle} />
        <a
          href={nextHref}
          aria-disabled={blockNav}
          onClick={(e) => { if (blockNav) e.preventDefault(); }}
          style={{
            marginTop: 18,
            width: '100%',
            padding: '20px 16px',
            background: (blockNav) ? '#7FA8DC' : '#5E92CE',
            color: '#fff',
            border: 'none',
            fontFamily: '"Inter", system-ui, sans-serif',
            fontWeight: 600,
            fontSize: 16,
            letterSpacing: '-0.1px',
            cursor: (blockNav) ? 'not-allowed' : 'pointer',
            opacity: (blockNav) ? 0.6 : 1,
            textDecoration: 'none',
            boxSizing: 'border-box',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 12,
            transition: 'all 200ms ease',
          }}
        >
          Continue Eligibility Check
          <span style={{ fontFamily: '"IBM Plex Mono", monospace', opacity: 0.7 }}>→</span>
        </a>
      </div>

      {/* Auto status panel */}
      {status !== 'empty' && (
      <div
        key={status}
        style={{
          background: statusBg,
          padding: '18px 18px',
          marginBottom: 16,
          borderLeft: `3px solid ${statusBorder}`,
          transition: 'all 400ms ease',
          animation: 'status-slide-in 500ms cubic-bezier(0.2, 0.7, 0.2, 1)',
        }}
      >
        {status === 'yes' && (
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: '"Inter", system-ui, sans-serif',
              fontWeight: 600, fontSize: 15, color: statusText,
            }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%',
                background: statusText, color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700,
                animation: 'check-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1)',
              }}>✓</span>
              Your state accepts diminished value
            </div>
            <div style={{
              marginTop: 6, fontSize: 12.5, color: '#3A4A5E',
            }}>
              {state} recognizes 3rd-party diminished value claims. Median recovery: <Mono style={{ color: '#0D1420', fontWeight: 500 }}>$3,200–$6,800</Mono>.
            </div>
          </div>
        )}
        {status === 'no-state' && (
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: '"Inter", system-ui, sans-serif',
              fontWeight: 600, fontSize: 15, color: statusText,
            }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%',
                background: statusText, color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700,
              }}>!</span>
              {state} does not recognize diminished value
            </div>
            <div style={{
              marginTop: 6, fontSize: 12.5, color: '#3A4A5E',
            }}>
              {rule && rule.knockout_rule ? rule.knockout_rule : `${rule ? rule.name : 'This state'} bars 3rd-party DV claims.`} We can't help with this claim - sorry.
            </div>
          </div>
        )}
        {status === 'coming-soon' && (
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: '"Inter", system-ui, sans-serif',
              fontWeight: 600, fontSize: 15, color: statusText,
            }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%',
                background: statusText, color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700,
              }}>★</span>
              {rule ? rule.name : 'Your state'} is coming soon
            </div>
            <div style={{
              marginTop: 6, fontSize: 12.5, color: '#3A4A5E',
            }}>
              {rule ? rule.name : 'This state'} requires a licensed in-state appraiser to sign DV reports. We're onboarding appraisers there now - leave it with us and we'll be ready soon.
            </div>
          </div>
        )}
        {status === 'no-date' && (
          <div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: '"Inter", system-ui, sans-serif',
              fontWeight: 600, fontSize: 15, color: statusText,
            }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%',
                background: statusText, color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700,
              }}>!</span>
              Accident date is outside the {solYears}-year window
            </div>
            <div style={{
              marginTop: 6, fontSize: 12.5, color: '#3A4A5E',
            }}>
              {rule ? rule.name : 'This state'} bars DV claims more than {solYears} {solYears === 1 ? 'year' : 'years'} after the loss. We can't help with this claim - sorry.
            </div>
          </div>
        )}
      </div>
      )}

      <a
        href={nextHref}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        aria-disabled={blockNav}
        onClick={(e) => { if (blockNav) e.preventDefault(); }}
        style={{
          width: '100%',
          padding: '20px 16px',
          background: (blockNav) ? '#85B7EB' : (hover ? '#0D1420' : '#185FA5'),
          color: '#fff',
          border: 'none',
          fontFamily: '"Inter", system-ui, sans-serif',
          fontWeight: 600,
          fontSize: 16,
          letterSpacing: '-0.1px',
          cursor: (blockNav) ? 'not-allowed' : 'pointer',
          opacity: (blockNav) ? 0.6 : 1,
          transition: 'background 200ms ease, opacity 300ms ease, transform 150ms ease',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 12,
          textDecoration: 'none',
          boxSizing: 'border-box',
          boxShadow: eligible ? '0 8px 24px -8px rgba(24, 95, 165, 0.6)' : 'none',
          transform: hover && eligible ? 'translateY(-1px)' : 'none',
        }}
      >
        Start a Claim
        <span style={{ fontFamily: '"IBM Plex Mono", monospace', opacity: 0.7 }}>→</span>
      </a>

      <div style={{
        marginTop: 18, paddingTop: 18, borderTop: '1px solid #DBE9FF',
        display: 'flex', gap: 18,
        fontFamily: '"IBM Plex Mono", monospace', fontSize: 10,
        letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3A4A5E',
      }}>
        <span>· Licensed appraisers</span>
        <span>· No obligation</span>
      </div>
    </div>
  );
};

const Hero = ({ showSampleReport = true }) => (
  <SectionShell dark padY={0} id="hero" screenLabel="01 Hero" style={{ display: 'flex', alignItems: 'center', paddingTop: 110, paddingBottom: 56 }}>
    <Nav showSampleReport={showSampleReport} />
    <div style={{
      display: 'grid',
      gridTemplateColumns: '1fr 420px',
      gap: 80,
      alignItems: 'center',
      width: '100%',
    }}>
      {/* LEFT */}
      <div>
        <Eyebrow color="#378ADD">The diminished value authority</Eyebrow>
        <SerifH
          as="h1"
          size={60}
          color="#F0F4FA"
          style={{ marginTop: 20, fontSize: 'clamp(34px, 4.4vw, 60px)', lineHeight: 1.1 }}
        >
          Your vehicle was hit. What are you{' '}
          <span style={{ fontStyle: 'italic', color: '#85B7EB' }}>owed</span>?
          <span className="headline-cursor"></span>
        </SerifH>
        <Body color="#85B7EB" size={17} style={{ marginTop: 24, maxWidth: 520 }}>
          After an accident, your car is worth less even after repairs. Our diminished value appraisals use millions of data points to prove what you're legally owed.
        </Body>

        {/* Authority bar */}
        <div style={{
          marginTop: 32,
          paddingTop: 22,
          borderTop: '1px solid rgba(219,233,255,0.14)',
          display: 'flex',
          gap: 40,
          flexWrap: 'wrap',
        }}>
          {[
            { k: '3 days', v: 'Turnaround', anim: { to: 3, suffix: ' days' } },
            { k: '44', v: 'States covered', anim: { to: 44 } },
            { k: '4M+', v: 'Sales analyzed', anim: { to: 4, suffix: 'M+' } },
            { k: '75+ years', v: 'Case law foundation', anim: { to: 75, suffix: '+ years' } },
          ].map(({ k, v, anim }) => (
            <div key={v}>
              <Mono style={{
                fontSize: 20, color: '#F0F4FA', fontWeight: 500,
                letterSpacing: '-0.5px',
              }}>
                <CountUp {...anim} />
              </Mono>
              <div style={{
                marginTop: 4,
                fontFamily: '"IBM Plex Mono", monospace',
                fontSize: 10,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: '#85B7EB',
              }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* RIGHT - form */}
      <div>
        <EligibilityForm />
      </div>
    </div>
  </SectionShell>
);

Object.assign(window, { Hero, EligibilityForm, Nav, STATES });