import React from 'react';
import case1Img from '../../../assets/mwfrs_case_1.png';
import case2Img from '../../../assets/mwfrs_case_2.png';
import case3Img from '../../../assets/mwfrs_case_3.png';
import case4Img from '../../../assets/mwfrs_case_4.png';

export const MwfrsLowRiseCases: React.FC = () => {
    return (
        <div className="card" style={{ padding: '20px', marginTop: '20px', background: '#fff' }}>
            <div className="report-section-title" style={{ marginBottom: '15px', textDecoration: 'underline' }}>
                Wind Load Cases
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px', marginBottom: '20px' }}>
                {/* Case 1 */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <img src={case1Img} alt="Case 1 (or A)" style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ddd' }} />
                    <div style={{ fontWeight: 'bold', marginTop: '5px' }}>CASE 1 (or A)</div>
                </div>

                {/* Case 2 */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <img src={case2Img} alt="Case 2 (or B)" style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ddd' }} />
                    <div style={{ fontWeight: 'bold', marginTop: '5px' }}>CASE 2 (or B)</div>
                </div>

                {/* Case 3 */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <img src={case3Img} alt="Case 3 (TORSION)" style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ddd' }} />
                    <div style={{ fontWeight: 'bold', marginTop: '5px' }}>CASE 3 (TORSION)</div>
                </div>

                {/* Case 4 */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <img src={case4Img} alt="Case 4 (TORSION)" style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ddd' }} />
                    <div style={{ fontWeight: 'bold', marginTop: '5px' }}>CASE 4 (TORSION)</div>
                </div>
            </div>

            <div style={{ padding: '10px', background: '#e0f7fa', fontSize: '0.9em', borderLeft: '4px solid #00bcd4' }}>
                <div style={{ marginBottom: '5px' }}>
                    <strong>NOTE:</strong> Torsional loads are 25% of zones 1 - 6.
                </div>
                <div>
                    <strong>Exception:</strong> One story buildings h&lt;30' and 1 to 2 story buildings framed with light-frame construction or with flexible diaphragms need not be designed for the torsional load case.
                </div>
            </div>
        </div>
    );
};