const { useState, useEffect } = React;

// ------------- accent resolver -------------
function accentColor() {
  const a = window.TWEAKS.accent;
  if (a === 'navy')  return 'var(--navy-900)';
  if (a === 'brass') return '#A6823A';
  return 'var(--terracotta-600)';
}
function accentTint() {
  const a = window.TWEAKS.accent;
  if (a === 'navy')  return '#D9E1EC';
  if (a === 'brass') return '#EFE2C2';
  return 'var(--terracotta-100)';
}

// ------------- Top call bar (tweak: phone=bar) -------------
function TopCallBar() {
  return (
    <div style={{
      background: 'var(--navy-900)', color: 'var(--cream-50)',
      padding: '10px 0', borderBottom: '1px solid var(--navy-800)',
    }}>
      <div className="container" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 12,
      }}>
        <div style={{
          fontFamily: 'Inter', fontSize: 13, color: 'rgba(247,242,232,0.75)',
        }}>
          Attorneys, Mediators &amp; Conciliators · Gloucester, MA
        </div>
        <a href="tel:9783141699" style={{
          fontFamily: 'JetBrains Mono', fontWeight: 500, fontSize: 14,
          color: 'var(--cream-50)', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{
            display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
            background: accentColor(),
          }}></span>
          Call the firm — 978-314-1699
        </a>
      </div>
    </div>
  );
}

// ------------- Wordmark -------------
function Wordmark({ onClick, reversed }) {
  const ink = reversed ? 'var(--cream-50)' : 'var(--navy-900)';
  const accent = accentColor();
  return (
    <a onClick={onClick} style={{
      cursor: 'pointer', textDecoration: 'none', display: 'inline-flex',
      alignItems: 'baseline', gap: 10,
    }}>
      <span style={{
        fontFamily: 'Fraunces', fontWeight: 500, fontSize: 22, color: ink,
        letterSpacing: '-0.01em', fontVariationSettings: '"opsz" 36, "SOFT" 50',
      }}>
        Kiely <span style={{ color: accent, fontStyle: 'italic' }}>&amp;</span> Ferrante
      </span>
      <span style={{
        fontFamily: 'JetBrains Mono', fontSize: 11, color: reversed ? 'rgba(247,242,232,0.6)' : 'var(--ink-500)',
        letterSpacing: '0.04em', textTransform: 'uppercase',
      }}>LLC</span>
    </a>
  );
}

// ------------- Nav -------------
function Nav({ route, go }) {
  const link = (to, label) => {
    const active = route === to;
    return (
      <a key={to} onClick={() => go(to)} style={{
        fontFamily: 'Inter', fontSize: 14, fontWeight: 500,
        color: active ? 'var(--navy-900)' : 'var(--ink-700)',
        textDecoration: 'none', cursor: 'pointer',
        borderBottom: active ? `1px solid ${accentColor()}` : '1px solid transparent',
        paddingBottom: 3,
      }}>{label}</a>
    );
  };
  const showTelInNav = window.TWEAKS.phone === 'nav';
  return (
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '28px 0', borderBottom: '1px solid var(--navy-100)',
    }} className="container-border-nav">
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: 0, width: '100%',
      }}>
        <Wordmark onClick={() => go('home')} />
        <div style={{ display: 'flex', gap: 32, alignItems: 'center', flexWrap: 'wrap' }}>
          {link('home', 'Home')}
          {link('practice', 'Practice areas')}
          {link('partners', 'Partners')}
          {link('contact', 'Contact')}
          {showTelInNav && (
            <a href="tel:9783141699" className="btn btn-primary" style={{
              background: accentColor(), height: 40, padding: '0 16px', fontSize: 14,
            }}>
              <CallIcon size={14} />
              978-314-1699
            </a>
          )}
        </div>
      </div>
    </nav>
  );
}

// ------------- Icons (Lucide-style, 1.5 stroke) -------------
function Icon({ children, size = 20, color = 'currentColor', style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
         style={style}>
      {children}
    </svg>
  );
}
function CallIcon(p) { return <Icon {...p}>
  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</Icon>; }
function MapIcon(p) { return <Icon {...p}>
  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
  <circle cx="12" cy="10" r="3"/>
</Icon>; }
function MailIcon(p) { return <Icon {...p}>
  <rect x="2" y="4" width="20" height="16" rx="2"/>
  <path d="m22 7-10 6L2 7"/>
</Icon>; }
function ArrowIcon(p) { return <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>; }
function ScalesIcon(p) { return <Icon {...p}>
  <path d="M16 16c0 1.66-1.79 3-4 3s-4-1.34-4-3"/>
  <path d="M12 3v16"/><path d="M9 6h6"/>
  <path d="m3 10 3-6 3 6"/><path d="M3 10c0 1.66 1.34 3 3 3s3-1.34 3-3"/>
  <path d="m15 10 3-6 3 6"/><path d="M15 10c0 1.66 1.34 3 3 3s3-1.34 3-3"/>
</Icon>; }
function HomeIconL(p) { return <Icon {...p}>
  <path d="M3 12 12 3l9 9"/><path d="M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10"/>
</Icon>; }
function FileIcon(p) { return <Icon {...p}>
  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
  <path d="M14 2v6h6"/>
</Icon>; }
function GavelIcon(p) { return <Icon {...p}>
  <path d="m14 13-8.5 8.5a2.12 2.12 0 0 1-3-3L11 10"/>
  <path d="m16 16 6-6"/><path d="m8 8 6-6"/>
  <path d="m9 7 8 8"/><path d="m21 11-8-8"/>
</Icon>; }
function AnchorIcon(p) { return <Icon {...p}>
  <circle cx="12" cy="5" r="3"/>
  <path d="M12 22V8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/>
</Icon>; }
function HandshakeIcon(p) { return <Icon {...p}>
  <path d="m11 17 2 2a1 1 0 0 0 3-3"/>
  <path d="m14 14 2.5 2.5a1 1 0 0 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 0 1-1.41 0l-2.12-2.12a1 1 0 0 1 0-1.41l2.83-2.83a3 3 0 0 1 2.12-.88h4"/>
  <path d="m21 3 1 11h-2"/>
  <path d="M3 3 2 14l6.5 6.5a1 1 0 0 0 3-3"/>
  <path d="M3 4h8"/>
</Icon>; }

// ------------- Harbor mark SVG (quiet, editorial) -------------
function HarborMark({ size = 220, muted }) {
  const ink = muted ? 'var(--navy-100)' : 'var(--navy-900)';
  const accent = accentColor();
  return (
    <svg width={size} height={size * 0.7} viewBox="0 0 220 154" fill="none">
      {/* horizon rule */}
      <line x1="10" y1="110" x2="210" y2="110" stroke={ink} strokeWidth="1"/>
      {/* lighthouse silhouette — Gloucester reference */}
      <g stroke={ink} strokeWidth="1.25" fill="none" strokeLinecap="round">
        <path d="M96 110 V 70 L 104 62 V 40 L 110 34 L 116 40 V 62 L 124 70 V 110"/>
        <line x1="104" y1="52" x2="116" y2="52"/>
        <line x1="104" y1="70" x2="116" y2="70"/>
        {/* beam */}
        <path d="M110 40 L 150 22" stroke={accent} strokeWidth="1"/>
        <path d="M110 40 L 150 58" stroke={accent} strokeWidth="1"/>
      </g>
      {/* water lines */}
      <g stroke={ink} strokeWidth="0.75" opacity="0.5">
        <path d="M20 122 Q 30 118 40 122 T 60 122 T 80 122 T 100 122 T 120 122 T 140 122 T 160 122 T 180 122 T 200 122"/>
        <path d="M20 134 Q 30 130 40 134 T 60 134 T 80 134 T 100 134 T 120 134 T 140 134 T 160 134 T 180 134 T 200 134"/>
        <path d="M20 146 Q 30 142 40 146 T 60 146 T 80 146 T 100 146 T 120 146 T 140 146 T 160 146 T 180 146 T 200 146"/>
      </g>
      {/* sun/moon */}
      <circle cx="170" cy="40" r="16" stroke={ink} strokeWidth="1" fill="none" opacity="0.6"/>
    </svg>
  );
}

// ------------- Practice areas data -------------
const PRACTICE = [
  { key: 'real-estate', name: 'Real Estate',   icon: HomeIconL,
    blurb: 'Purchase, sale, refinance, title work, and closings across Cape Ann and the North Shore.' },
  { key: 'probate',     name: 'Probate',       icon: FileIcon,
    blurb: 'Guiding families through estate administration — formal and informal — with patience and clarity.' },
  { key: 'estate',      name: 'Estate Plans',  icon: ScalesIcon,
    blurb: 'Wills, trusts, health-care proxies, powers of attorney. Plans that fit the family, not the template.' },
  { key: 'litigation',  name: 'Litigation',    icon: GavelIcon,
    blurb: 'Civil matters in State and Federal Courts. Careful preparation, plainspoken advocacy.' },
  { key: 'admiralty',   name: 'Admiralty Law', icon: AnchorIcon,
    blurb: 'Matters arising on the water — vessels, fisheries, maritime liens. A Gloucester specialty.' },
  { key: 'mediation',   name: 'Mediation',     icon: HandshakeIcon,
    blurb: 'Conciliation and mediation by attorneys with decades on both sides of the table.' },
];

Object.assign(window, {
  accentColor, accentTint, TopCallBar, Wordmark, Nav,
  Icon, CallIcon, MapIcon, MailIcon, ArrowIcon, ScalesIcon,
  HomeIconL, FileIcon, GavelIcon, AnchorIcon, HandshakeIcon,
  HarborMark, PRACTICE,
});