+ {/* Map Controls */}
+ {editable && (
+
+
+ {!isDrawing ? (
+
+ ) : (
+
+
+
+
+ )}
+
+
+ {selectedSection && (
+
+
{selectedSection.name}
+
+ {Math.round(selectedSection.area).toLocaleString()} sq ft
+
+ {selectedSection.grassType && (
+
+ Grass: {selectedSection.grassType}
+
+ )}
+ {selectedSection.soilType && (
+
+ Soil: {selectedSection.soilType}
+
+ )}
+
+
+ )}
+
+ )}
+
+ {/* Section Creation Form Modal */}
+ {showSectionForm && (
+
+
+
+ New Lawn Section
+
+
+
+
+
+ setSectionName(e.target.value)}
+ className="input"
+ placeholder="e.g., Front Yard, Back Lawn"
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Area: {Math.round(calculatePolygonArea(currentPolygon)).toLocaleString()} sq ft
+
+
+ {currentPolygon.length} points drawn
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Map */}
+
+
+
+ {/* Satellite imagery option */}
+
+
+ {/* Drawing handler */}
+
+
+ {/* Property marker */}
+ {property && property.latitude && property.longitude && (
+
+ )}
+
+ {/* Existing sections */}
+ {sections.map((section) => {
+ if (!section.polygonData?.coordinates?.[0]) return null;
+
+ const coordinates = section.polygonData.coordinates[0].map(([lng, lat]) => [lat, lng]);
+ const isSelected = selectedSection?.id === section.id;
+
+ return (
+ handleSectionClick(section)
+ }}
+ />
+ );
+ })}
+
+ {/* Current polygon being drawn */}
+ {currentPolygon.length > 0 && (
+ <>
+ {/* Show markers for each point */}
+ {currentPolygon.map((point, index) => (
+
+ )}
+
+ )}
+
+
+ {/* Drawing instructions */}
+ {isDrawing && (
+
+
+ Drawing Mode:
+
+
+ Click to add points. Press Escape or
+ click "Finish" when done.
+
+
+ Need at least 3 points to create a section.
+
+
+ )}
+
+ {/* Section stats */}
+ {sections.length > 0 && !isDrawing && (
+
+
+ {sections.length} Section{sections.length !== 1 ? 's' : ''}
+
+
+ Total: {sections.reduce((sum, section) => sum + (section.area || 0), 0).toLocaleString()} sq ft
+
+
+ )}
+