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

interface Props {
    isOpen: boolean;
    onClose: () => void;
}

const AnalysisHelp: React.FC<Props> = ({ isOpen, onClose }) => {
    if (!isOpen) return null;

    return (
        <div className="analysis-help-panel">
            <div className="help-header">
                <h3>🔍 Analysis Guide</h3>
                <button className="help-close" onClick={onClose}>×</button>
            </div>
            
            <div className="help-scroll">
                <section className="help-section">
                    <h4>🖱️ Smart Selection</h4>
                    <p>Drag an area on the map to batch select streams. 
                        <strong> Red bubbles</strong> are Hot streams (waste heat), 
                        <strong> Blue bubbles</strong> are Cold streams (heat demand).
                    </p>
                </section>

                <section className="help-section">
                    <h4>📂 Scenarios</h4>
                    <p>Save different project versions (e.g., "Night Shift" vs "Day Shift") as Scenarios to compare their energy performance side-by-side.</p>
                </section>

                <section className="help-section">
                    <h4>📉 Composite Curves</h4>
                    <p>The <strong>horizontal overlap</strong> between the Hot and Cold lines represents the heat we can recover. The remaining gaps show the external energy we still need to pay for.</p>
                </section>

                <section className="help-section">
                    <h4>⛰️ Grand Composite Curve</h4>
                    <p>Identifies the "Pinch Point" (the bottleneck). Pockets in the curve show where heat can be swapped internally without needing a heat pump.</p>
                </section>

                <section className="help-section">
                    <h4>⚡ Heat Pump Integration</h4>
                    <p>The system automatically selects the highest-efficiency heat pump for your temperatures. Higher <strong>COP</strong> values mean better electricity-to-heat conversion.</p>
                </section>

                <section className="help-section">
                    <h4>📈 Performance Metrics</h4>
                    <p><strong>Heating Savings:</strong> The percentage of energy saved compared to your current status quo. Aim for high recovery first!</p>
                </section>

                <div className="help-footer">
                    <p>✨ <em>Tip: Use the "Report" button to generate a full PDF-ready dashboard with all your interactive charts.</em></p>
                </div>
            </div>
        </div>
    );
};

export default AnalysisHelp;