/* Hero — animated particle field bg, headline w/ amber underline highlight,
 * CTA buttons, and 3 floating coins (pillars) drifting around. */

const Hero = ({ onConsultation }) => {
  const containerRef = React.useRef(null);
  const [parallax, setParallax] = React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    const onMove = (e) => {
      const el = containerRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
      const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
      setParallax({ x, y });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  const px = (depth) => ({
    transform: `translate3d(${parallax.x * depth}px, ${parallax.y * depth}px, 0)`,
    transition: "transform 400ms cubic-bezier(.2,.7,.2,1)",
  });

  return (
    <section className="hero" id="top" ref={containerRef}>
      <div className="hero__bg">
        <ParticleField density={1.2} color="amber" />
        <div className="hero__gradient" aria-hidden="true"/>
        <div className="hero__grid" aria-hidden="true"/>
      </div>

      {/* Floating coins arranged around the headline */}
      <div className="hero__coins" aria-hidden="true">
        <div className="hero__coin hero__coin--1" style={px(18)}>
          <Coin icon="home" size={92} delay={0} drift={1.0}/>
          <span className="hero__coin-label">Nemovitosti</span>
        </div>
        <div className="hero__coin hero__coin--2" style={px(-14)}>
          <Coin icon="solar" size={108} delay={0.6} drift={1.2}/>
          <span className="hero__coin-label">Solární FVE</span>
        </div>
        <div className="hero__coin hero__coin--3" style={px(22)}>
          <Coin icon="building" size={86} delay={1.1} drift={0.9}/>
          <span className="hero__coin-label">Firmy</span>
        </div>
        <div className="hero__coin hero__coin--4" style={px(-10)}>
          <Coin icon="chart" size={64} delay={1.6} drift={1.4} glow={0.7}/>
        </div>
        <div className="hero__coin hero__coin--5" style={px(8)}>
          <Coin icon="lock" size={56} delay={2.0} drift={1.1} glow={0.6}/>
        </div>
        <div className="hero__coin hero__coin--6" style={px(-18)}>
          <Coin icon="leaf" size={62} delay={2.3} drift={1.3} glow={0.65}/>
        </div>
      </div>

      <div className="container hero__inner">
        <div className="hero__pill" style={px(-4)}>
          <span className="hero__pill-dot"/>
          KORYSOL s.r.o. · Tokenizace reálných aktiv
        </div>

        <h1 className="hero__title display">
          <span className="hero__line-1">Tokenizace</span>
          <span className="hero__line-2"><span className="hl">reálných</span> aktiv</span>
        </h1>

        <p className="hero__lead lead">
          Proměňte své <b>nemovitosti, solární elektrárny</b> nebo <b>firmu</b> na digitální podíly,
          ke kterým získá přístup nová generace investorů. Likvidnější. Transparentnější. Bez zbytečné byrokracie.
        </p>

        <div className="hero__cta">
          <button className="btn btn--primary btn--lg" onClick={onConsultation}>
            Konzultace zdarma
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </button>
          <a className="btn btn--ghost btn--lg" href="#jak">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/>
            </svg>
            Jak to funguje
          </a>
        </div>

        <div className="hero__trust">
          <div className="hero__trust-item">
            <strong>2,4 mld Kč</strong>
            <span>aktiv připravených k tokenizaci</span>
          </div>
          <div className="hero__trust-divider"/>
          <div className="hero__trust-item">
            <strong>40+</strong>
            <span>partnerů z RWA ekosystému</span>
          </div>
          <div className="hero__trust-divider"/>
          <div className="hero__trust-item">
            <strong>~14 dní</strong>
            <span>od konzultace ke struktuře</span>
          </div>
        </div>
      </div>

      <div className="hero__scroll" aria-hidden="true">
        <span>Scroll</span>
        <div className="hero__scroll-line"/>
      </div>
    </section>
  );
};

window.Hero = Hero;