/* Serenity Wills — compact life-stage nudge (React island) */
const { useState, useRef, useEffect } = React;

const PersonIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="8" r="3.2"/><path d="M5.5 19.5a6.5 6.5 0 0 1 13 0"/>
  </svg>
);
const CoupleIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="8" cy="8" r="2.6"/><circle cx="16" cy="8" r="2.6"/>
    <path d="M2.5 19a5.5 5.5 0 0 1 9.2-4.1"/><path d="M12.3 14.9A5.5 5.5 0 0 1 21.5 19"/>
  </svg>
);
const ParentIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="9" cy="7" r="2.8"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/>
    <circle cx="17.5" cy="10.5" r="1.9"/><path d="M14.6 20a3.5 3.5 0 0 1 6.7-1.2"/>
  </svg>
);
const ClockIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="8.5"/><path d="M12 7.5v4.7l3 2"/>
  </svg>
);
const UpIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 19V6"/><path d="m6 11 6-6 6 6"/>
  </svg>
);

const OPTIONS = [
  {
    id: "single",
    label: "I am single",
    Icon: PersonIcon,
    suggestion: (
      <>
        Sounds like a <strong>Single Will, £150</strong>, see above. Everyone over 18
        should also consider an LPA, £200.
      </>
    ),
  },
  {
    id: "couple",
    label: "Married or partner",
    Icon: CoupleIcon,
    suggestion: (
      <>
        Sounds like <strong>Mirror Wills, £225</strong>, see above. If you are not
        married, this matters even more.
      </>
    ),
  },
  {
    id: "parent",
    label: "I am a parent",
    Icon: ParentIcon,
    suggestion: (
      <>
        A Will naming guardians, <strong>£150 single or £225 for a couple</strong>,
        see above. Without one, a court decides who raises your children.
      </>
    ),
  },
  {
    id: "retired",
    label: "I am retired",
    Icon: ClockIcon,
    suggestion: (
      <>
        Worth reviewing an older Will. Many protect their home with a{" "}
        <strong>Protective Property Trust Will, £375</strong>, see above, plus LPAs.
      </>
    ),
  },
];

function Nudge() {
  const [selected, setSelected] = useState(null);
  const current = OPTIONS.find((o) => o.id === selected) || null;

  return (
    <div>
      <div className="seg" role="group" aria-label="Which sounds most like you?">
        {OPTIONS.map((o) => {
          const Icon = o.Icon;
          const active = selected === o.id;
          return (
            <button
              key={o.id}
              type="button"
              className="seg__btn"
              aria-pressed={active}
              onClick={() => setSelected(active ? null : o.id)}
            >
              <Icon /> {o.label}
            </button>
          );
        })}
      </div>

      <div className={"suggest" + (current ? " is-open" : "")} aria-live="polite">
        <div className="suggest__clip">
          {current && (
            <div className="suggest__inner">
              <span className="suggest__arrow"><UpIcon /></span>
              <p className="suggest__text">
                {current.suggestion}{" "}
                <a className="suggest__link" href="#fees">See the fees above</a>
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("selector-root")).render(<Nudge />);