/* ===================== HERO ===================== */
function Hero() {
  const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 });
  const heroRef = React.useRef(null);

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

  // animated path progress
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const t0 = performance.now();
    let raf;
    const tick = (t) => {
      const e = Math.min(1, (t - t0) / 2200);
      const eased = 1 - Math.pow(1 - e, 3);
      setProgress(eased);
      if (e < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const tx = (mouse.x - 0.5) * 14;
  const ty = (mouse.y - 0.5) * 14;

  return (
    <section className="hero" ref={heroRef} data-screen-label="01 Hero">
      <div className="hero-bg">
        <div className="hero-blob blob-g" style={{ transform: `translate(${tx * 2}px, ${ty * 2}px)` }} />
        <div className="hero-blob blob-o" style={{ transform: `translate(${-tx * 1.6}px, ${-ty * 1.6}px)` }} />
        <div className="hero-blob blob-n" style={{ transform: `translate(${tx}px, ${-ty}px)` }} />
        <div className="hero-grid" />
      </div>

      <div className="container hero-inner">
        <div className="hero-left">
          <div className="hero-eyebrow">
            <span className="dot-pulse" /> Small business tech, done properly
          </div>
          <h1 className="h-display hero-title">
            We help small businesses<br />
            <span className="accent-green">sell more</span>,{" "}
            <span className="accent-orange">stress less</span>.
          </h1>
          <p className="lede hero-lede">
            Beautiful websites, smart admin systems, and useful AI — built for plumbers, florists, schools, and every shop in between. No jargon. No platforms you'll regret.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-accent btn-lg" href="#journey">
              <span data-cta-find>Find your starting point</span> <Icon.arrow />
            </a>
            <a className="btn btn-ghost btn-lg" href="https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20my%20business" target="_blank" rel="noreferrer">
              <Icon.whatsapp /> WhatsApp us
            </a>
          </div>
          <div className="hero-proof">
            <div className="hp-item">
              <div className="hp-num"><Counter to={160} prefix="+" suffix=" /mo" /></div>
              <div className="hp-lab">new visitors won</div>
            </div>
            <div className="hp-divider" />
            <div className="hp-item">
              <div className="hp-num"><Counter to={5} suffix="/day" /></div>
              <div className="hp-lab">new enquiries delivered</div>
            </div>
            <div className="hp-divider" />
            <div className="hp-item">
              <div className="hp-num"><Counter to={5} suffix="h" /></div>
              <div className="hp-lab">admin saved per week</div>
            </div>
          </div>
        </div>

        <div className="hero-right">
          <HeroChart progress={progress} />
        </div>
      </div>

      <a className="hero-scroll" href="#journey" aria-label="Scroll">
        <span>Scroll</span>
        <span className="hs-line" />
      </a>
    </section>);

}

function HeroChart({ progress }) {
  // Path that echoes the logo: dip then sharp climb up to the right
  const w = 560,h = 460;
  const pts = [
  [40, 360],
  [120, 380],
  [200, 330],
  [260, 280],
  [320, 200],
  [380, 130],
  [460, 70],
  [520, 30]];

  const path = pts.map((p, i) => i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`).join(" ");
  const totalLen = 720; // approx
  const dashOffset = totalLen * (1 - progress);

  // Arrow position at end
  const last = pts[pts.length - 1];
  const prev = pts[pts.length - 2];
  const angle = Math.atan2(last[1] - prev[1], last[0] - prev[0]) * (180 / Math.PI);

  // dots along path that bloom in
  const dots = [
  { p: pts[1], delay: 0.2 },
  { p: pts[3], delay: 0.45 },
  { p: pts[5], delay: 0.7 }];


  return (
    <div className="hero-chart">
      <div className="hc-card">
        <div className="hc-card-head">
          <div>
            <div className="hc-label">Your business · last 12 months</div>
            <div className="hc-title">Growth, in one place</div>
          </div>
          <div className="hc-pill">
            <span className="dot-pulse green" /> Live
          </div>
        </div>

        <svg className="hc-svg" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet">
          <defs>
            <linearGradient id="lineGrad" x1="0" x2="1" y1="1" y2="0">
              <stop offset="0%" stopColor="#1b3f73" />
              <stop offset="55%" stopColor="#0e7a3d" />
              <stop offset="85%" stopColor="#5bba42" />
              <stop offset="100%" stopColor="#f39c20" />
            </linearGradient>
            <linearGradient id="fillGrad" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#5bba42" stopOpacity="0.35" />
              <stop offset="100%" stopColor="#5bba42" stopOpacity="0" />
            </linearGradient>
          </defs>

          {/* grid */}
          {[0, 1, 2, 3, 4].map((i) =>
          <line key={i} x1="20" x2={w - 20} y1={80 + i * 70} y2={80 + i * 70} stroke="#e2e7d8" strokeWidth="1" strokeDasharray="2 4" />
          )}

          {/* fill under path */}
          <path d={`${path} L${last[0]},${h - 20} L${pts[0][0]},${h - 20} Z`} fill="url(#fillGrad)" opacity={progress} />

          {/* main path */}
          <path
            d={path}
            stroke="url(#lineGrad)"
            strokeWidth="4"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
            style={{
              strokeDasharray: totalLen,
              strokeDashoffset: dashOffset
            }} />
          

          {/* dots */}
          {dots.map((d, i) => {
            const op = Math.max(0, Math.min(1, (progress - d.delay) * 4));
            return (
              <g key={i} opacity={op}>
                <circle cx={d.p[0]} cy={d.p[1]} r="9" fill="white" />
                <circle cx={d.p[0]} cy={d.p[1]} r="6" fill="#1b3f73" />
              </g>);

          })}

          {/* end arrow */}
          {progress > 0.92 &&
          <g transform={`translate(${last[0]}, ${last[1]}) rotate(${angle})`}>
              <circle r="14" fill="#f39c20" />
              <path d="M -6 -5 L 6 0 L -6 5 Z" fill="white" />
            </g>
          }
        </svg>

        <div className="hc-card-foot">
          <div className="hc-stat">
            <div className="hc-stat-v">+412%</div>
            <div className="hc-stat-l">visitors</div>
          </div>
          <div className="hc-stat">
            <div className="hc-stat-v">£40k</div>
            <div className="hc-stat-l">won in 90d</div>
          </div>
          <div className="hc-stat">
            <div className="hc-stat-v">5/day</div>
            <div className="hc-stat-l">enquiries</div>
          </div>
        </div>
      </div>

      {/* floating chips */}
      <div className="hc-chip hc-chip-1" data-comment-anchor="4be6f5bca0-div-213-7">
        <Icon.whatsapp /> New enquiry from <b>Sarah</b>
      </div>
      <div className="hc-chip hc-chip-2">
        <Icon.sparkle /> AI drafted 3 quotes
      </div>
      <div className="hc-chip hc-chip-3" data-comment-anchor="bc037fae42-div-219-7">
        <Icon.check /> Invoice paid · £840
      </div>
    </div>);

}

window.Hero = Hero;