import React from 'react';

export const SolarPanelElevationDiagram: React.FC = () => {
    return (
        <svg viewBox="0 0 300 220" width="100%" height="auto" style={{ maxWidth: '300px', border: '1px solid #eee', background: '#e0f7fa' }}>
            <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>
                <marker id="arrow-start" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
                    <path d="M6,0 L0,3 L6,6 L6,0" fill="black" />
                </marker>
            </defs>

            {/* Ground/Roof Slope */}
            <line x1="20" y1="200" x2="280" y2="180" stroke="black" strokeWidth="1.5" />
            <text x="250" y="170" fontSize="10" textAnchor="middle">Roof Surface</text>
            <text x="260" y="195" fontSize="10">&theta;</text>
            {/* Horizontal Ref for Theta */}
            <line x1="200" y1="186" x2="280" y2="186" stroke="black" strokeDasharray="2,2" strokeWidth="1" />

            {/* Panel */}
            {/* Tilted rectangle. Center approx 120, 120 */}
            <g transform="translate(130, 130) rotate(-25)">
                <rect x="-40" y="-10" width="80" height="20" fill="none" stroke="black" strokeWidth="1.5" />

                {/* Pressure Vectors (Arrows pointing normal to panel) */}
                <g stroke="black" strokeWidth="1">
                    <line x1="-35" y1="-10" x2="-35" y2="-25" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
                    <line x1="-20" y1="-10" x2="-20" y2="-25" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
                    <line x1="-5" y1="-10" x2="-5" y2="-25" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
                    <line x1="10" y1="-10" x2="10" y2="-25" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
                    <line x1="25" y1="-10" x2="25" y2="-25" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
                </g>
                <text x="0" y="-30" fontSize="10" textAnchor="middle" transform="rotate(0)">+(GCrn)</text>

                {/* Lp Dimension */}
                <line x1="-40" y1="-35" x2="40" y2="-35" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
                <line x1="-40" y1="-10" x2="-40" y2="-40" stroke="black" strokeWidth="0.5" />
                <line x1="40" y1="-10" x2="40" y2="-40" stroke="black" strokeWidth="0.5" />
                <text x="0" y="-40" fontSize="10" textAnchor="middle">Lp</text>
            </g>

            {/* H1, H2 Dimensions */}
            {/* h1 approx x=150 */}
            <line x1="140" y1="140" x2="140" y2="190" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="150" y="170" fontSize="10">h1</text>

            {/* h2 approx x=80 */}
            <line x1="90" y1="120" x2="95" y2="195" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="80" y="160" fontSize="10">h2</text>

            {/* Omega Angle */}
            {/* Horizontal ref from panel bottom corner */}
            <line x1="165" y1="148" x2="120" y2="148" stroke="black" strokeWidth="0.5" />
            <text x="145" y="145" fontSize="10">&omega;</text>

            <text x="40" y="100" fontSize="12" fontWeight="bold">Solar Panel</text>
            <line x1="60" y1="105" x2="90" y2="125" stroke="black" markerEnd="url(#arrow)" />

            <text x="150" y="215" fontSize="12" fontWeight="bold" textAnchor="middle">SOLAR PANEL ELEVATION</text>
        </svg>
    );
};


export const SolarPanelRoofPlanDiagram: React.FC = () => {
    return (
        <svg viewBox="0 0 300 240" width="100%" height="auto" style={{ maxWidth: '350px', border: '1px solid #eee', background: '#e0f7fa' }}>
            <defs>
                <pattern id="diagonalHatch" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
                    <line x1="0" y1="0" x2="0" y2="4" style={{ stroke: 'black', strokeWidth: 1 }} />
                </pattern>
                <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>
                <marker id="arrow-start" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
                    <path d="M6,0 L0,3 L6,6 L6,0" fill="black" />
                </marker>
            </defs>

            {/* Dashed Zone Boundary */}
            <rect x="30" y="30" width="240" height="180" fill="none" stroke="black" strokeDasharray="4,4" />
            <text x="150" y="20" fontSize="10" textAnchor="middle">Edge of Adjacent Solar Array or Building Edge</text>
            <line x1="100" y1="22" x2="60" y2="28" stroke="black" markerEnd="url(#arrow)" strokeWidth="0.5" />

            {/* Panels Rows */}
            <g transform="translate(60, 50)">
                {/* Row 1 */}
                <rect x="0" y="0" width="180" height="20" fill="url(#diagonalHatch)" stroke="black" />
                <rect x="20" y="0" width="140" height="20" fill="#e0f7fa" stroke="black" /> {/* Inner clear part */}

                {/* Row 2 */}
                <rect x="0" y="40" width="180" height="20" fill="url(#diagonalHatch)" stroke="black" />
                <rect x="25" y="40" width="130" height="20" fill="#e0f7fa" stroke="black" />

                {/* Row 3 */}
                <rect x="0" y="80" width="180" height="20" fill="url(#diagonalHatch)" stroke="black" />
                <rect x="25" y="80" width="130" height="20" fill="#e0f7fa" stroke="black" />

                {/* Row 4 */}
                <rect x="0" y="120" width="180" height="20" fill="url(#diagonalHatch)" stroke="black" />
            </g>

            {/* Dimensions d1 */}
            {/* Top d1 */}
            <line x1="150" y1="30" x2="150" y2="50" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="160" y="45" fontSize="10">d1</text>

            {/* Side d1 */}
            <line x1="30" y1="100" x2="60" y2="100" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="45" y="95" fontSize="10">d1</text>
            <line x1="240" y1="100" x2="270" y2="100" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="255" y="95" fontSize="10">d1</text>

            {/* Bottom d1 */}
            <line x1="150" y1="190" x2="150" y2="210" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="160" y="205" fontSize="10">d1</text>

            {/* d2 gaps */}
            <line x1="120" y1="70" x2="120" y2="90" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="125" y="83" fontSize="10">d2</text>

            {/* 1.5 Lp label */}
            <text x="260" y="120" fontSize="10">1.5 Lp, Typ</text>
            <line x1="240" y1="115" x2="210" y2="105" stroke="black" markerEnd="url(#arrow)" />

            {/* Legend */}
            <g transform="translate(60, 220)">
                <rect x="0" y="0" width="15" height="10" fill="#e0f7fa" stroke="black" />
                <text x="20" y="8" fontSize="10">Non Exposed Solar Panels &gamma;E=1.0</text>

                <rect x="0" y="12" width="15" height="10" fill="url(#diagonalHatch)" stroke="black" />
                <text x="20" y="20" fontSize="10">Exposed Solar Panels &gamma;E=1.5</text>
            </g>

            <text x="150" y="238" fontSize="12" fontWeight="bold" textAnchor="middle">SOLAR PANEL ROOF PLAN</text>
        </svg>
    );
};

export const WindPressureZonesDiagram: React.FC = () => {
    return (
        <svg viewBox="0 0 350 180" width="100%" height="auto" style={{ maxWidth: '400px', border: '1px solid #eee', background: '#e0f7fa' }}>
            <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>
                <marker id="arrow-start" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
                    <path d="M6,0 L0,3 L6,6 L6,0" fill="black" />
                </marker>
            </defs>

            {/* Main Box */}
            <rect x="100" y="30" width="200" height="100" fill="none" stroke="black" strokeWidth="1.5" />

            {/* Zones */}
            {/* Corners (3) */}
            <rect x="100" y="30" width="30" height="30" fill="none" stroke="black" strokeDasharray="3,3" />
            <text x="115" y="50" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">③</text>

            <rect x="270" y="30" width="30" height="30" fill="none" stroke="black" strokeDasharray="3,3" />
            <text x="285" y="50" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">③</text>

            <rect x="100" y="100" width="30" height="30" fill="none" stroke="black" strokeDasharray="3,3" />
            <text x="115" y="120" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">③</text>

            <rect x="270" y="100" width="30" height="30" fill="none" stroke="black" strokeDasharray="3,3" />
            <text x="285" y="120" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">③</text>

            {/* Edges (2) */}
            <rect x="130" y="30" width="140" height="30" fill="none" stroke="none" />
            <line x1="130" y1="60" x2="270" y2="60" stroke="black" strokeDasharray="3,3" />
            <text x="200" y="50" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">②</text>

            <rect x="130" y="100" width="140" height="30" fill="none" stroke="none" />
            <line x1="130" y1="100" x2="270" y2="100" stroke="black" strokeDasharray="3,3" />
            <text x="200" y="120" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">②</text>

            <rect x="100" y="60" width="30" height="40" fill="none" stroke="none" />
            <line x1="130" y1="60" x2="130" y2="100" stroke="black" strokeDasharray="3,3" />
            <text x="115" y="85" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">②</text>

            <rect x="270" y="60" width="30" height="40" fill="none" stroke="none" />
            <line x1="270" y1="60" x2="270" y2="100" stroke="black" strokeDasharray="3,3" />
            <text x="285" y="85" fontSize="12" textAnchor="middle" fontWeight="bold" fill="#555">②</text>

            {/* Center (1) */}
            <text x="200" y="85" fontSize="16" textAnchor="middle" fontWeight="bold" fill="#555">①</text>

            {/* Dimensions */}
            {/* WL */}
            <line x1="100" y1="20" x2="300" y2="20" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="200" y="15" fontSize="12">W<tspan dy="3" fontSize="10">L</tspan></text>

            {/* Ws */}
            <line x1="90" y1="30" x2="90" y2="130" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="80" y="80" fontSize="12" transform="rotate(-90 80,80)">W<tspan dy="3" fontSize="10">S</tspan></text>

            {/* 2h */}
            <line x1="80" y1="30" x2="80" y2="60" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="70" y="50" fontSize="10" transform="rotate(-90 70,50)">2h</text>
            <line x1="100" y1="60" x2="80" y2="60" stroke="black" strokeWidth="0.5" />

            <line x1="80" y1="100" x2="80" y2="130" stroke="black" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
            <text x="70" y="120" fontSize="10" transform="rotate(-90 70,120)">2h</text>
            <line x1="100" y1="100" x2="80" y2="100" stroke="black" strokeWidth="0.5" />

            <text x="200" y="160" fontSize="12" fontWeight="bold" textAnchor="middle">WIND PRESSURE ZONES</text>
        </svg>
    );
};