export default function PortfolioWebsite() {
  const disableActions = (e) => {
    e.preventDefault();
  };

  const handleKeyDown = (e) => {
    if (
      e.key === 'F12' ||
      (e.ctrlKey && e.shiftKey && e.key === 'I') ||
      (e.ctrlKey && e.key.toLowerCase() === 'u') ||
      (e.ctrlKey && e.key.toLowerCase() === 's')
    ) {
      e.preventDefault();
    }
  };

  return (
    <>
      <style>{`
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          scroll-behavior: smooth;
        }

        body {
          user-select: none;
          font-family: Arial, sans-serif;
          background: #020617;
          color: white;
          line-height: 1.6;
        }

        a {
          text-decoration: none;
        }

        .container {
          width: 90%;
          max-width: 1200px;
          margin: auto;
        }

        .hero {
          min-height: 100vh;
          display: flex;
          align-items: center;
          background: linear-gradient(to right, #0f172a, #020617, #000000);
          padding: 80px 0;
        }

        .hero-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 50px;
          flex-wrap: wrap;
        }

        .hero-text {
          flex: 1;
          min-width: 300px;
        }

        .hero-text h1 {
          font-size: 64px;
          margin-bottom: 20px;
        }

        .hero-text p {
          color: #cbd5e1;
          font-size: 18px;
          margin-bottom: 30px;
        }

        .subtitle {
          color: #22d3ee;
          font-size: 20px;
          margin-bottom: 15px;
        }

        .buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
        }

        .btn {
          padding: 14px 24px;
          border-radius: 12px;
          font-weight: bold;
          transition: 0.3s;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: white;
        }

        .btn-primary {
          background: #06b6d4;
        }

        .btn-outline {
          border: 1px solid #334155;
        }

        .btn-meeting {
          background: #2563eb;
        }

        .btn:hover {
          transform: translateY(-2px);
          opacity: 0.9;
        }

        .bird {
          position: fixed;
          left: -120px;
          font-size: 42px;
          z-index: 9999;
          pointer-events: none;
          opacity: 0.9;
        }

        .bird1 {
          top: 80px;
          animation: flyBird1 18s linear infinite;
        }

        .bird2 {
          top: 180px;
          animation: flyBird2 22s linear infinite;
          animation-delay: 2s;
        }

        .bird3 {
          top: 280px;
          animation: flyBird3 20s linear infinite;
          animation-delay: 4s;
        }

        .bird4 {
          top: 380px;
          animation: flyBird4 24s linear infinite;
          animation-delay: 1s;
        }

        .bird5 {
          top: 480px;
          animation: flyBird5 26s linear infinite;
          animation-delay: 3s;
        }

        .background-animation {
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          overflow: hidden;
          z-index: -1;
        }

        .circle {
          position: absolute;
          border-radius: 50%;
          background: rgba(34, 211, 238, 0.08);
          animation: floatCircle 20s linear infinite;
        }

        .circle:nth-child(1) {
          width: 200px;
          height: 200px;
          left: 10%;
          top: 20%;
        }

        .circle:nth-child(2) {
          width: 300px;
          height: 300px;
          right: 10%;
          top: 10%;
          animation-duration: 25s;
        }

        .circle:nth-child(3) {
          width: 150px;
          height: 150px;
          left: 40%;
          bottom: 10%;
          animation-duration: 18s;
        }

        @keyframes flyBird1 {
          0% { transform: translateX(0) translateY(0); }
          50% { transform: translateX(60vw) translateY(-40px); }
          100% { transform: translateX(130vw) translateY(20px); }
        }

        @keyframes flyBird2 {
          0% { transform: translateX(0) translateY(0); }
          50% { transform: translateX(70vw) translateY(30px); }
          100% { transform: translateX(130vw) translateY(-30px); }
        }

        @keyframes flyBird3 {
          0% { transform: translateX(0) translateY(0); }
          50% { transform: translateX(65vw) translateY(-20px); }
          100% { transform: translateX(130vw) translateY(40px); }
        }

        @keyframes flyBird4 {
          0% { transform: translateX(0) translateY(0); }
          50% { transform: translateX(80vw) translateY(20px); }
          100% { transform: translateX(130vw) translateY(-40px); }
        }

        @keyframes flyBird5 {
          0% { transform: translateX(0) translateY(0); }
          50% { transform: translateX(75vw) translateY(-35px); }
          100% { transform: translateX(130vw) translateY(25px); }
        }

        @keyframes floatCircle {
          0% {
            transform: translateY(0px) rotate(0deg);
          }

          50% {
            transform: translateY(-40px) rotate(180deg);
          }

          100% {
            transform: translateY(0px) rotate(360deg);
          }
        }

        .profile-box {
          width: 300px;
          height: 300px;
          border-radius: 30px;
          background: linear-gradient(135deg, #06b6d4, #2563eb);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 72px;
          font-weight: bold;
          box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        .section-dark {
          background: #0f172a;
          padding: 80px 0;
        }

        .section-title {
          text-align: center;
          font-size: 42px;
          margin-bottom: 50px;
        }

        .skills-grid,
        .contact-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
        }

        .skill,
        .card {
          background: #111827;
          border-radius: 20px;
          padding: 25px;
          border: 1px solid #1e293b;
          transition: 0.3s;
        }

        .skill:hover,
        .card:hover {
          border-color: #22d3ee;
          transform: translateY(-5px);
        }

        .contact-box {
          text-align: center;
        }

        .contact-box h3,
        .recommendation h3 {
          color: #22d3ee;
          margin-bottom: 10px;
        }

        footer {
          padding: 30px;
          text-align: center;
          border-top: 1px solid #1e293b;
          color: #94a3b8;
        }

        @media (max-width: 768px) {
          .hero-text h1 {
            font-size: 42px;
          }

          .hero-content {
            flex-direction: column;
            text-align: center;
          }

          .buttons {
            justify-content: center;
          }
        }
      `}</style>

      <div
        onContextMenu={disableActions}
        onCopy={disableActions}
        onKeyDown={handleKeyDown}
        tabIndex="0"
      >
        <div className="background-animation">
          <div className="circle"></div>
          <div className="circle"></div>
          <div className="circle"></div>
        </div>

        <div className="bird bird1">🕊️</div>
        <div className="bird bird2">🦅</div>
        <div className="bird bird3">🕊️</div>
        <div className="bird bird4">🦅</div>
        <div className="bird bird5">🕊️</div>

        <section className="hero">
          <div className="container hero-content">
            <div className="hero-text">
              <div className="subtitle">Senior BI & Analytics Consultant</div>

              <h1>Sachin Kadam</h1>

              <p>
                Senior Principal Consultant with 9.9+ years of experience in
                TIBCO Spotfire, Power BI, AI/ML, Python, SQL, and enterprise analytics solutions.
              </p>

              <div className="buttons">
                <a
                  href="https://www.linkedin.com/in/iim-nagpur/details/recommendations/"
                  target="_blank"
                  rel="noreferrer"
                  className="btn btn-primary"
                >
                  ⭐ Recommendations
                </a>

                <a href="#contact" className="btn btn-primary">
                  Contact Me
                </a>

                <a
                  href="https://www.linkedin.com/in/iim-nagpur/"
                  target="_blank"
                  rel="noreferrer"
                  className="btn btn-outline"
                >
                  🔗 LinkedIn
                </a>

                <a
                  href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Meeting+with+Sachin+Kadam&dates=20260510T093000Z/20260510T103000Z&details=Discussion+regarding+Business+Intelligence,+Analytics,+TIBCO+Spotfire,+Power+BI,+AI%2FML,+Dashboard+Development,+and+Enterprise+Consulting.&location=Google+Meet&add=sachinkadam313@gmail.com"
                  target="_blank"
                  rel="noreferrer"
                  className="btn btn-meeting"
                >
                  📅 Schedule Meeting
                </a>
              </div>
            </div>

            <div className="profile-box">SK</div>
          </div>
        </section>

        <section className="section-dark">
          <div className="container">
            <h2 className="section-title">Professional Highlights</h2>

            <div className="skills-grid">
              <div className="skill">9.9+ Years Enterprise BI Experience</div>
              <div className="skill">60+ Enterprise Dashboards Delivered</div>
              <div className="skill">Senior Principal Consultant at Virtana</div>
              <div className="skill">Expert in TIBCO Spotfire & Power BI</div>
              <div className="skill">AI/ML & Data Science Specialist</div>
              <div className="skill">Worked with Pfizer, Amgen, Merck & Sanofi</div>
              <div className="skill">FDA Reporting & Pharmacovigilance Analytics</div>
              <div className="skill">Cloud & On-Premise Analytics Solutions</div>
            </div>
          </div>
        </section>

        <section className="section-dark">
          <div className="container">
            <h2 className="section-title">Education</h2>

            <div className="contact-grid">
              <div className="card">
                <h3>Executive Program</h3>
                <p>IIM Nagpur - Project Management & Leadership</p>
              </div>

              <div className="card">
                <h3>Master of Computer Applications</h3>
                <p>Savitribai Phule Pune University</p>
              </div>

              <div className="card">
                <h3>Bachelor of Computer Science</h3>
                <p>Savitribai Phule Pune University</p>
              </div>
            </div>
          </div>
        </section>

        <section className="section-dark">
          <div className="container">
            <h2 className="section-title">Technical Skills</h2>

            <div className="skills-grid">
              <div className="skill">TIBCO Spotfire</div>
              <div className="skill">Power BI</div>
              <div className="skill">IBM Cognos</div>
              <div className="skill">Python</div>
              <div className="skill">SQL & Snowflake</div>
              <div className="skill">Oracle & PostgreSQL</div>
              <div className="skill">AI & Machine Learning</div>
              <div className="skill">Dashboard Optimization</div>
            </div>
          </div>
        </section>

        <section className="section-dark">
          <div className="container">
            <h2 className="section-title">Contact</h2>

            <div className="contact-grid">
              <div className="card contact-box">
                <h3>Email</h3>
                <p>sachinkadam313@gmail.com</p>
              </div>

              <div className="card contact-box">
                <h3>Location</h3>
                <p>Pune, Maharashtra, India</p>
              </div>
            </div>
          </div>
        </section>

        <footer>
          © 2026 Sachin Kadam • Portfolio Website
        </footer>
      </div>
    </>
  );
}