// Shared page primitives — hero, closing CTA, section title, image helpers.

// Remote image with graceful fallback
function RemoteImage({ src, alt, style, ratio = "4/3", overlay, className = "" }) {
  const [err, setErr] = React.useState(false);
  return (
    <div className={`qs-img ${className}`} style={{
      position: "relative", overflow: "hidden",
      borderRadius: "var(--r-md)",
      aspectRatio: ratio,
      background: "linear-gradient(135deg, var(--c-mist), var(--c-haze))",
      ...style,
    }}>
      {!err && (
        <img src={src} alt={alt || ""} loading="lazy"
             onError={() => setErr(true)}
             style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      )}
      {err && (
        <div style={{
          position: "absolute", inset: 0, display: "flex",
          alignItems: "center", justifyContent: "center",
          color: "var(--c-deep)", fontFamily: "var(--f-mono)", fontSize: 11,
          letterSpacing: "0.12em", textTransform: "uppercase",
        }}>{alt || "IMAGE"}</div>
      )}
      {overlay && (
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, transparent 30%, rgba(11,47,51,0.55) 100%)",
        }} />
      )}
    </div>
  );
}

function PageHero({ eyebrow, title, lead, tagline, children, gradient = "20% 60%", image }) {
  return (
    <section style={{ padding: "160px 0 72px", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(ellipse at ${gradient}, rgba(168,218,220,0.14) 0%, transparent 55%)`,
      }} />
      <div className="shell" style={{ position: "relative",
                                       display: image ? "grid" : "block",
                                       gridTemplateColumns: image ? "1.3fr 1fr" : "none",
                                       gap: image ? 64 : 0, alignItems: "center" }}>
        <div>
          {eyebrow && (
            <div className="eyebrow" style={{ marginBottom: 22 }}>{eyebrow}</div>
          )}
          <h1 className="h-display" style={{ fontSize: "clamp(34px, 4.6vw, 72px)", maxWidth: 900 }}>
            {title}
          </h1>
          {tagline && (
            <div style={{
              marginTop: 16, fontFamily: "var(--f-mono)", fontSize: 13,
              color: "var(--c-aqua)", letterSpacing: "0.12em",
            }}>
              {tagline}
            </div>
          )}
          {lead && (
            <p style={{
              fontSize: 16, color: "var(--c-muted)", lineHeight: 1.75,
              maxWidth: 680, marginTop: 26,
            }}>
              {lead}
            </p>
          )}
          {children}
        </div>
        {image && (
          <RemoteImage src={image.src} alt={image.alt} ratio={image.ratio || "4/5"} />
        )}
      </div>
    </section>
  );
}

function SectionHead({ index, eyebrow, title, lead }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 64,
      alignItems: "end", marginBottom: 48,
    }}>
      <div>
        {eyebrow && (
          <div className="eyebrow" style={{ marginBottom: 12 }}>
            {index ? `${index} — ` : ""}{eyebrow}
          </div>
        )}
        <h2 className="h-section" style={{ fontSize: "clamp(24px, 2.6vw, 38px)" }}>{title}</h2>
      </div>
      {lead && (
        <p style={{ fontSize: 15.5, color: "var(--c-muted)", lineHeight: 1.7, margin: 0, maxWidth: 520 }}>
          {lead}
        </p>
      )}
    </div>
  );
}

function ClosingCTA({ title, body, primaryLabel = "聯絡我們", primaryHref = "mailto:qiao.shui.org@gmail.com",
                     secondaryLabel, secondaryHref }) {
  return (
    <section style={{ padding: "100px 0", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 50% 100%, rgba(92,184,178,0.08) 0%, transparent 60%)",
      }} />
      <div className="shell" style={{ position: "relative", textAlign: "center" }}>
        <h2 className="h-display" style={{ fontSize: "clamp(28px, 3.4vw, 52px)", maxWidth: 820, margin: "0 auto" }}>
          {title}
        </h2>
        {body && (
          <p style={{ fontSize: 16, color: "var(--c-muted)", lineHeight: 1.65,
                       maxWidth: 600, margin: "20px auto 0" }}>
            {body}
          </p>
        )}
        <div style={{ marginTop: 32, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <a href={primaryHref} className="btn btn-primary" style={{ textDecoration: "none" }}>
            {primaryLabel}
            <span style={{ fontFamily: "var(--f-mono)" }}>→</span>
          </a>
          {secondaryLabel && (
            <a href={secondaryHref} className="btn btn-ghost" style={{ textDecoration: "none" }}>
              {secondaryLabel}
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

// Images CDN base — original site
const IMG = "https://qiaoshui.com.tw/wp-content/uploads";

window.PageHero = PageHero;
window.SectionHead = SectionHead;
window.ClosingCTA = ClosingCTA;
window.RemoteImage = RemoteImage;
window.IMG = IMG;