// Sections and Screens

// ---------------- HERO variants ----------------
function Hero({ go }) {
  const v = window.TWEAKS.hero;
  if (v === 'harbor')    return <HeroHarbor go={go} />;
  if (v === 'plain')     return <HeroPlain go={go} />;
  return <HeroEditorial go={go} />;
}

function HeroShell({ go, children, right }) {
  return (
    <section className="container" style={{
      padding: '80px 48px 96px', display: 'grid',
      gridTemplateColumns: right ? '1.3fr 1fr' : '1fr',
      gap: 64, alignItems: 'center',
    }}>
      <div>{children}</div>
      {right && <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{right}</div>}
    </section>
  );
}

function HeroEditorial({ go }) {
  return (
    <section className="container" style={{ padding: '72px 48px 96px' }}>
      <div style={{
        fontFamily: 'JetBrains Mono', fontSize: 12, color: accentColor(),
        letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 28,
      }}>
        Gloucester, Massachusetts · est. on the harbor
      </div>
      <h1 style={{
        fontFamily: 'Fraunces', fontWeight: 500,
        fontSize: 'clamp(44px, 7vw, 92px)', lineHeight: 1.02,
        letterSpacing: '-0.025em', color: 'var(--navy-900)', margin: 0,
        maxWidth: '16ch',
        fontVariationSettings: '"opsz" 144, "SOFT" 50',
      }}>
        Patient counsel.<br/>
        <span style={{ fontStyle: 'italic', color: accentColor(), fontVariationSettings: '"opsz" 144, "SOFT" 50' }}>
          Practical
        </span>{' '}representation.
      </h1>
      <p style={{
        fontFamily: 'Inter', fontSize: 20, lineHeight: 1.55, color: 'var(--ink-700)',
        marginTop: 32, maxWidth: '52ch',
      }}>
        Kiely &amp; Ferrante, LLC is a full-service Gloucester law firm. With over 50
        years of combined experience, our attorneys guide clients through real
        estate, probate, litigation, admiralty, and estate matters &mdash; with
        immediate attention, constant updates, and direct access to the partner
        handling your case.
      </p>
      <div style={{ marginTop: 40, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        <a href="tel:9783141699" className="btn btn-primary" style={{ background: accentColor() }}>
          <CallIcon size={16} /> Call 978-314-1699
        </a>
        <button onClick={() => go('practice')} className="btn btn-ghost">
          Practice areas <ArrowIcon size={14} />
        </button>
      </div>
      {/* stat rail */}
      <div style={{
        marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(3, auto)',
        gap: 64, paddingTop: 32, borderTop: '1px solid var(--navy-100)',
        maxWidth: 760,
      }}>
        {[
          ['50+ years', 'Combined practice'],
          ['MA & NH', 'Bar admissions'],
          ['Cape Ann', 'Gloucester · North Shore'],
        ].map(([n, l]) => (
          <div key={n}>
            <div style={{
              fontFamily: 'Fraunces', fontWeight: 500, fontSize: 28,
              color: 'var(--navy-900)', letterSpacing: '-0.01em',
              fontVariationSettings: '"opsz" 48, "SOFT" 50',
            }}>{n}</div>
            <div style={{
              fontFamily: 'Inter', fontSize: 13, color: 'var(--ink-500)',
              marginTop: 4,
            }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HeroHarbor({ go }) {
  return (
    <section className="container" style={{
      padding: '56px 48px 96px',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{
            fontFamily: 'JetBrains Mono', fontSize: 12, color: accentColor(),
            letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 28,
          }}>
            Attorneys · Mediators · Conciliators
          </div>
          <h1 style={{
            fontFamily: 'Fraunces', fontWeight: 500,
            fontSize: 'clamp(40px, 6.2vw, 80px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', color: 'var(--navy-900)', margin: 0,
            maxWidth: '14ch',
            fontVariationSettings: '"opsz" 144, "SOFT" 50',
          }}>
            A small Gloucester firm with a long memory.
          </h1>
          <p style={{
            fontFamily: 'Inter', fontSize: 18, lineHeight: 1.6, color: 'var(--ink-700)',
            marginTop: 28, maxWidth: '46ch',
          }}>
            Kevin J. Kiely has practiced before State and Federal Courts for nearly
            35 years. The firm handles real estate, probate, estate plans,
            litigation, admiralty, and mediation &mdash; carefully, and on time.
          </p>
          <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="tel:9783141699" className="btn btn-primary" style={{ background: accentColor() }}>
              <CallIcon size={16} /> Call 978-314-1699
            </a>
            <button onClick={() => go('partners')} className="btn btn-ghost">
              Meet the partners
            </button>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <HarborMark size={300} />
        </div>
      </div>
    </section>
  );
}

function HeroPlain({ go }) {
  return (
    <section className="container" style={{ padding: '96px 48px 96px', maxWidth: 900 }}>
      <h1 style={{
        fontFamily: 'Fraunces', fontWeight: 500,
        fontSize: 'clamp(36px, 5.5vw, 64px)', lineHeight: 1.1,
        letterSpacing: '-0.02em', color: 'var(--navy-900)', margin: 0,
        maxWidth: '22ch',
        fontVariationSettings: '"opsz" 96, "SOFT" 50',
      }}>
        Kiely &amp; Ferrante, LLC. Attorneys and mediators in Gloucester, Massachusetts.
      </h1>
      <p style={{
        fontFamily: 'Inter', fontSize: 18, lineHeight: 1.6, color: 'var(--ink-700)',
        marginTop: 28, maxWidth: '58ch',
      }}>
        Over 50 years of combined experience. Real estate, probate, estate plans,
        litigation, admiralty, and mediation. Call the firm to speak with the
        partner handling your matter.
      </p>
      <div style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        <a href="tel:9783141699" className="btn btn-primary" style={{ background: accentColor() }}>
          <CallIcon size={16} /> Call 978-314-1699
        </a>
        <button onClick={() => go('practice')} className="btn btn-ghost">Practice areas</button>
      </div>
    </section>
  );
}

// ---------------- Approach block ----------------
function Approach() {
  const rows = [
    { n: '01', t: 'Speak with a partner',
      d: 'You get Kevin Kiely on the phone, not a gatekeeper. Questions answered in plain language.' },
    { n: '02', t: 'Work the case',
      d: 'Careful preparation. Constant updates. The partner handling your matter remains your contact.' },
    { n: '03', t: 'Flexible billing',
      d: 'Hourly, flat-fee, or blended arrangements where they make sense. Discussed up front.' },
  ];
  return (
    <section className="container" style={{ padding: '96px 48px', borderTop: '1px solid var(--navy-100)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start',
      }}>
        <div>
          <div style={{
            fontFamily: 'Inter', fontSize: 12, fontWeight: 500, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--ink-500)', marginBottom: 16,
          }}>How we work</div>
          <h2 style={{
            fontFamily: 'Fraunces', fontWeight: 500, fontSize: 40, lineHeight: 1.1,
            color: 'var(--navy-900)', margin: 0, letterSpacing: '-0.015em',
            fontVariationSettings: '"opsz" 72, "SOFT" 50',
          }}>A careful, personal practice.</h2>
        </div>
        <div style={{ display: 'grid', gap: 32 }}>
          {rows.map(r => (
            <div key={r.n} style={{
              display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
              paddingBottom: 32, borderBottom: '1px solid var(--navy-100)',
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono', fontSize: 13, color: accentColor(),
              }}>{r.n}</div>
              <div>
                <div style={{
                  fontFamily: 'Fraunces', fontWeight: 500, fontSize: 22,
                  color: 'var(--navy-900)', marginBottom: 8,
                  fontVariationSettings: '"opsz" 36, "SOFT" 50',
                }}>{r.t}</div>
                <p style={{
                  fontFamily: 'Inter', fontSize: 16, lineHeight: 1.6,
                  color: 'var(--ink-700)', margin: 0, maxWidth: '52ch',
                }}>{r.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Practice areas grid ----------------
function PracticeGrid({ compact, go }) {
  return (
    <section className="container" style={{
      padding: compact ? '64px 48px' : '96px 48px',
      borderTop: '1px solid var(--navy-100)',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 48, flexWrap: 'wrap', gap: 16,
      }}>
        <div>
          <div style={{
            fontFamily: 'Inter', fontSize: 12, fontWeight: 500, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--ink-500)', marginBottom: 12,
          }}>Practice areas</div>
          <h2 style={{
            fontFamily: 'Fraunces', fontWeight: 500, fontSize: 40, lineHeight: 1.1,
            color: 'var(--navy-900)', margin: 0, letterSpacing: '-0.015em',
            fontVariationSettings: '"opsz" 72, "SOFT" 50',
          }}>What we handle.</h2>
        </div>
        {compact && (
          <a onClick={() => go('practice')} style={{
            fontFamily: 'Inter', fontSize: 14, color: accentColor(),
            cursor: 'pointer', textDecoration: 'none',
          }}>All practice areas →</a>
        )}
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
        gap: 0, borderTop: '1px solid var(--navy-100)',
        borderLeft: '1px solid var(--navy-100)',
      }}>
        {PRACTICE.map(p => {
          const IconC = p.icon;
          return (
            <div key={p.key} style={{
              padding: '32px 28px',
              borderBottom: '1px solid var(--navy-100)',
              borderRight: '1px solid var(--navy-100)',
              background: 'var(--cream-50)',
              transition: 'background 150ms var(--ease-out)',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--cream-100)'}
            onMouseLeave={e => e.currentTarget.style.background = 'var(--cream-50)'}
            >
              <div style={{ color: accentColor(), marginBottom: 18 }}>
                <IconC size={24} />
              </div>
              <h3 style={{
                fontFamily: 'Fraunces', fontWeight: 500, fontSize: 22,
                color: 'var(--navy-900)', margin: '0 0 10px',
                fontVariationSettings: '"opsz" 36, "SOFT" 50',
              }}>{p.name}</h3>
              <p style={{
                fontFamily: 'Inter', fontSize: 15, lineHeight: 1.55,
                color: 'var(--ink-700)', margin: 0, maxWidth: '36ch',
              }}>{p.blurb}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---------------- Partners ----------------
function PartnersBlock({ variant }) {
  const v = variant || window.TWEAKS.partners;
  const partners = [
    {
      name: 'Kevin J. Kiely',
      role: 'Senior Partner',
      meta: 'Massachusetts & New Hampshire Bar',
      tenure: 'Nearly 35 years in practice',
      bio: 'Kevin practices before all State and Federal Courts. His work spans real estate, probate, litigation, and admiralty matters across Cape Ann and the North Shore. He answers his own phone.',
      init: 'KK',
      photo: 'assets/kevin-kiely.png',
    },
    {
      name: 'Ann Margaret Ferrante',
      role: 'Partner',
      meta: '5th Essex Representative, Great & General Court',
      tenure: 'Available for consultation',
      bio: 'Ann Margaret is not currently practicing before the courts of the Commonwealth, owing to possible conflicts arising from her position as State Representative. She remains available for consultation.',
      init: 'AF',
      photo: 'assets/ann-ferrante.png',
    },
  ];
  if (v === 'list') {
    return (
      <div>
        {partners.map(p => (
          <div key={p.name} style={{
            display: 'grid', gridTemplateColumns: '180px 1fr',
            gap: 40, padding: '40px 0', borderTop: '1px solid var(--navy-100)',
            alignItems: 'start',
          }}>
            <div>
              <div style={{
                width: 140, height: 180, overflow: 'hidden', borderRadius: 8,
                background: 'var(--cream-100)', border: '1px solid var(--navy-100)',
                marginBottom: 14,
              }}>
                <img src={p.photo} alt={`Portrait of ${p.name}`} style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  filter: 'saturate(0.85) contrast(1.02)',
                  display: 'block',
                }}/>
              </div>
              <div style={{
                fontFamily: 'JetBrains Mono', fontSize: 12, color: accentColor(),
                letterSpacing: '0.04em', marginBottom: 6,
              }}>{p.role.toUpperCase()}</div>
              <div style={{
                fontFamily: 'Inter', fontSize: 13, color: 'var(--ink-500)',
              }}>{p.tenure}</div>
            </div>
            <div>
              <h3 style={{
                fontFamily: 'Fraunces', fontWeight: 500, fontSize: 32,
                color: 'var(--navy-900)', margin: '0 0 8px', letterSpacing: '-0.01em',
                fontVariationSettings: '"opsz" 48, "SOFT" 50',
              }}>{p.name}</h3>
              <div style={{
                fontFamily: 'Inter', fontSize: 14, color: 'var(--ink-500)', marginBottom: 16,
              }}>{p.meta}</div>
              <p style={{
                fontFamily: 'Inter', fontSize: 16, lineHeight: 1.65,
                color: 'var(--ink-900)', margin: 0, maxWidth: '62ch',
              }}>{p.bio}</p>
            </div>
          </div>
        ))}
      </div>
    );
  }
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 24 }}>
      {partners.map(p => (
        <article key={p.name} style={{
          background: 'var(--cream-100)', border: '1px solid var(--navy-100)',
          borderRadius: 12, padding: 32,
        }}>
          <div style={{
            width: 96, height: 96, overflow: 'hidden',
            borderRadius: 8, border: '1px solid var(--navy-100)',
            background: 'var(--paper-0)', marginBottom: 24,
          }}>
            <img src={p.photo} alt={`Portrait of ${p.name}`} style={{
              width: '100%', height: '100%', objectFit: 'cover',
              objectPosition: 'center top',
              filter: 'saturate(0.85) contrast(1.02)',
              display: 'block',
            }}/>
          </div>
          <div style={{
            fontFamily: 'JetBrains Mono', fontSize: 11, color: accentColor(),
            letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8,
          }}>{p.role}</div>
          <h3 style={{
            fontFamily: 'Fraunces', fontWeight: 500, fontSize: 26,
            color: 'var(--navy-900)', margin: '0 0 6px', letterSpacing: '-0.01em',
            fontVariationSettings: '"opsz" 48, "SOFT" 50',
          }}>{p.name}</h3>
          <div style={{
            fontFamily: 'Inter', fontSize: 13, color: 'var(--ink-500)', marginBottom: 18,
          }}>{p.meta} · {p.tenure}</div>
          <p style={{
            fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6,
            color: 'var(--ink-900)', margin: 0,
          }}>{p.bio}</p>
        </article>
      ))}
    </div>
  );
}

// ---------------- Contact strip (home CTA) ----------------
function ContactStrip({ go }) {
  return (
    <section style={{
      background: 'var(--navy-900)', color: 'var(--cream-50)',
      padding: '80px 0', marginTop: 0,
    }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: 'JetBrains Mono', fontSize: 12, color: accentColor(),
            letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 16,
          }}>Speak with the firm</div>
          <h2 style={{
            fontFamily: 'Fraunces', fontWeight: 500, fontSize: 48, lineHeight: 1.1,
            color: 'var(--cream-50)', margin: 0, letterSpacing: '-0.02em',
            fontVariationSettings: '"opsz" 96, "SOFT" 50',
          }}>Call the office.<br/>
          <span style={{ color: accentColor(), fontStyle: 'italic' }}>We'll pick up.</span>
          </h2>
          <p style={{
            fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6,
            color: 'rgba(247,242,232,0.75)', marginTop: 24, maxWidth: '46ch',
          }}>
            A brief conversation is usually enough to know whether we can help. If
            we can't, we'll tell you that, and where to look next.
          </p>
        </div>
        <div style={{
          background: 'var(--navy-800)', border: '1px solid rgba(217,225,236,0.15)',
          borderRadius: 12, padding: 32,
        }}>
          <a href="tel:9783141699" style={{
            display: 'flex', alignItems: 'center', gap: 14,
            textDecoration: 'none', color: 'var(--cream-50)',
            padding: '18px 20px', background: accentColor(),
            borderRadius: 8, fontFamily: 'Inter', fontWeight: 500,
            fontSize: 18,
          }}>
            <CallIcon size={22} /> 978-314-1699
          </a>
          <div style={{
            marginTop: 22, display: 'grid', gap: 14,
            fontFamily: 'Inter', fontSize: 14, color: 'rgba(247,242,232,0.85)',
          }}>
            <div style={{ display: 'flex', gap: 12 }}>
              <MapIcon size={18} color="rgba(247,242,232,0.6)" />
              <div>
                Suite 306, 85 Eastern Ave.<br/>
                Gloucester, MA 01930
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <FileIcon size={18} color="rgba(247,242,232,0.6)" />
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 13 }}>
                Fax · 978-283-8880
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Footer ----------------
function Footer({ go }) {
  return (
    <footer style={{ borderTop: '1px solid var(--navy-100)', background: 'var(--cream-50)' }}>
      <div className="container" style={{ padding: '56px 48px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 48, marginBottom: 48,
        }}>
          <div>
            <Wordmark onClick={() => go('home')} />
            <p style={{
              fontFamily: 'Inter', fontSize: 14, lineHeight: 1.6,
              color: 'var(--ink-500)', marginTop: 16, maxWidth: '34ch',
            }}>
              Attorneys, mediators, and conciliators. Gloucester, Massachusetts.
            </p>
          </div>
          <FooterCol title="Firm" items={[
            ['Home', () => go('home')],
            ['Partners', () => go('partners')],
            ['Contact', () => go('contact')],
          ]} />
          <FooterCol title="Practice" items={PRACTICE.slice(0,4).map(p => [p.name, () => go('practice')])} />
          <FooterCol title="Office" items={[
            ['85 Eastern Ave, Suite 306', null],
            ['Gloucester, MA 01930', null],
            ['978-314-1699', () => { window.location.href = 'tel:9783141699'; }],
          ]} mono />
        </div>
        <div style={{
          paddingTop: 24, borderTop: '1px solid var(--navy-100)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16,
        }}>
          <div style={{
            fontFamily: 'Inter', fontSize: 12, color: 'var(--ink-500)', maxWidth: '68ch',
          }}>
            © 2026 Kiely &amp; Ferrante LLC. Material on this site is for informational
            purposes only — not legal advice. No attorney-client relationship is
            created by use of this site.
          </div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--ink-500)' }}>
            Rebuilt by <span style={{ color: 'var(--navy-900)' }}>Rebuilt Studio</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, mono }) {
  return (
    <div>
      <div style={{
        fontFamily: 'Inter', fontSize: 11, fontWeight: 500, color: 'var(--ink-500)',
        letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 16,
      }}>{title}</div>
      <ul className="clean" style={{ display: 'grid', gap: 10 }}>
        {items.map(([label, onClick], i) => (
          <li key={i}>
            {onClick ? (
              <a onClick={onClick} style={{
                fontFamily: mono ? 'JetBrains Mono' : 'Inter',
                fontSize: mono ? 13 : 14, color: 'var(--navy-900)',
                textDecoration: 'none', cursor: 'pointer',
              }}>{label}</a>
            ) : (
              <span style={{
                fontFamily: mono ? 'JetBrains Mono' : 'Inter',
                fontSize: mono ? 13 : 14, color: 'var(--ink-700)',
              }}>{label}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ---------------- Panorama band ----------------
function Panorama({ src, alt, caption, height = 320, align = 'center' }) {
  return (
    <figure style={{ margin: 0, position: 'relative' }}>
      <div style={{
        width: '100%', height, overflow: 'hidden',
        background: 'var(--navy-900)',
        borderTop: '1px solid var(--navy-100)',
        borderBottom: '1px solid var(--navy-100)',
      }}>
        <img src={src} alt={alt} style={{
          width: '100%', height: '100%', objectFit: 'cover',
          objectPosition: align, display: 'block',
          filter: 'saturate(0.9) contrast(1.02)',
        }}/>
      </div>
      {caption && (
        <figcaption className="container" style={{
          padding: '14px 48px 0',
          fontFamily: 'JetBrains Mono', fontSize: 12, color: 'var(--ink-500)',
          letterSpacing: '0.04em',
        }}>{caption}</figcaption>
      )}
    </figure>
  );
}

// ---------------- Chapter marker (roman numeral eyebrow) ----------------
function Chapter({ n, label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 18,
      fontFamily: 'Inter', fontSize: 12, fontWeight: 500,
      color: 'var(--ink-500)', letterSpacing: '0.12em',
      textTransform: 'uppercase', marginBottom: 20,
    }}>
      <span style={{
        fontFamily: 'Fraunces', fontStyle: 'italic', fontSize: 20,
        color: accentColor(), letterSpacing: 0,
        fontVariationSettings: '"opsz" 36, "SOFT" 50',
        textTransform: 'none',
      }}>{n}.</span>
      <span>{label}</span>
    </div>
  );
}

// ---------------- Pull quote ----------------
function PullQuote() {
  return (
    <section className="container" style={{
      padding: '104px 48px', borderTop: '1px solid var(--navy-100)',
    }}>
      <Chapter n="II" label="From the partner" />
      <blockquote style={{
        margin: 0, maxWidth: '22ch', fontFamily: 'Fraunces', fontWeight: 500,
        fontSize: 'clamp(32px, 4.6vw, 56px)', lineHeight: 1.15,
        color: 'var(--navy-900)', letterSpacing: '-0.015em',
        fontVariationSettings: '"opsz" 96, "SOFT" 50',
      }}>
        <span style={{
          color: accentColor(), fontStyle: 'italic', marginRight: 6,
        }}>&ldquo;</span>
        Most matters are simpler than they look. A phone call and thirty minutes
        will tell you whether you need a lawyer{' '}
        <span style={{ fontStyle: 'italic' }}>at all</span>.
        <span style={{ color: accentColor(), fontStyle: 'italic', marginLeft: 4 }}>&rdquo;</span>
      </blockquote>
      <div style={{
        marginTop: 36, display: 'flex', alignItems: 'center', gap: 16,
        fontFamily: 'Inter', fontSize: 14, color: 'var(--ink-500)',
      }}>
        <span style={{ width: 32, height: 1, background: 'var(--ink-300)' }}></span>
        Kevin&nbsp;J.&nbsp;Kiely, Senior Partner
      </div>
    </section>
  );
}

// ---------------- Signature (Kevin, handwritten SVG) ----------------
function Signature({ color }) {
  const c = color || 'var(--navy-900)';
  return (
    <svg width="200" height="56" viewBox="0 0 200 56" fill="none"
         style={{ display: 'block' }}>
      <path
        d="M6 34 C 12 14, 18 10, 22 28 C 24 38, 20 44, 26 36 C 32 28, 36 18, 40 28 C 43 36, 44 40, 48 34 C 52 28, 54 18, 58 28 C 61 36, 62 40, 66 34 L 72 26 L 68 40 M 80 30 C 86 22, 92 22, 90 32 C 88 40, 82 38, 88 30 C 93 23, 98 24, 100 34 M 108 22 L 104 40 M 112 30 C 118 22, 124 22, 122 32 C 120 40, 114 38, 120 30 C 126 23, 130 26, 132 34 M 140 34 C 146 26, 152 26, 150 34 C 148 40, 144 38, 148 32 L 154 28 L 150 40 M 160 14 L 156 42 C 156 46, 160 46, 164 42 M 172 34 C 178 26, 184 26, 182 34 C 180 40, 174 38, 180 32 L 186 28 L 182 40"
        stroke={c} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
        fill="none"
      />
      {/* underline flourish */}
      <path d="M 8 50 C 60 46, 130 48, 188 46"
            stroke={c} strokeWidth="1" strokeLinecap="round" fill="none" opacity="0.6"/>
    </svg>
  );
}

// ---------------- From the firm (datelined note) ----------------
function FromTheFirm() {
  return (
    <section className="container" style={{
      padding: '96px 48px', borderTop: '1px solid var(--navy-100)',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start',
      }}>
        <div>
          <Chapter n="IV" label="From the firm" />
          <div style={{
            fontFamily: 'JetBrains Mono', fontSize: 13, color: 'var(--ink-500)',
            letterSpacing: '0.04em',
          }}>
            Gloucester, MA &middot; April 2026
          </div>
        </div>
        <div>
          <h3 style={{
            fontFamily: 'Fraunces', fontWeight: 500, fontSize: 32, lineHeight: 1.2,
            color: 'var(--navy-900)', margin: '0 0 20px', letterSpacing: '-0.01em',
            fontVariationSettings: '"opsz" 48, "SOFT" 50',
          }}>A note on irrevocable trusts and the family home.</h3>
          <p style={{
            fontFamily: 'Inter', fontSize: 17, lineHeight: 1.7, color: 'var(--ink-900)',
            margin: '0 0 16px', maxWidth: '62ch',
          }}>
            For years, attorneys have advised clients on Medicaid estate planning
            using an irrevocable trust &mdash; transferring the family home into the
            trust while retaining a life interest in the property. That advice is
            still sound in many cases. It is not sound in all of them.
          </p>
          <p style={{
            fontFamily: 'Inter', fontSize: 17, lineHeight: 1.7, color: 'var(--ink-900)',
            margin: '0 0 28px', maxWidth: '62ch',
          }}>
            Before you sign anything, sit down with a lawyer who has read the
            whole file. We're happy to be that lawyer, or to tell you where else
            to look.
          </p>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20 }}>
            <div style={{
              fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 500,
              fontSize: 36, color: 'var(--navy-900)', letterSpacing: '-0.01em',
              lineHeight: 1,
              fontVariationSettings: '"opsz" 72, "SOFT" 50',
            }}>
              Kevin&nbsp;J.&nbsp;Kiely
            </div>
            <div style={{
              fontFamily: 'Inter', fontSize: 13, color: 'var(--ink-500)',
              paddingBottom: 6,
            }}>
              Senior Partner
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Screens ----------------
function HomeScreen({ go }) {
  return (
    <div data-screen-label="01 Home">
      <Hero go={go} />
      <Panorama
        src="assets/harbor-sailboat.png"
        alt="A sailboat on a calm morning off Cape Ann."
        caption="I · CAPE ANN · GLOUCESTER HARBOR"
        height={340}
      />
      <PullQuote />
      <Approach />
      <Panorama
        src="assets/cape-ann-tidepools.png"
        alt="Tide pools on the Cape Ann shore at low tide."
        caption="III · LOW TIDE · BACK SHORE"
        height={280}
      />
      <FromTheFirm />
      <PracticeGrid compact go={go} />
      <ContactStrip go={go} />
    </div>
  );
}

function PracticeScreen({ go }) {
  return (
    <div data-screen-label="02 Practice areas">
      <Panorama
        src="assets/good-harbor-beach.png"
        alt="Good Harbor Beach with a lifeguard chair and the Gloucester headland in the distance."
        height={280}
        align="center"
      />
      <section className="container" style={{ padding: '64px 48px 24px' }}>
        <div style={{
          fontFamily: 'JetBrains Mono', fontSize: 12, color: accentColor(),
          letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 20,
        }}>Practice areas</div>
        <h1 style={{
          fontFamily: 'Fraunces', fontWeight: 500, fontSize: 'clamp(40px, 6vw, 72px)',
          color: 'var(--navy-900)', margin: '0 0 16px', letterSpacing: '-0.02em',
          lineHeight: 1.05,
          fontVariationSettings: '"opsz" 144, "SOFT" 50',
        }}>Careful work, <span style={{ fontStyle: 'italic', color: accentColor() }}>across six areas.</span></h1>
        <p style={{
          fontFamily: 'Inter', fontSize: 18, color: 'var(--ink-700)',
          maxWidth: '58ch', margin: '24px 0 0', lineHeight: 1.6,
        }}>
          We represent individuals, families, and small businesses on Cape Ann and
          the North Shore. If your matter sits outside these areas, we'll say so
          and point you to a colleague who handles it.
        </p>
      </section>
      <PracticeGrid go={go} />
      <ContactStrip go={go} />
    </div>
  );
}

function PartnersScreen({ go }) {
  return (
    <div data-screen-label="03 Partners">
      <section className="container" style={{ padding: '64px 48px 24px' }}>
        <div style={{
          fontFamily: 'JetBrains Mono', fontSize: 12, color: accentColor(),
          letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 20,
        }}>Partners</div>
        <h1 style={{
          fontFamily: 'Fraunces', fontWeight: 500, fontSize: 'clamp(40px, 6vw, 72px)',
          color: 'var(--navy-900)', margin: 0, letterSpacing: '-0.02em',
          lineHeight: 1.05,
          fontVariationSettings: '"opsz" 144, "SOFT" 50',
        }}>Two names on the door.</h1>
        <p style={{
          fontFamily: 'Inter', fontSize: 18, color: 'var(--ink-700)',
          maxWidth: '58ch', margin: '24px 0 56px', lineHeight: 1.6,
        }}>
          A small firm is a stack of files on a few desks. Here are the desks.
        </p>
      </section>
      <section className="container" style={{ padding: '0 48px 64px' }}>
        <PartnersBlock />
      </section>
      <ContactStrip go={go} />
    </div>
  );
}

function ContactScreen({ go }) {
  return (
    <div data-screen-label="04 Contact">
      <section className="container" style={{ padding: '64px 48px 32px' }}>
        <div style={{
          fontFamily: 'JetBrains Mono', fontSize: 12, color: accentColor(),
          letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 20,
        }}>Contact</div>
        <h1 style={{
          fontFamily: 'Fraunces', fontWeight: 500, fontSize: 'clamp(40px, 6vw, 72px)',
          color: 'var(--navy-900)', margin: 0, letterSpacing: '-0.02em',
          lineHeight: 1.05,
          fontVariationSettings: '"opsz" 144, "SOFT" 50',
        }}>Call the office.</h1>
        <p style={{
          fontFamily: 'Inter', fontSize: 18, color: 'var(--ink-700)',
          maxWidth: '58ch', margin: '24px 0 0', lineHeight: 1.6,
        }}>
          The fastest way to reach us is by phone. We return voicemails the same
          business day.
        </p>
      </section>

      <section className="container" style={{
        padding: '48px 48px 96px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
      }}>
        <div>
          <a href="tel:9783141699" style={{
            display: 'block', background: accentColor(), color: 'var(--cream-50)',
            textDecoration: 'none', borderRadius: 12, padding: '32px 36px',
          }}>
            <div style={{
              fontFamily: 'Inter', fontSize: 12, fontWeight: 500,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'rgba(247,242,232,0.8)', marginBottom: 12,
            }}>Call the firm</div>
            <div style={{
              fontFamily: 'Fraunces', fontWeight: 500, fontSize: 56,
              letterSpacing: '-0.01em', lineHeight: 1,
              fontVariationSettings: '"opsz" 96, "SOFT" 50',
            }}>978-314-1699</div>
            <div style={{
              marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'Inter', fontSize: 14,
            }}>
              Tap to dial <ArrowIcon size={14} />
            </div>
          </a>

          <div style={{
            marginTop: 32, background: 'var(--cream-100)', borderRadius: 12,
            border: '1px solid var(--navy-100)', padding: 28,
          }}>
            <div style={{
              fontFamily: 'Inter', fontSize: 11, fontWeight: 500, color: 'var(--ink-500)',
              letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14,
            }}>Other</div>
            <div style={{
              fontFamily: 'JetBrains Mono', fontSize: 14, color: 'var(--navy-900)',
              lineHeight: 1.8,
            }}>
              Fax &nbsp;·&nbsp; 978-283-8880
            </div>
          </div>
        </div>

        <div style={{
          background: 'var(--cream-100)', border: '1px solid var(--navy-100)',
          borderRadius: 12, padding: 32, display: 'flex', flexDirection: 'column',
        }}>
          <div style={{
            fontFamily: 'Inter', fontSize: 11, fontWeight: 500, color: 'var(--ink-500)',
            letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 16,
          }}>Office</div>
          <div style={{
            fontFamily: 'Fraunces', fontWeight: 500, fontSize: 24,
            color: 'var(--navy-900)', letterSpacing: '-0.01em', lineHeight: 1.3,
            fontVariationSettings: '"opsz" 36, "SOFT" 50',
          }}>
            Kiely &amp; Ferrante, LLC<br/>
            Suite 306, 85 Eastern Avenue<br/>
            Gloucester, Massachusetts 01930
          </div>
          {/* office photo — real building */}
          <div style={{
            marginTop: 28, flex: 1, minHeight: 220, position: 'relative',
            background: 'var(--paper-0)', border: '1px solid var(--navy-100)',
            borderRadius: 8, overflow: 'hidden',
          }}>
            <img src="assets/office-building.png"
                 alt="The brick building at 85 Eastern Avenue, Gloucester, where the firm keeps Suite 306."
                 style={{
                   width: '100%', height: '100%', objectFit: 'cover',
                   display: 'block', filter: 'saturate(0.92) contrast(1.02)',
                 }}/>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  Hero, HeroEditorial, HeroHarbor, HeroPlain,
  Approach, PracticeGrid, PartnersBlock, ContactStrip, Panorama,
  Chapter, PullQuote, Signature, FromTheFirm,
  Footer, HomeScreen, PracticeScreen, PartnersScreen, ContactScreen,
});
