import React from 'react';

export const LeewardDriftDiagram: React.FC = () => {
    return (
        <svg viewBox="0 0 400 200" width="100%" height="auto" style={{ maxWidth: '400px', border: '1px solid #eee', background: 'white' }}>
            <defs>
                <marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
                    <path d="M0,0 L6,3 L0,6 L0,0" fill="black" />
                </marker>
                <pattern id="snowHatch" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
                    <circle cx="1" cy="1" r="0.5" fill="#aaa" />
                </pattern>
            </defs>

            {/* High Roof */}
            <polyline points="20,100 150,100 150,40" fill="none" stroke="black" strokeWidth="2" />
            <line x1="20" y1="40" x2="150" y2="40" stroke="black" strokeWidth="2" />

            {/* Low Roof */}
            <line x1="150" y1="100" x2="380" y2="100" stroke="black" strokeWidth="2" />

            {/* Snow - Balanced on Low Roof */}
            <rect x="150" y="85" width="230" height="15" fill="#e0f7fa" stroke="none" />
            <line x1="150" y1="85" x2="380" y2="85" stroke="black" strokeWidth="0.5" />

            {/* Drift Triangle */}
            {/* hd = 40 units high (starts at 85, goes to 45). w = 150 units wide (starts 150, goes to 300) */}
            <path d="M150,85 L300,85 L150,45 Z" fill="url(#snowHatch)" stroke="black" strokeWidth="1" />
            <text x="200" y="60" fontSize="10" fill="#444">Surcharge Load</text>
            <text x="200" y="72" fontSize="10" fill="#444">Due to Drifting</text>

            {/* Dimensions */}
            {/* h */}
            <line x1="140" y1="100" x2="140" y2="40" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="135" y="70" fontSize="12" textAnchor="end">h</text>

            {/* Lu */}
            <line x1="20" y1="30" x2="150" y2="30" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="85" y="25" fontSize="12" textAnchor="middle">Lu</text>

            {/* hd, hb, hc labels */}
            <text x="180" y="55" fontSize="12">hd</text>
            {/* pd arrow */}
            <line x1="160" y1="65" x2="160" y2="75" stroke="black" markerEnd="url(#arrow)" />
            <text x="155" y="75" fontSize="12" textAnchor="end">pd</text>

            <text x="210" y="120" fontSize="12" textAnchor="middle">W</text>
            <line x1="150" y1="105" x2="300" y2="105" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />

        </svg>
    );
};

export const SlidingSnowDiagram: React.FC = () => {
    return (
        <svg viewBox="0 0 400 200" width="100%" height="auto" style={{ maxWidth: '400px', border: '1px solid #eee', background: 'white' }}>
            <defs>
                <marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
                    <path d="M0,0 L6,3 L0,6 L0,0" fill="black" />
                </marker>
            </defs>

            {/* Upper Roof (Sloped) */}
            <path d="M50,120 L150,80 L150,150" fill="none" stroke="black" strokeWidth="2" />
            <text x="100" y="100" fontSize="12">Upper Roof</text>

            {/* W dimension for upper roof */}
            <line x1="100" y1="70" x2="150" y2="70" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="125" y="65" fontSize="12">W</text>

            {/* Lower Roof */}
            <line x1="150" y1="150" x2="350" y2="150" stroke="black" strokeWidth="2" />
            <text x="300" y="170" fontSize="12">Lower Roof</text>

            {/* Sliding Snow Mass */}
            <rect x="150" y="135" width="60" height="15" fill="#ddd" stroke="black" />
            <text x="180" y="130" fontSize="10" textAnchor="middle">15'</text>
            <line x1="150" y1="125" x2="210" y2="125" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />

            {/* Sliding Snow Load Arrows */}
            <line x1="160" y1="135" x2="160" y2="150" stroke="black" markerEnd="url(#arrow)" />
            <line x1="180" y1="135" x2="180" y2="150" stroke="black" markerEnd="url(#arrow)" />
            <line x1="200" y1="135" x2="200" y2="150" stroke="black" markerEnd="url(#arrow)" />

            <text x="100" y="140" fontSize="10" textAnchor="end">Sliding</text>
            <text x="100" y="152" fontSize="10" textAnchor="end">Snow Load</text>

            {/* Balanced Snow Load on Lower */}
            <line x1="250" y1="140" x2="250" y2="150" stroke="black" markerEnd="url(#arrow)" />
            <text x="240" y="145" fontSize="10" textAnchor="end">Balanced</text>
        </svg>
    );
};