/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import './Landing.css';

const Landing = ({ onNavigate }) => {
  return (
    <div className="sushruta-landing">
      {/* Background glowing orbs */}
      <div className="orb orb-blue"></div>
      <div className="orb orb-purple"></div>

      <header className="sushruta-header">
        <h1 className="sushruta-title">
          Sushruta
          <span className="title-glow"></span>
        </h1>
        <p className="sushruta-tagline">Patient 360 — Powered by MedGemma</p>
      </header>

      <main className="sushruta-main">
        <div className="module-grid">
          {/* Card 1: Pre-Visit Intake */}
          <div 
            className="module-card card-previsit"
            onClick={() => onNavigate('previsit')}
            id="card-previsit-intake"
          >
            <div className="card-border-gradient"></div>
            <div className="card-inner">
              <div className="card-icon">📋</div>
              <h2 className="card-title">Pre-Visit Intake</h2>
              <p className="card-description">
                AI-powered patient interview simulation. Watch MedGemma conduct a pre-visit intake, gather clinical history, and automatically generate an intake report.
              </p>
              <div className="card-action">
                <span>Launch Intake</span>
                <span className="arrow">→</span>
              </div>
            </div>
          </div>

          {/* Card 2: Radiology Explainer */}
          <div 
            className="module-card card-radiology"
            onClick={() => onNavigate('radiology')}
            id="card-radiology-explainer"
          >
            <div className="card-border-gradient"></div>
            <div className="card-inner">
              <div className="card-icon">🩺</div>
              <h2 className="card-title">Radiology Explainer</h2>
              <p className="card-description">
                Explore radiology images and clinical reports. Select any sentence to receive an AI-powered plain-language explanation with localized image-pointing guidance.
              </p>
              <div className="card-action">
                <span>Launch Explainer</span>
                <span className="arrow">→</span>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="sushruta-footer">
        <div className="disclaimer-box">
          <strong>Disclaimer:</strong> This demonstration is for illustrative and developer exploration purposes only. It does not represent a finished, certified, or approved medical product. It is not intended to be used for diagnostic purposes or real clinical decision-making.
        </div>
        <p className="footer-credits">
          Built on Hugging Face Spaces using MedGemma and Gemma-3.
        </p>
      </footer>
    </div>
  );
};

export default Landing;