// Hero section: nav, headline, qualifying picture card, trust strip.

const { useEffect: heroUseEffect, useState: heroUseState, useRef: heroUseRef } = React;

// useCountUp: ticks a number from 0 to target over `duration` ms with ease-out.
// Triggers when the element scrolls into view (once).
function useCountUp(target, duration = 900, delay = 0) {
  const [val, setVal] = heroUseState(0);
  const ref = heroUseRef(null);
  const started = heroUseRef(false);

  heroUseEffect(() => {
    if (!ref.current || started.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now() + delay;
          const tick = (now) => {
            const t = Math.max(0, Math.min(1, (now - start) / duration));
            const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
            setVal(target * eased);
            if (t < 1) requestAnimationFrame(tick);
            else setVal(target);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [target, duration, delay]);

  return [val, ref];
}

function formatCurrency(n) {
  return '$' + Math.round(n).toLocaleString('en-US');
}

function formatCompact(n) {
  if (n >= 1_000_000) {
    const v = n / 1_000_000;
    return '$' + (v >= 10 ? v.toFixed(1).replace(/\.0$/, '') : v.toFixed(1)) + 'M';
  }
  return '$' + Math.round(n / 1000) + 'K';
}

const Counter = ({ value, format = formatCurrency, duration = 900, delay = 0, prefix = '', as = 'span' }) => {
  const [n, ref] = useCountUp(value, duration, delay);
  const Tag = as;
  return <Tag ref={ref}>{prefix}{format(n)}</Tag>;
};

const Nav = ({ accentName }) =>
<nav className="nav">
    <div className="container nav-inner">
      <a href="#" className="brand">
        <img src="favicon.svg" className="brand-mark" alt="Vested" />
        <span>Vested</span>
      </a>
      <div className="nav-links">
        <a href="#how">How it works</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-cta">
        <a href="#elig" className="btn btn-link btn-sm">Sign in</a>
        <a href="#elig" className="btn btn-primary btn-sm">
          Check eligibility
          <Icon.Arrow />
        </a>
      </div>
    </div>
  </nav>;


const LOGO_DEV_TOKEN = 'pk_S9AwI3QMQOaJj95knAuq6A';

const TrustStrip = () => {
  const marks = [
    { name: 'SpaceX',     domain: 'spacex.com' },
    { name: 'Anduril',    domain: 'anduril.com' },
    { name: 'Ramp',       domain: 'ramp.com' },
    { name: 'OpenAI',     domain: 'openai.com' },
    { name: 'Anthropic',  domain: 'anthropic.com' },
    { name: 'Cognition',  domain: 'cognition.ai' },
    { name: 'Databricks', domain: 'databricks.com' },
    { name: 'Stripe',     domain: 'stripe.com' },
    { name: 'Scale',      domain: 'scale.com' },
    { name: 'Rippling',   domain: 'rippling.com' },
  ];

  const loop = [...marks, ...marks];
  return (
    <div className="trust">
      <div className="container">
        <div className="trust-label">Built for employees at companies like</div>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {loop.map((m, i) =>
            <img
              key={i}
              className="trust-logo"
              src={`https://img.logo.dev/${m.domain}?token=${LOGO_DEV_TOKEN}&size=120&format=png&retina=true`}
              alt={m.name}
              loading="lazy"
            />
          )}
        </div>
      </div>
    </div>);

};

const QualifyingCard = () => (
  <div className="hero-visual">
    {/* Atmospheric backdrop */}
    <div className="hero-sun"/>
    <div className="hero-blueprint">
      <svg viewBox="0 0 240 180" fill="none" preserveAspectRatio="xMidYMid meet">
        {/* Hills */}
        <path d="M0 130 Q60 100 120 120 T240 110 L240 180 L0 180 Z" fill="currentColor" opacity="0.06"/>
        <path d="M0 150 Q70 130 140 140 T240 135 L240 180 L0 180 Z" fill="currentColor" opacity="0.08"/>
        {/* House silhouette - composed of simple primitives */}
        <g transform="translate(155 92)" fill="currentColor" opacity="0.18">
          <polygon points="0,16 22,0 44,16 44,46 0,46"/>
          <rect x="18" y="28" width="8" height="18"/>
          <rect x="6" y="22" width="6" height="6"/>
          <rect x="32" y="22" width="6" height="6"/>
          <rect x="30" y="-6" width="4" height="10"/>
        </g>
        {/* Tree as a simple circle + rect */}
        <g transform="translate(60 110)" fill="currentColor" opacity="0.14">
          <circle cx="0" cy="0" r="10"/>
          <rect x="-1.5" y="8" width="3" height="14"/>
        </g>
      </svg>
    </div>

    {/* Back card: the old way */}
    <div className="qcard qcard-back">
      <div className="qcard-head">
        <div className="qcard-head-l">
          <div className="qcard-dots"><span/><span/><span/></div>
          <span className="qcard-title">Conventional lender</span>
        </div>
        <span className="qcard-tag qcard-tag-no">Declined</span>
      </div>
      <div className="qcard-body qcard-body-mini">
        <div className="qrow-mini"><span>Counted income</span><span className="mono">$300K</span></div>
        <div className="qrow-mini muted"><span>Vested equity</span><span className="mono">not counted</span></div>
        <div className="qrow-mini"><span>Home you reach</span><span className="mono">~$1.4M</span></div>
      </div>
    </div>

    {/* Front card: Vested */}
    <div className="qcard qcard-front">
      <div className="qcard-head">
        <div className="qcard-head-l">
          <div className="qcard-dots"><span/><span/><span/></div>
          <span className="qcard-title">Vested · Underwriting</span>
        </div>
        <span className="qcard-tag">Approved</span>
      </div>
      <div className="qcard-body">
        <h3 className="qcard-heading">Your qualifying picture</h3>
        <div className="qrow">
          <div className="qrow-label">Base salary</div>
          <div className="qrow-value"><Counter value={300000} delay={120}/></div>
        </div>
        <div className="qrow">
          <div className="qrow-label">Bonus &amp; RSU vesting (12mo)</div>
          <div className="qrow-value"><Counter value={90000} delay={220}/></div>
        </div>
        <div className="qrow">
          <div className="qrow-label">Vested equity · private</div>
          <div className="qrow-value"><Counter value={4200000} delay={320}/></div>
        </div>
        <div className="qrow divider"/>
        <div className="qrow highlight">
          <div className="qrow-label">Equity-counted income</div>
          <div className="qrow-value">
            <Counter value={640000} delay={520}/>
            <span className="arrow"><Icon.Up/> 1.6×</span>
          </div>
        </div>
        <div className="qrow highlight">
          <div className="qrow-label">Home you can reach</div>
          <div className="qrow-value">
            <Counter value={3000000} delay={640} format={formatCompact} prefix="~"/>
            <span className="arrow"><Icon.Up/> 2.1×</span>
          </div>
        </div>
      </div>
    </div>

    {/* Floating annotations removed */}
  </div>
);


const Hero = () =>
<section className="hero">
    <div className="hero-glow" />
    <div className="hero-grid" />
    <div className="container hero-inner" data-comment-anchor="3bec97363b-div-115-5">
      <div className="hero-copy">
        <div className="eyebrow">Mortgages for late-stage tech</div>
        <h1 className="display">Keep your shares.<br />Get the house.</h1>
        <p className="lede">
          Vested gets you a mortgage that counts the vested equity in the
          private company you work for, so you qualify for the home you
          have actually earned.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
          <a href="#elig" className="btn btn-primary btn-lg">
            See what you would qualify for
            <Icon.Arrow size={16} />
          </a>
          <a href="#how" className="btn btn-ghost btn-lg">How it works</a>
        </div>
      </div>
      <div>
        <QualifyingCard />
      </div>
    </div>
    <TrustStrip />
  </section>;


window.Hero = Hero;