import React, { useState } from 'react';

const Hero = () => {
  const [isCopied, setIsCopied] = useState(false);

  const copyToClipboard = () => {
    navigator.clipboard.writeText('pip install m4-mcp')
      .then(() => {
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 2000);
      })
      .catch(err => {
        console.error('Failed to copy: ', err);
      });
  };

  const handleScroll = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <section className="hero">
      <div className="container">
        <div className="hero-content">
          <div className="hero-text">
            <h1>Hello, Researchers!<br />Meet m4</h1>
            <p className="subtitle">m4 is a powerful Model Context Protocol for seamless interaction with the MIMIC database</p>
            <p className="description">Free and open-source tool that enables researchers to query and analyze the world's largest publicly available healthcare database with ease</p>
            <div className="hero-cta-group">
              <button onClick={() => handleScroll('paper')} className="cta-button">
                <span>📄</span> Read Paper
              </button>
              <button onClick={copyToClipboard} className="cta-button-secondary">
                <span role="img" aria-label={isCopied ? 'check mark' : 'laptop'}>
                  {isCopied ? '✅' : '💻'}
                </span>
                {isCopied ? 'Copied!' : 'pip install m4-mcp'}
              </button>
            </div>
          </div>
          <div className="hero-visual">
            <div className="laptop-mockup">
              <div className="laptop-frame">
                <div className="laptop-screen">
                  <div className="screen-content">
                    <div className="app-header">
                      <div className="traffic-lights">
                        <div className="traffic-light red"></div>
                        <div className="traffic-light yellow"></div>
                        <div className="traffic-light green"></div>
                      </div>
                      <div className="app-title">m4 MIMIC Dashboard</div>
                    </div>
                    <div className="dashboard-image-container">
                      <img
                        src="/m4/banner1.png"
                        alt="m4 MIMIC Dashboard"
                        className="dashboard-banner"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;
