/* Serenity Wills — refined life-stage selector (React island) */
const { useState } = React;

const TEL = "01924695110";
const TEL_DISPLAY = "01924 695110";

const PhoneIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 5c0 8.3 6.7 15 15 15a2 2 0 0 0 2-2v-2.3a1 1 0 0 0-.8-1l-3.3-.7a1 1 0 0 0-1 .4l-.8 1.1a12 12 0 0 1-5.3-5.3l1.1-.8a1 1 0 0 0 .4-1l-.7-3.3a1 1 0 0 0-1-.8H6a2 2 0 0 0-2 2Z"/>
  </svg>
);
const HomeIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 11.5 12 5l8 6.5"/><path d="M6 10.5V19h12v-8.5"/><path d="M10 19v-4.5h4V19"/>
  </svg>
);
const CheckIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="m5 12.5 4.5 4.5L19 7"/>
  </svg>
);

const SingleIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.55" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="8" r="3.4"/><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.55" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="8" cy="8" r="2.7"/><circle cx="16" cy="8" r="2.7"/>
    <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.55" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="9" cy="7" r="3"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/>
    <circle cx="17.5" cy="10.5" r="2"/><path d="M14.5 20a3.5 3.5 0 0 1 6.8-1.2"/>
  </svg>
);
const RetiredIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.55" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="8.5"/><path d="M12 7.5v4.7l3 2"/>
  </svg>
);

const OPTIONS = [
  {
    id: "single",
    label: "Single",
    Icon: SingleIcon,
    body: (
      <>
        A <strong>Single Will, £150</strong>, usually fits. Everyone over 18 should
        also consider an <strong>LPA, £200</strong>.
      </>
    ),
    cta: { kind: "call" },
  },
  {
    id: "couple",
    label: "Married or with a partner",
    Icon: CoupleIcon,
    body: (
      <>
        <strong>Mirror Wills for a couple, £225</strong>. If you are not married, this
        matters even more, a partner has no automatic right to inherit.
      </>
    ),
    cta: { kind: "book" },
  },
  {
    id: "parent",
    label: "A parent",
    Icon: ParentIcon,
    body: (
      <>
        A Will naming guardians for your children, <strong>from £150</strong>. Without
        one, a court decides who raises them.
      </>
    ),
    cta: { kind: "book" },
  },
  {
    id: "retired",
    label: "Retired",
    Icon: RetiredIcon,
    body: (
      <>
        Worth reviewing an older Will, and many people protect their home with a{" "}
        <strong>Protective Property Trust Will, £375</strong>. LPAs matter more now too.
      </>
    ),
    cta: { kind: "call" },
  },
];

function ResultCta({ cta }) {
  if (cta.kind === "call") {
    return (
      <a className="btn btn--gold" href={`tel:${TEL}`}>
        <PhoneIcon /> Call {TEL_DISPLAY}
      </a>
    );
  }
  return (
    <a className="btn btn--teal" href="#contact">
      <HomeIcon /> Book a free home visit
    </a>
  );
}

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

  return (
    <div className="picker">
      <div className="pick__row" 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="pick"
              aria-pressed={active}
              onClick={() => setSelected(active ? null : o.id)}
            >
              <span className="pick__check"><CheckIcon /></span>
              <span className="pick__icon"><Icon /></span>
              <span className="pick__label">{o.label}</span>
            </button>
          );
        })}
      </div>

      <div className="pick__result" aria-live="polite">
        {current && (
          <div className="pick__panel" key={current.id}>
            <div className="pick__panelbody">
              <p className="pick__line">{current.body}</p>
              <p className="pick__note">
                A starting point only. Mark tailors everything on a free home visit,
                with no obligation.
              </p>
            </div>
            <div className="pick__cta">
              <ResultCta cta={current.cta} />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

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