// Shared building blocks for WealthLens marketing site.

const Logo = ({size = 26, withWord = true}) => (
  <a href="index.html" style={{display:'flex', alignItems:'center', gap:10, textDecoration:'none'}}>
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M14 10 L24 10 L18 34 L8 34 Z" fill="#D4845A"/>
      <path d="M21 16 L31 16 L29 23 L19.5 23 Z" fill="#D4845A"/>
      <circle cx="32.5" cy="8" r="2.6" fill="#D4845A"/>
    </svg>
    {withWord && (
      <span style={{fontWeight:700, letterSpacing:'-0.01em', color:'var(--wl-fg-0)', fontSize:18}}>finvue</span>
    )}
  </a>
);

const LAUNCH_URL = 'https://app.finvue.co.za/signup';
const DEMO_URL = 'https://app.finvue.co.za/demo';

const Header = ({current = 'home'}) => {
  const linkStyle = (active) => ({
    color: active ? 'var(--wl-fg-0)' : 'var(--wl-fg-1)',
    textDecoration: 'none',
    fontSize: 14,
    position: 'relative',
    paddingBottom: 4,
    borderBottom: active ? '1px solid var(--wl-accent)' : '1px solid transparent',
    transition: 'color 120ms',
  });
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background:'rgba(12,11,9,0.72)',
      backdropFilter:'blur(16px)',
      WebkitBackdropFilter:'blur(16px)',
      borderBottom:'1px solid var(--wl-line-1)',
    }}>
      <div style={{
        maxWidth:1240, margin:'0 auto', padding:'18px 32px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
      }}>
        <Logo/>
        <nav style={{display:'flex', gap:32, alignItems:'center'}}>
          <a href="index.html" style={linkStyle(current==='home')}>Overview</a>
          <a href="features.html" style={linkStyle(current==='features')}>Features</a>
          <a href="whatsnext.html" style={linkStyle(current==='whatsnext')}>What's next?</a>
          <a href="security.html" style={linkStyle(current==='security')}>Security</a>
          <a href={LAUNCH_URL} target="_blank" rel="noopener" style={{...linkStyle(false), color:'var(--wl-fg-2)'}}>Log in</a>
          <a href={LAUNCH_URL} target="_blank" rel="noopener" style={{
            background:'#D4845A', color:'#0C0B09',
            padding:'10px 18px', borderRadius:10,
            fontSize:14, fontWeight:500, textDecoration:'none',
            display:'inline-flex', alignItems:'center', gap:6,
          }}>Launch app <span aria-hidden style={{fontSize:13}}>↗</span></a>
        </nav>
      </div>
    </header>
  );
};

const Footer = () => (
  <footer style={{borderTop:'1px solid var(--wl-line-1)', padding:'48px 32px 40px', color:'var(--wl-fg-3)', fontSize:13, marginTop:64}}>
    <div style={{maxWidth:1240, margin:'0 auto', display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48}}>
      <div>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
          <svg width="22" height="22" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 10 L24 10 L18 34 L8 34 Z" fill="#D4845A"/><path d="M21 16 L31 16 L29 23 L19.5 23 Z" fill="#D4845A"/><circle cx="32.5" cy="8" r="2.6" fill="#D4845A"/></svg>
          <span style={{color:'var(--wl-fg-0)', fontWeight:600, fontSize:15}}>finvue</span>
        </div>
        <p style={{color:'var(--wl-fg-2)', fontSize:13, maxWidth:300, lineHeight:1.55, margin:0}}>
          Personal finance intelligence for South Africa. Analyst, not advisor.
        </p>
      </div>
      <div>
        <div className="wl-eyebrow" style={{marginBottom:12}}>Product</div>
        <div style={{display:'flex', flexDirection:'column', gap:8}}>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href="features.html">Features</a>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href={LAUNCH_URL} target="_blank" rel="noopener">Launch app</a>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href="#">Changelog</a>
        </div>
      </div>
      <div>
        <div className="wl-eyebrow" style={{marginBottom:12}}>Trust</div>
        <div style={{display:'flex', flexDirection:'column', gap:8}}>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href="security.html">Security</a>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href="#">Privacy</a>
        </div>
      </div>
      <div>
        <div className="wl-eyebrow" style={{marginBottom:12}}>Company</div>
        <div style={{display:'flex', flexDirection:'column', gap:8}}>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href="security.html#who-we-are">About</a>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href="#">Contact</a>
          <a style={{color:'var(--wl-fg-2)', textDecoration:'none'}} href="#">Careers</a>
        </div>
      </div>
    </div>
    <div style={{maxWidth:1240, margin:'40px auto 0', paddingTop:24, borderTop:'1px solid var(--wl-line-1)', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:12, fontSize:12, color:'var(--wl-fg-3)'}}>
      <span>© 2026 Finvue · Cape Town, South Africa</span>
      <span>Finvue is an information tool. Not financial advice.</span>
    </div>
  </footer>
);

// Count-up hook for monetary figures
const useCountUp = (target, duration = 1400, trigger = true) => {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!trigger) return;
    const start = performance.now();
    const ease = t => 1 - Math.pow(1 - t, 3);
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      setV(Math.round(target * ease(t)));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, trigger]);
  return v;
};

// ZAR formatting — space thousands. Accepts number.
const formatZAR = (n, decimals = 0) => {
  const s = Math.abs(n).toFixed(decimals);
  const [intPart, decPart] = s.split('.');
  const withSpaces = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, '\u00A0');
  return decPart ? `${withSpaces}.${decPart}` : withSpaces;
};

// Intersection observer — fires once when element enters view.
const useInView = (threshold = 0.2) => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, seen];
};

// Reused mini dashboard chart
const Sparkline = ({height = 180, delay = 0}) => {
  const [ref, seen] = useInView(0.3);
  return (
    <svg ref={ref} viewBox="0 0 600 180" width="100%" height={height} preserveAspectRatio="none" style={{display:'block'}}>
      <defs>
        <linearGradient id={`spark-g-${delay}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#D4845A" stopOpacity="0.22"/>
          <stop offset="100%" stopColor="#D4845A" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d="M0,150 C60,148 120,145 180,140 C240,135 300,128 340,108 C380,72 420,42 470,42 C520,42 560,42 600,42 L600,180 L0,180 Z" fill={`url(#spark-g-${delay})`} style={{opacity: seen ? 1 : 0, transition:'opacity 480ms'}}/>
      <path
        d="M0,150 C60,148 120,145 180,140 C240,135 300,128 340,108 C380,72 420,42 470,42 C520,42 560,42 600,42"
        fill="none" stroke="#D4845A" strokeWidth="2" strokeLinecap="round"
        pathLength="1"
        style={{
          strokeDasharray: 1, strokeDashoffset: seen ? 0 : 1,
          transition: `stroke-dashoffset 1200ms cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms`,
        }}
      />
    </svg>
  );
};

const Donut = ({size = 160}) => (
  <svg width={size} height={size} viewBox="0 0 42 42">
    <circle cx="21" cy="21" r="15.9" fill="none" stroke="#B8B3A8" strokeWidth="3.8" strokeDasharray="50 50" transform="rotate(-90 21 21)"/>
    <circle cx="21" cy="21" r="15.9" fill="none" stroke="#6AA6F3" strokeWidth="3.8" strokeDasharray="20 80" strokeDashoffset="-50" transform="rotate(-90 21 21)"/>
    <circle cx="21" cy="21" r="15.9" fill="none" stroke="#F5B657" strokeWidth="3.8" strokeDasharray="12 88" strokeDashoffset="-70" transform="rotate(-90 21 21)"/>
    <circle cx="21" cy="21" r="15.9" fill="none" stroke="#D4845A" strokeWidth="3.8" strokeDasharray="10 90" strokeDashoffset="-82" transform="rotate(-90 21 21)"/>
  </svg>
);

Object.assign(window, {
  Logo, Header, Footer,
  useCountUp, useInView, formatZAR,
  Sparkline, Donut,
  LAUNCH_URL,
});