// Hero — ValueHuman brand, ProFamily ecosystem entry point.

function Hero() {
  return (
    <section className="vh-hero" id="top">
      <div className="vh-hero-glow" />
      <div className="vh-hero-inner">
       <div className="vh-hero-content">
        <div className="vh-hero-eyebrow">
          <span className="vh-pulse" />
          <span>ValueHuman AI · Family Operating System</span>
        </div>

        <h1 className="vh-hero-h1">
          Plan daily life.
          <br />
          Guide your kids.
          <br />
          <span className="text-gradient">Remember everything.</span>
        </h1>

        <p className="vh-hero-sub">
          ProFamily AI is an AI-powered family operating system. One ecosystem for schedules, meals, kids' growth,
          adult careers, money and long-term family memory — delivered through a Telegram-first experience your
          family already uses.
        </p>

        <div className="vh-hero-ctas">
          <a
            href="../profamily-telegram/index.html"
            className="btn btn-brand btn-lg"
          >
            Try the Telegram bot <Icon name="arrow-up-right" size={18} color="#fff" />
          </a>
          <a href="#products" className="btn btn-secondary btn-lg">See the ecosystem</a>
        </div>

        <div className="vh-hero-trust">
          <div className="vh-trust-item">
            <Icon name="message-circle" size={18} color="var(--vh-blue-500)" />
            <span>Telegram-first</span>
          </div>
          <div className="vh-trust-dot" />
          <div className="vh-trust-item">
            <Icon name="lock" size={18} color="var(--vh-purple-500)" />
            <span>Privacy-controlled memory</span>
          </div>
          <div className="vh-trust-dot" />
          <div className="vh-trust-item">
            <Icon name="users" size={18} color="var(--vh-orange-500)" />
            <span>Designed for whole families</span>
          </div>
        </div>
       </div>

      {/* Floating preview card — sits at the right of the hero, links to the bot prototype */}
      <a
        href="../profamily-telegram/index.html"
        className="vh-hero-preview vh-hero-preview-link"
        title="Open the ProFamily Telegram prototype"
      >
        <div className="vh-hero-preview-header">
          <div className="vh-hero-preview-avatar">
            <img src="../../assets/valuehuman-logo.jpg" alt="" />
          </div>
          <div>
            <div className="vh-hero-preview-name">ProFamily</div>
            <div className="vh-hero-preview-status">via Telegram · online</div>
          </div>
          <span className="vh-hero-preview-launch">
            Open prototype <Icon name="arrow-up-right" size={12} />
          </span>
        </div>
        <div className="vh-hero-preview-body">
          <div className="bubble user">Add dentist appointment Tuesday 4 PM</div>
          <div className="bubble bot">
            Got it — <strong>Dentist · Tuesday 25 Nov · 4 PM</strong>. Add to the family calendar?
            <div className="bubble-actions">
              <button className="bubble-btn primary" type="button" onClick={(e) => e.preventDefault()}>Confirm</button>
              <button className="bubble-btn" type="button" onClick={(e) => e.preventDefault()}>Edit</button>
            </div>
          </div>
          <div className="bubble user typing">
            <span className="dot" /><span className="dot" /><span className="dot" />
          </div>
        </div>
      </a>
      </div>
    </section>
  );
}

window.Hero = Hero;