import React from 'react';
import transverseImg from '../../../assets/wind_normal_to_ridge.png';
import longitudinalImg from '../../../assets/wind_parallel_to_ridge.png';

export const MwfrsZoneDiagrams: React.FC = () => {
    return (
        <div className="card" style={{ padding: '20px', marginTop: '20px', background: '#e0f2f1' }}>
            {/* Header */}
            <div style={{
                fontSize: '1.1em',
                fontWeight: 'bold',
                textDecoration: 'underline',
                marginBottom: '15px'
            }}>
                ASCE 7-98 & ASCE 7-10 (& later) - MWFRS wind pressure zones
            </div>

            {/* Content Grid */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '40px' }}>

                {/* Transverse Direction */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <img
                        src={transverseImg}
                        alt="Transverse Direction"
                        style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ccc', background: 'white' }}
                    />
                    <div style={{
                        marginTop: '10px',
                        fontWeight: 'bold',
                        fontSize: '1.1em',
                        borderBottom: '2px solid #555',
                        paddingBottom: '2px',
                        width: '100%',
                        textAlign: 'center'
                    }}>
                        Transverse Direction
                    </div>
                </div>

                {/* Longitudinal Direction */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <img
                        src={longitudinalImg}
                        alt="Longitudinal Direction"
                        style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ccc', background: 'white' }}
                    />
                    <div style={{
                        marginTop: '10px',
                        fontWeight: 'bold',
                        fontSize: '1.1em',
                        borderBottom: '2px solid #555',
                        paddingBottom: '2px',
                        width: '100%',
                        textAlign: 'center'
                    }}>
                        Longitudinal Direction
                    </div>
                </div>
            </div>

            {/* Footer Note */}
            <div style={{ marginTop: '15px', fontSize: '0.9em', color: '#333' }}>
                <strong>NOTE:</strong> Torsional loads are 25% of zones 1 - 4. See code for loading diagram.
                <br />
                <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 style={{
                marginTop: '10px',
                fontSize: '1.1em',
                fontWeight: 'bold',
                textDecoration: 'underline'
            }}>
                ASCE 7-02 and ASCE 7-05 - MWFRS wind pressure zones
            </div>
        </div>
    );
};