/* shared.jsx — POA Forms shared chrome
 * Brand mark, top bar, footer, US states list, helpers.
 * Exposed on window for cross-file React component sharing.
 */

const POA_TYPES = [
  { id: 'durable',    name: 'Durable',    blurb: 'Stays valid if you become incapacitated.', best: 'Ongoing financial management, elder care.' },
  { id: 'medical',    name: 'Medical',    blurb: 'Healthcare decisions if you can\u2019t speak for yourself.', best: 'Surgery, ICU, end-of-life decisions.' },
  { id: 'healthcare', name: 'Healthcare', blurb: 'Broader health-decision authority for your agent.', best: 'Long-term care planning.' },
  { id: 'general',    name: 'General',    blurb: 'Wide authority — ends if you become incapacitated.', best: 'Short-term help, travel, deployment.' },
  { id: 'limited',    name: 'Limited',    blurb: 'Narrow authority for a specific task or window.', best: 'A real-estate closing, one transaction.' },
  { id: 'financial',  name: 'Financial',  blurb: 'Money matters \u2014 banking, taxes, real estate.', best: 'Aging-parent finances, business owner.' },
  { id: 'springing',  name: 'Springing',  blurb: 'Activates only on a defined trigger (e.g., incapacity).', best: 'You only want it to kick in if needed.' },
];

const US_STATES = [
  ['AL','Alabama'],['AK','Alaska'],['AZ','Arizona'],['AR','Arkansas'],['CA','California'],
  ['CO','Colorado'],['CT','Connecticut'],['DE','Delaware'],['FL','Florida'],['GA','Georgia'],
  ['HI','Hawaii'],['ID','Idaho'],['IL','Illinois'],['IN','Indiana'],['IA','Iowa'],
  ['KS','Kansas'],['KY','Kentucky'],['LA','Louisiana'],['ME','Maine'],['MD','Maryland'],
  ['MA','Massachusetts'],['MI','Michigan'],['MN','Minnesota'],['MS','Mississippi'],['MO','Missouri'],
  ['MT','Montana'],['NE','Nebraska'],['NV','Nevada'],['NH','New Hampshire'],['NJ','New Jersey'],
  ['NM','New Mexico'],['NY','New York'],['NC','North Carolina'],['ND','North Dakota'],['OH','Ohio'],
  ['OK','Oklahoma'],['OR','Oregon'],['PA','Pennsylvania'],['RI','Rhode Island'],['SC','South Carolina'],
  ['SD','South Dakota'],['TN','Tennessee'],['TX','Texas'],['UT','Utah'],['VT','Vermont'],
  ['VA','Virginia'],['WA','Washington'],['WV','West Virginia'],['WI','Wisconsin'],['WY','Wyoming'],
  ['DC','District of Columbia']
];

// Brand mark — "Power of Attorney Forms .us"
function BrandMark({ compact = false, mono = false }) {
  return (
    <a href="index.html" className="brand-mark" aria-label="POA Forms home">
      <span className="seal" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none">
          {/* Seal: scroll/document with star */}
          <rect x="4" y="3" width="16" height="18" rx="2" stroke="currentColor" strokeWidth="2"/>
          <path d="M8 8h8M8 12h8M8 16h5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      </span>
      {!compact && (
        <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6, lineHeight: 1 }}>
          <span>POA Forms</span>
          <span className="tld" style={{ fontSize: 13 }}>.us</span>
        </span>
      )}
    </a>
  );
}

function TopBar({ active = '' }) {
  const items = [
    { id: 'free-poa',   label: 'Free POA',     href: 'free-poa.html' },
    { id: 'states',     label: 'By state',     href: '#states' },
    { id: 'types',      label: 'POA types',    href: '#types' },
    { id: 'living-will',label: 'Living will',  href: '#' },
    { id: 'help',       label: 'Help',         href: '#' },
  ];
  return (
    <header className="topbar">
      <div className="inner">
        <BrandMark />
        <nav aria-label="Primary">
          {items.map(i => (
            <a key={i.id} href={i.href} aria-current={active === i.id ? 'page' : undefined}
               style={{ fontWeight: active === i.id ? 700 : 500 }}>{i.label}</a>
          ))}
        </nav>
        <div className="actions">
          <a href="#" className="btn ghost" style={{ minHeight: 40, padding: '10px 14px', fontSize: 14, borderColor: 'transparent' }}>Sign in</a>
          <a href="generator.html" className="btn primary" style={{ minHeight: 44, padding: '12px 18px', fontSize: 14 }}>
            Build my POA
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M3 8h10m-4-4l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="grid">
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <span style={{
                width: 36, height: 36, borderRadius: 8, background: 'var(--accent)',
                color: 'var(--ink)', display: 'grid', placeItems: 'center'
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <rect x="4" y="3" width="16" height="18" rx="2" stroke="currentColor" strokeWidth="2"/>
                  <path d="M8 8h8M8 12h8M8 16h5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                </svg>
              </span>
              <span style={{ fontFamily: 'Outfit', fontWeight: 700, fontSize: 19, letterSpacing: '-0.02em', color: 'var(--paper)' }}>
                POA Forms <span style={{ opacity: 0.5, fontWeight: 500 }}>.us</span>
              </span>
            </div>
            <p style={{ fontSize: 14, opacity: 0.75, maxWidth: 320, lineHeight: 1.55 }}>
              Free, state-specific power of attorney generator. No signup, no watermark, no upsells.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              <span className="pill" style={{ background: 'transparent', borderColor: 'rgba(245,241,232,0.2)', color: 'var(--paper)', fontSize: 11 }}>SOC 2</span>
              <span className="pill" style={{ background: 'transparent', borderColor: 'rgba(245,241,232,0.2)', color: 'var(--paper)', fontSize: 11 }}>HIPAA</span>
              <span className="pill" style={{ background: 'transparent', borderColor: 'rgba(245,241,232,0.2)', color: 'var(--paper)', fontSize: 11 }}>Updated 2026</span>
            </div>
          </div>
          <div>
            <h4>POA Types</h4>
            <ul>
              {POA_TYPES.slice(0, 6).map(t => (
                <li key={t.id}><a href="#">{t.name} POA</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>By state</h4>
            <ul>
              <li><a href="#">California</a></li>
              <li><a href="#">Texas</a></li>
              <li><a href="#">Florida</a></li>
              <li><a href="#">New York</a></li>
              <li><a href="#">All 50 states</a></li>
            </ul>
          </div>
          <div>
            <h4>Resources</h4>
            <ul>
              <li><a href="free-poa.html">Free POA</a></li>
              <li><a href="#">Living will</a></li>
              <li><a href="#">HIPAA authorization</a></li>
              <li><a href="#">Notarization $25</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <span className="built-by">
            Built by <strong style={{ color: 'var(--accent)' }}>BlueNotary</strong>, premier notarization platform.
          </span>
          <span>
            POA Forms is an informational tool, not a law firm. Forms are not legal advice. © 2026 POA Forms.
          </span>
        </div>
      </div>
    </footer>
  );
}

// Trust row — used in hero and beneath generator
function TrustRow({ items }) {
  return (
    <div className="trust-row">
      {items.map((t, i) => (
        <span key={i}>
          <svg viewBox="0 0 16 16" fill="none">
            <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          {t}
        </span>
      ))}
    </div>
  );
}

// Small icon set — outline, currentColor
function Icon({ name, size = 20 }) {
  const stroke = { stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };
  const paths = {
    arrow: <path d="M4 12h16m-6-6l6 6-6 6" {...stroke} />,
    check: <path d="M4 12.5l5 5L20 6.5" {...stroke} />,
    x:     <path d="M5 5l14 14M19 5L5 19" {...stroke} />,
    lock:  <g {...stroke}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></g>,
    file:  <g {...stroke}><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/></g>,
    state: <g {...stroke}><path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6z"/><path d="M9 3v15M15 6v15"/></g>,
    spark: <g {...stroke}><path d="M12 4v6M12 14v6M4 12h6M14 12h6M6 6l4 4M14 14l4 4M6 18l4-4M14 10l4-4"/></g>,
    notary:<g {...stroke}><circle cx="12" cy="10" r="5"/><path d="M9 14l-2 6 5-3 5 3-2-6"/></g>,
    clock: <g {...stroke}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></g>,
    download: <g {...stroke}><path d="M12 4v12m0 0l-5-5m5 5l5-5"/><path d="M4 19h16"/></g>,
    mail: <g {...stroke}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 7l9 7 9-7"/></g>,
    edit: <g {...stroke}><path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="M14 6l4 4"/></g>,
    plus: <path d="M12 5v14M5 12h14" {...stroke}/>,
    minus: <path d="M5 12h14" {...stroke}/>,
    chevD: <path d="M5 9l7 7 7-7" {...stroke}/>,
    chevR: <path d="M9 5l7 7-7 7" {...stroke}/>,
    chevL: <path d="M15 5l-7 7 7 7" {...stroke}/>,
    map:   <g {...stroke}><path d="M9 4l6 2 6-2v15l-6 2-6-2-6 2V6z"/><path d="M9 4v15M15 6v15"/></g>,
    list:  <g {...stroke}><path d="M4 7h16M4 12h16M4 17h10"/></g>,
    user:  <g {...stroke}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></g>,
    shield:<g {...stroke}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></g>,
    sparkle: <g {...stroke}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l4 4M14 14l4 4M6 18l4-4M14 10l4-4"/></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">{paths[name]}</svg>;
}

// Expose globals
Object.assign(window, {
  POA_TYPES, US_STATES,
  BrandMark, TopBar, Footer, TrustRow, Icon,
});