const PhoneMockup = () => {
  // Animated counter for hydration ring
  const [hyd, setHyd] = React.useState(0);
  const [stp, setStp] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - start) / 1400);
      const e = 1 - Math.pow(1 - t, 3);
      setHyd(Math.round(82 * e));
      setStp(Math.round(7480 * e));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const C = 2 * Math.PI * 24;
  const dash = C * (hyd / 100);

  return (
    <div className="mock-wrap">
      <div className="mock-frame">
        <div className="mock-screen">
          <div className="mock-notch"></div>

          <div className="mock-status">
            <span>9:41</span>
            <div className="mock-status-right">
              <span>●●●</span>
              <span style={{ marginLeft: 6 }}>100%</span>
            </div>
          </div>

          <div className="mock-body">
            <div className="mock-greet">
              <div>
                <h3>Good morning, Aarav</h3>
                <p>Tuesday, May 14</p>
              </div>
              <div className="mock-avatar">A</div>
            </div>

            <div className="mock-row">
              <div className="mock-card">
                <div className="mock-ring-wrap">
                  <div className="mock-ring">
                    <svg width="56" height="56" viewBox="0 0 56 56">
                      <circle cx="28" cy="28" r="24" fill="none" stroke="#F0EBE0" strokeWidth="5"/>
                      <circle cx="28" cy="28" r="24" fill="none" stroke="#2E6CF6" strokeWidth="5"
                        strokeLinecap="round"
                        strokeDasharray={`${dash} ${C}`}/>
                    </svg>
                    <div className="pct">{hyd}%</div>
                  </div>
                  <div>
                    <div className="lbl">Hydration</div>
                    <div className="sub">1.8 / 2.2 L</div>
                  </div>
                </div>
              </div>
              <div className="mock-card">
                <div className="lbl">Steps</div>
                <div className="val">{stp.toLocaleString()}</div>
                <div className="sub">▲ 12% vs avg</div>
              </div>
            </div>

            <div className="mock-ai">
              <div className="lbl">AI insight</div>
              <p>Add 20g of paneer or dal to lunch — your protein is trending 18% below your weekly target.</p>
            </div>

            <div className="mock-meal">
              <div className="mock-meal-thumb">🍛</div>
              <div className="mock-meal-info">
                <div className="name">Moong dal khichdi</div>
                <div className="macro">P 14 · C 52 · F 8</div>
              </div>
              <div className="mock-meal-cal">340 kcal</div>
            </div>

            <div className="mock-meal">
              <div className="mock-meal-thumb" style={{ background: 'linear-gradient(135deg, #D9E4FF, #EEF3FF)' }}>🥗</div>
              <div className="mock-meal-info">
                <div className="name">Sprout salad</div>
                <div className="macro">P 11 · C 22 · F 4</div>
              </div>
              <div className="mock-meal-cal">186 kcal</div>
            </div>
          </div>

          <div className="mock-tab">
            <div className="mock-tab-btn active"><div className="icon"><Icon name="home" size={12} stroke={2}/></div>Today</div>
            <div className="mock-tab-btn"><div className="icon"><Icon name="bowl" size={12} stroke={2}/></div>Meals</div>
            <div className="mock-tab-btn"><div className="icon"><Icon name="pulse" size={12} stroke={2}/></div>Health</div>
            <div className="mock-tab-btn"><div className="icon"><Icon name="user" size={12} stroke={2}/></div>You</div>
          </div>
        </div>
      </div>

      <div className="mock-float f1">
        <div className="ic g"><Icon name="heart" size={16} stroke={2}/></div>
        <div>
          <div className="t">Resting HR</div>
          <div className="v">64 bpm</div>
        </div>
      </div>
      <div className="mock-float f2">
        <div className="ic o"><Icon name="flame" size={16} stroke={2}/></div>
        <div>
          <div className="t">Streak</div>
          <div className="v">14 days</div>
        </div>
      </div>
      <div className="mock-float f3">
        <div className="ic b"><Icon name="moon" size={16} stroke={2}/></div>
        <div>
          <div className="t">Sleep</div>
          <div className="v">7h 32m</div>
        </div>
      </div>
    </div>
  );
};

const Hero = () => {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <div className="hero-blob orange"></div>
        <div className="hero-blob blue"></div>
      </div>
      <div className="container hero-grid">
        <div className="reveal">
          <span className="chip">
            <span className="chip-dot"></span>
            Beta launching soon · India
          </span>
          <h1 className="display">
            Preventive <span className="ink-grad">healthcare</span>,<br/>
            built into your day.
          </h1>
          <p className="lede">
            Arogya Bite unifies AI nutrition guidance, habit coaching, wellness tracking,
            diagnostics and wearables into one calm, intelligent app — designed for Indian lifestyles.
          </p>
          <div className="hero-actions">
            <a href="#signup" className="btn btn-primary">
              Join the beta <Icon name="arrowRight" size={14}/>
            </a>
            <a href="#features" className="btn btn-secondary">
              See features
            </a>
          </div>

          <div className="hero-stats">
            <div className="hero-stat">
              <div className="num">AI</div>
              <div className="lbl">Nutrition intelligence</div>
            </div>
            <div className="hero-stat">
              <div className="num">24/7</div>
              <div className="lbl">Wellness monitoring</div>
            </div>
            <div className="hero-stat">
              <div className="num">1 app</div>
              <div className="lbl">Unified health stack</div>
            </div>
          </div>
        </div>

        <div className="reveal">
          <PhoneMockup />
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });