import React from 'react';

export const SnowDriftDiagram: 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>

            {/* Structure - High Roof / Wall */}
            <polyline points="20,100 80,100 80,40" fill="none" stroke="black" strokeWidth="2" />

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

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

            {/* Arrows for Balanced */}
            <g transform="translate(0, 5)">
                <line x1="300" y1="80" x2="300" y2="95" stroke="black" markerEnd="url(#arrow)" />
                <line x1="320" y1="80" x2="320" y2="95" stroke="black" markerEnd="url(#arrow)" />
                <line x1="340" y1="80" x2="340" y2="95" stroke="black" markerEnd="url(#arrow)" />
                <line x1="360" y1="80" x2="360" y2="95" stroke="black" markerEnd="url(#arrow)" />
                <text x="330" y="75" fontSize="10" textAnchor="middle">Balanced Snow Load</text>
            </g>

            {/* Snow - Drift Triangle */}
            {/* hd = 40 units high (starts at 85, goes to 45). w = 150 units wide (starts 80, goes to 230) */}
            <path d="M80,85 L230,85 L80,45 Z" fill="url(#snowHatch)" stroke="black" strokeWidth="1" />
            <text x="130" y="60" fontSize="10" fill="#444">Surcharge Load</text>
            <text x="130" y="72" fontSize="10" fill="#444">Due to Drifting</text>

            {/* Dimensions Left */}
            {/* h */}
            <line x1="10" y1="100" x2="10" y2="40" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="5" y="70" fontSize="12">h</text>
            <line x1="20" y1="100" x2="10" y2="100" stroke="black" strokeWidth="0.5" />
            <line x1="80" y1="40" x2="10" y2="40" stroke="black" strokeWidth="0.5" />

            {/* hc (clear height) */}
            <line x1="30" y1="85" x2="30" y2="40" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="25" y="60" fontSize="12" textAnchor="end">hc</text>
            <line x1="80" y1="85" x2="30" y2="85" stroke="black" strokeWidth="0.5" />

            {/* hd (drift height) */}
            <line x1="50" y1="85" x2="50" y2="45" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="45" y="65" fontSize="12" textAnchor="end">hd</text>
            <line x1="80" y1="45" x2="50" y2="45" stroke="black" strokeWidth="0.5" />

            {/* pd (pressure) arrow down on drift */}
            <line x1="70" y1="65" x2="70" y2="75" stroke="black" markerEnd="url(#arrow)" />
            <text x="65" y="75" fontSize="12" textAnchor="end">pd</text>

            {/* hb (balanced height) */}
            <line x1="60" y1="100" x2="60" y2="85" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="55" y="95" fontSize="12" textAnchor="end">hb</text>


            {/* Dimensions Bottom */}
            {/* w (drift width) */}
            <line x1="80" y1="110" x2="230" y2="110" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="155" y="125" fontSize="12" textAnchor="middle">w</text>
            <line x1="80" y1="100" x2="80" y2="115" stroke="black" strokeWidth="0.5" />
            <line x1="230" y1="85" x2="230" y2="115" stroke="black" strokeWidth="0.5" />

            {/* Lu (fetch) */}
            <line x1="80" y1="135" x2="380" y2="135" stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
            <text x="230" y="150" fontSize="12" textAnchor="middle">Lu</text>
            <line x1="80" y1="110" x2="80" y2="140" stroke="black" strokeWidth="0.5" />
            <line x1="380" y1="100" x2="380" y2="140" stroke="black" strokeWidth="0.5" />
            <text x="390" y="130" fontSize="10" fill="blue">Note: If bottom of projection is at least 2 feet</text>
            <text x="390" y="142" fontSize="10" fill="blue">above hb then snow drift is not required.</text>

        </svg>
    );
};