/* ============================================================
   Shared page utilities — components used across multiple pages
   ============================================================ */

const { useState: useStateU, useEffect: useEffectU } = React;

/* Compact page hero — light or dark variant */
const PageHero = ({ eyebrow, title, lede, variant = "dark", children }) => (
  <section className={"page-hero page-hero--" + variant}>
    <div className="container">
      <div className="page-hero-inner">
        {eyebrow && <div className={"eyebrow" + (variant === "dark" ? " on-dark" : "")}>{eyebrow}</div>}
        <h1>{title}</h1>
        {lede && <p className="lede">{lede}</p>}
        {children && <div className="page-hero-ctas">{children}</div>}
      </div>
    </div>
  </section>
);

/* Section wrapper with eyebrow + heading + lede */
const SectionHead = ({ eyebrow, title, lede, onDark = false }) => (
  <div className="section-head">
    {eyebrow && <div className={"eyebrow" + (onDark ? " on-dark" : "")}>{eyebrow}</div>}
    {title && <h2 style={onDark ? { color: "#F4F6F9" } : null}>{title}</h2>}
    {lede && <p className="lede">{lede}</p>}
  </div>
);

/* CTA band — reusable */
const CTABand = ({ eyebrow = "Ready when you are", title, lede, ctaLabel = "Book Storage", ctaHref = "book.html", secondaryLabel, secondaryHref }) => (
  <section className="final-cta">
    <div className="container">
      <div>
        <div className="eyebrow on-dark" style={{ color: "rgba(255,255,255,0.8)" }}>{eyebrow}</div>
        <h2>{title}</h2>
        {lede && <p className="lede">{lede}</p>}
      </div>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <a className="btn btn-primary" href={ctaHref} style={{ fontSize: 18, padding: "18px 28px" }}>
          {ctaLabel} <Icon.Arrow size={16} />
        </a>
        {secondaryLabel && (
          <a className="btn btn-secondary on-dark" href={secondaryHref} style={{ fontSize: 18, padding: "18px 28px" }}>
            {secondaryLabel}
          </a>
        )}
      </div>
    </div>
  </section>
);

/* Tick / cross list items */
const TickList = ({ items, variant = "tick" }) => (
  <ul className={"check-list check-list--" + variant}>
    {items.map((it, i) => (
      <li key={i}>
        <span className="mark" aria-hidden>{variant === "tick" ? "→" : "×"}</span>
        <span>{it}</span>
      </li>
    ))}
  </ul>
);

/* Form primitives */
const Field = ({ label, required, hint, children, full = false }) => (
  <label className={"field" + (full ? " field--full" : "")}>
    <span className="field-label">
      {label}{required && <span className="field-req"> *</span>}
    </span>
    {children}
    {hint && <span className="field-hint">{hint}</span>}
  </label>
);

const Input = ({ type = "text", ...props }) => (
  <input className="field-input" type={type} {...props} />
);
const Textarea = (props) => <textarea className="field-input" rows="4" {...props} />;
const Select = ({ options, placeholder, ...props }) => (
  <select className="field-input field-select" {...props}>
    {placeholder && <option value="">{placeholder}</option>}
    {options.map((o, i) => {
      const v = typeof o === "object" ? o.value : o;
      const l = typeof o === "object" ? o.label : o;
      return <option key={i} value={v}>{l}</option>;
    })}
  </select>
);

/* Generic enquiry form — pass fields config + submit label */
const EnquiryForm = ({ fields, submitLabel = "Send enquiry", helperText, onSubmit }) => {
  const [state, setState] = useStateU({});
  const [sent, setSent] = useStateU(false);
  const handle = (key) => (e) => setState((s) => ({ ...s, [key]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (onSubmit) onSubmit(state);
    setSent(true);
  };
  if (sent) {
    return (
      <div className="form-sent">
        <div className="form-sent-mark">→</div>
        <h3>Thanks — we've got it.</h3>
        <p>We'll respond within one business day. For anything urgent, give us a call on <a href="tel:0359880000">03 5988 0000</a>.</p>
      </div>
    );
  }
  return (
    <form className="enquiry-form" onSubmit={submit}>
      <div className="form-grid">
        {fields.map((f, i) => (
          <Field key={f.key} label={f.label} required={f.required} hint={f.hint} full={f.full}>
            {f.type === "textarea" ? (
              <Textarea required={f.required} value={state[f.key] || ""} onChange={handle(f.key)} placeholder={f.placeholder} />
            ) : f.type === "select" ? (
              <Select required={f.required} options={f.options} placeholder={f.placeholder} value={state[f.key] || ""} onChange={handle(f.key)} />
            ) : (
              <Input type={f.type || "text"} required={f.required} value={state[f.key] || ""} onChange={handle(f.key)} placeholder={f.placeholder} />
            )}
          </Field>
        ))}
      </div>
      {helperText && <p className="form-helper">{helperText}</p>}
      <button type="submit" className="btn btn-primary" style={{ marginTop: 24 }}>
        {submitLabel} <Icon.Arrow size={16} />
      </button>
    </form>
  );
};

/* Page wrapper — applies body class + uses Header/TrustStrip/Footer */
const Page = ({ children }) => (
  <>
    <Header />
    {children}
    <TrustStrip />
    <Footer />
  </>
);

Object.assign(window, { PageHero, SectionHead, CTABand, TickList, Field, Input, Textarea, Select, EnquiryForm, Page });