/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================
// Boardwalk House — icon set (line, brand-true)
// All icons share stroke-width 1.4, no fills.
// ============================================================

const Icon = ({ children, size = 24, ...props }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.4"
       strokeLinecap="round" strokeLinejoin="round" {...props}>
    {children}
  </svg>
);

const IconWaves = (p) => (
  <Icon {...p}>
    <path d="M2 9c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2" />
    <path d="M2 14c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2" />
    <path d="M2 19c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2" />
  </Icon>
);

const IconSunrise = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="13" r="3.5" />
    <path d="M2 19h20" />
    <path d="M5 16l-1.5 1.5" />
    <path d="M19 16l1.5 1.5" />
    <path d="M12 7V4" />
    <path d="M2 13c2 0 2-1.5 4-1.5s2 1.5 4 1.5" />
  </Icon>
);

const IconColumn = (p) => (
  <Icon {...p}>
    <path d="M4 5h16" />
    <path d="M5 5v14h14V5" />
    <path d="M9 7v10" />
    <path d="M12 7v10" />
    <path d="M15 7v10" />
    <path d="M3 19h18" />
  </Icon>
);

const IconAnchor = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="5" r="2" />
    <path d="M12 7v14" />
    <path d="M5 13a7 7 0 0 0 14 0" />
    <path d="M9 11H15" />
  </Icon>
);

const IconShield = (p) => (
  <Icon {...p}>
    <path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" />
    <path d="M9 12l2 2 4-4" />
  </Icon>
);

const IconKey = (p) => (
  <Icon {...p}>
    <circle cx="8" cy="14" r="4" />
    <path d="M11 12l9-9" />
    <path d="M17 6l3 3" />
  </Icon>
);

const IconBuilding = (p) => (
  <Icon {...p}>
    <path d="M5 21V5l7-2 7 2v16" />
    <path d="M3 21h18" />
    <path d="M9 9h2M13 9h2M9 13h2M13 13h2M9 17h2M13 17h2" />
  </Icon>
);

const IconBed = (p) => (
  <Icon {...p}>
    <path d="M3 18V8" />
    <path d="M21 18v-5a3 3 0 0 0-3-3H3" />
    <path d="M3 14h18" />
    <path d="M3 18v3" />
    <path d="M21 18v3" />
    <circle cx="7.5" cy="11.5" r="1.5" />
  </Icon>
);

const IconParking = (p) => (
  <Icon {...p}>
    <rect x="3" y="3" width="18" height="18" rx="1" />
    <path d="M9 17V7h4a3 3 0 0 1 0 6H9" />
  </Icon>
);

const IconPickleball = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <circle cx="12" cy="12" r="1" />
    <circle cx="9" cy="9" r="0.5" />
    <circle cx="15" cy="9" r="0.5" />
    <circle cx="9" cy="15" r="0.5" />
    <circle cx="15" cy="15" r="0.5" />
  </Icon>
);

const IconDumbbell = (p) => (
  <Icon {...p}>
    <path d="M3 9v6" />
    <path d="M6 7v10" />
    <path d="M21 9v6" />
    <path d="M18 7v10" />
    <path d="M6 12h12" />
  </Icon>
);

const IconBike = (p) => (
  <Icon {...p}>
    <circle cx="6" cy="17" r="3.5" />
    <circle cx="18" cy="17" r="3.5" />
    <path d="M6 17l4-7h5l3 7" />
    <path d="M9 6h2l1 4" />
  </Icon>
);

const IconPaw = (p) => (
  <Icon {...p}>
    <circle cx="6.5" cy="9" r="1.5" />
    <circle cx="17.5" cy="9" r="1.5" />
    <circle cx="9.5" cy="5.5" r="1.5" />
    <circle cx="14.5" cy="5.5" r="1.5" />
    <path d="M12 11c-3 0-5 2.5-5 5 0 2 1.5 3 3 3 1 0 1.5-.5 2-.5s1 .5 2 .5c1.5 0 3-1 3-3 0-2.5-2-5-5-5z" />
  </Icon>
);

const IconPhone = (p) => (
  <Icon {...p}>
    <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />
  </Icon>
);

const IconMail = (p) => (
  <Icon {...p}>
    <rect x="3" y="5" width="18" height="14" rx="1" />
    <path d="M3 7l9 6 9-6" />
  </Icon>
);

const IconArrow = (p) => (
  <Icon {...p}>
    <path d="M5 12h14" />
    <path d="M13 6l6 6-6 6" />
  </Icon>
);

const IconClose = (p) => (
  <Icon {...p}>
    <path d="M6 6l12 12" />
    <path d="M18 6L6 18" />
  </Icon>
);

const IconCheck = (p) => (
  <Icon {...p}>
    <path d="M5 12l5 5 9-12" />
  </Icon>
);

const IconLighthouse = (p) => (
  <Icon {...p}>
    <path d="M10 21l1-9h2l1 9z" />
    <rect x="9" y="8" width="6" height="4" />
    <path d="M10 8V6h4v2" />
    <circle cx="12" cy="4" r="1" />
    <path d="M6 10l3-1M18 10l-3-1M6 13l3-1M18 13l-3-1" />
  </Icon>
);

const IconCalendar = (p) => (
  <Icon {...p}>
    <rect x="3" y="5" width="18" height="16" rx="1" />
    <path d="M3 9h18" />
    <path d="M8 3v4M16 3v4" />
  </Icon>
);

const IconMapPin = (p) => (
  <Icon {...p}>
    <path d="M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z" />
    <circle cx="12" cy="9" r="2.5" />
  </Icon>
);

// Wave divider as inline SVG
const WaveDivider = ({ onDark = false, width = 56 }) => (
  <svg className={"wave " + (onDark ? "on-dark" : "")} viewBox="0 0 56 12" width={width} height={12} preserveAspectRatio="none">
    <path d="M0 6 C 7 0, 14 12, 21 6 S 35 0, 42 6 S 56 12, 56 6" />
    <path d="M0 9 C 7 3, 14 15, 21 9 S 35 3, 42 9 S 56 15, 56 9" transform="translate(0 -3)" />
  </svg>
);

// Brand mark — stylized building silhouette in navy/bronze, matches brand guide
const BrandMark = ({ size = 44 }) => (
  <svg width={size} height={size * 56/44} viewBox="0 0 44 56" fill="none">
    {/* Building body */}
    <rect x="10" y="14" width="24" height="34" fill="#0D1B2A" />
    {/* Roof crown */}
    <rect x="12" y="10" width="20" height="4" fill="#0D1B2A" />
    <rect x="16" y="6" width="12" height="4" fill="#0D1B2A" />
    {/* Windows grid (cream) */}
    {[18, 22, 26, 30, 34, 38, 42].map((y, i) => (
      <g key={i}>
        <rect x="13" y={y} width="3" height="2.5" fill="#F5F2ED" opacity="0.85" />
        <rect x="18" y={y} width="3" height="2.5" fill="#F5F2ED" opacity="0.85" />
        <rect x="23" y={y} width="3" height="2.5" fill="#F5F2ED" opacity="0.85" />
        <rect x="28" y={y} width="3" height="2.5" fill="#F5F2ED" opacity="0.85" />
      </g>
    ))}
    {/* Bronze accent line */}
    <rect x="10" y="13" width="24" height="1" fill="#8B6F4D" />
    {/* Wave at bottom */}
    <path d="M2 53 C 8 50, 14 56, 22 53 S 36 50, 42 53" stroke="#8B6F4D" strokeWidth="1" fill="none" />
    <path d="M2 50 C 8 47, 14 53, 22 50 S 36 47, 42 50" stroke="#8B6F4D" strokeWidth="1" fill="none" opacity="0.55" />
  </svg>
);

// Logo lockup (full)
const LogoLockup = ({ light = false }) => (
  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
    <BrandMark size={56} />
    <div style={{ textAlign: "center", lineHeight: 1 }}>
      <div style={{
        fontFamily: "var(--serif)",
        fontSize: 38,
        fontWeight: 500,
        color: light ? "var(--linen-2)" : "var(--navy)",
        letterSpacing: "0.005em"
      }}>
        Boardwalk
      </div>
      <div style={{
        fontFamily: "var(--serif)",
        fontSize: 32,
        fontWeight: 500,
        color: light ? "var(--linen-2)" : "var(--navy)",
        marginTop: 2,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 12
      }}>
        <span style={{ width: 24, height: 1, background: light ? "var(--bronze-soft)" : "var(--bronze)" }} />
        House
        <span style={{ width: 24, height: 1, background: light ? "var(--bronze-soft)" : "var(--bronze)" }} />
      </div>
      <div style={{
        fontFamily: "var(--sans)",
        fontSize: 11,
        letterSpacing: "0.32em",
        textTransform: "uppercase",
        color: light ? "var(--bronze-soft)" : "var(--misty)",
        marginTop: 12,
        fontWeight: 500
      }}>
        Atlantic City
      </div>
      <WaveDivider onDark={light} width={40} />
      <div style={{
        fontFamily: "var(--sans)",
        fontSize: 10,
        letterSpacing: "0.28em",
        textTransform: "uppercase",
        color: light ? "rgba(245,242,237,0.65)" : "var(--muted)",
        marginTop: 4
      }}>
        Oceanfront Apartments
      </div>
    </div>
  </div>
);

// Export to global
Object.assign(window, {
  Icon, IconWaves, IconSunrise, IconColumn, IconAnchor, IconShield,
  IconKey, IconBuilding, IconBed, IconParking, IconPickleball,
  IconDumbbell, IconBike, IconPaw, IconPhone, IconMail, IconArrow,
  IconClose, IconCheck, IconLighthouse, IconCalendar, IconMapPin,
  WaveDivider, BrandMark, LogoLockup
});
