import React from 'react';

export const MwfrsLowRiseDiagrams: React.FC = () => {
    // Styles
    const strokeStyle = { stroke: 'black', strokeWidth: 1.5, fill: 'none' };
    const arrowStyle = { stroke: 'black', strokeWidth: 1.5, markerEnd: 'url(#arrowhead)' };
    const textStyle = { fontSize: '10px', textAnchor: 'middle' as const, layoutEffects: 'font-weight: bold' };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', alignItems: 'center' }}>
            <svg width="300" height="320" viewBox="0 0 300 320">
                <defs>
                    <marker id="arrowhead" markerWidth="6" markerHeight="4" refX="6" refY="2" orient="auto">
                        <polygon points="0 0, 6 2, 0 4" fill="black" />
                    </marker>
                </defs>

                {/* --- TRANSVERSE ELEVATION (Top) --- */}
                <g transform="translate(0, 0)">
                    {/* Title */}
                    <text x="150" y="15" style={{ fontSize: '12px', fontWeight: 'bold', textAnchor: 'middle', textDecoration: 'underline' }}>TRANSVERSE ELEVATION</text>

                    {/* Building Outline */}
                    {/* Roof */}
                    <path d="M50 80 L150 40 L250 80" style={strokeStyle} />
                    {/* Walls */}
                    <line x1="50" y1="80" x2="50" y2="140" style={strokeStyle} />
                    <line x1="250" y1="80" x2="250" y2="140" style={strokeStyle} />
                    {/* Gound */}
                    <line x1="40" y1="140" x2="260" y2="140" style={strokeStyle} />
                    {/* Hatching for ground */}
                    <line x1="40" y1="140" x2="35" y2="145" style={{ stroke: 'black', strokeWidth: 0.5 }} />
                    <line x1="50" y1="140" x2="45" y2="145" style={{ stroke: 'black', strokeWidth: 0.5 }} />
                    <line x1="260" y1="140" x2="255" y2="145" style={{ stroke: 'black', strokeWidth: 0.5 }} />

                    {/* Load Arrows - Windward Wall */}
                    <line x1="20" y1="90" x2="45" y2="90" style={arrowStyle} />
                    <line x1="20" y1="110" x2="45" y2="110" style={arrowStyle} />
                    <line x1="20" y1="130" x2="45" y2="130" style={arrowStyle} />

                    {/* Load Arrows - Leeward Wall */}
                    <line x1="255" y1="90" x2="280" y2="90" style={arrowStyle} />
                    {/* (Actually suction usually points away, but diagram implies loads. 
                        Screenshot arrows point: 
                        Windward Wall -> IN
                        Leeward Wall -> OUT (Away)
                        Roof -> UP/DOWN
                    ) */}
                    {/* Fix Leeward: Start at wall, point out */}
                    <line x1="250" y1="90" x2="280" y2="90" style={arrowStyle} />
                    <line x1="250" y1="110" x2="280" y2="110" style={arrowStyle} />
                    <line x1="250" y1="130" x2="280" y2="130" style={arrowStyle} />

                    {/* Windward Overhang Arrow */}
                    <line x1="30" y1="80" x2="30" y2="60" style={arrowStyle} /> {/* Upward */}

                    {/* Roof Pressures (Vertical Arrows) */}
                    {/* Windward Roof */}
                    <line x1="75" y1="50" x2="75" y2="30" style={arrowStyle} />
                    <line x1="100" y1="60" x2="100" y2="40" style={arrowStyle} />
                    <line x1="125" y1="70" x2="125" y2="50" style={arrowStyle} />

                    {/* Leeward Roof */}
                    <line x1="175" y1="50" x2="175" y2="30" style={arrowStyle} />
                    <line x1="200" y1="60" x2="200" y2="40" style={arrowStyle} />
                    <line x1="225" y1="70" x2="225" y2="50" style={arrowStyle} />

                    {/* Labels */}
                    <text x="150" y="155" style={textStyle}>B/2 or ALL ZONES</text>
                    <line x1="150" y1="80" x2="150" y2="140" style={{ stroke: 'black', strokeDasharray: '4', strokeWidth: 1 }} />

                    <text x="10" y="115" style={{ ...textStyle, writingMode: 'vertical-rl' }}>WALL</text>
                    <text x="100" y="30" style={textStyle}>WINDWARD ROOF</text>
                    <text x="200" y="30" style={textStyle}>LEEWARD ROOF</text>
                </g>


                {/* --- LONGITUDINAL ELEVATION (Bottom) --- */}
                <g transform="translate(0, 160)">
                    {/* Title */}
                    <text x="150" y="15" style={{ fontSize: '12px', fontWeight: 'bold', textAnchor: 'middle', textDecoration: 'underline' }}>LONGITUDINAL ELEVATION</text>

                    {/* Building Outline (Flat view for Longitudinal) */}
                    <rect x="50" y="40" width="200" height="100" style={strokeStyle} />
                    {/* Gound */}
                    <line x1="40" y1="140" x2="260" y2="140" style={strokeStyle} />

                    {/* Mid Line */}
                    <line x1="150" y1="40" x2="150" y2="140" style={{ stroke: 'black', strokeDasharray: '4', strokeWidth: 1 }} />

                    {/* Load Arrows */}
                    {/* Left (Windward) */}
                    <line x1="20" y1="60" x2="45" y2="60" style={arrowStyle} />
                    <line x1="20" y1="90" x2="45" y2="90" style={arrowStyle} />
                    <line x1="20" y1="120" x2="45" y2="120" style={arrowStyle} />

                    {/* Right (Leeward) - pointing away */}
                    <line x1="250" y1="60" x2="280" y2="60" style={arrowStyle} />
                    <line x1="250" y1="90" x2="280" y2="90" style={arrowStyle} />
                    <line x1="250" y1="120" x2="280" y2="120" style={arrowStyle} />

                    {/* Roof Arrows (Upward/Downward on top edge) */}
                    <line x1="75" y1="35" x2="75" y2="15" style={arrowStyle} />
                    <line x1="125" y1="35" x2="125" y2="15" style={arrowStyle} />
                    <line x1="175" y1="35" x2="175" y2="15" style={arrowStyle} />
                    <line x1="225" y1="35" x2="225" y2="15" style={arrowStyle} />

                    {/* Labels */}
                    <text x="150" y="155" style={textStyle}>L/2 or ALL ZONES</text>
                    <text x="100" y="30" style={textStyle}>WINDWARD ROOF</text>
                    <text x="200" y="30" style={textStyle}>LEEWARD ROOF</text>
                </g>
            </svg>
        </div>
    );
};