// Shared sub-page components (hero, CTAs, form fields).
// Used by every page except index.html, which uses Hero.jsx instead.

function PageHero({ labelEn, watermark, titleParts, intro, breadcrumb }) {
  // titleParts: array of { t: string, em?: boolean, accent?: boolean }
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section style={{
      padding: isMobile ? "56px 20px" : "88px 48px 88px",
      background: "var(--bg-base)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", top: -180, right: -160,
        width: 560, height: 560, borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(255,232,210,0.45) 0%, transparent 65%)",
        filter: "blur(12px)", pointerEvents: "none",
      }} />
      <div style={{
        position: "absolute", bottom: -80, left: -120,
        width: 360, height: 360, borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(232,224,255,0.55) 0%, transparent 70%)",
        filter: "blur(10px)", pointerEvents: "none",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(rgba(168,140,100,0.18) 1px, transparent 1px)",
        backgroundSize: "28px 28px",
        maskImage: "radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%)",
        opacity: 0.45, pointerEvents: "none",
      }} />
      <div style={{
        display: isMobile ? "none" : "block",
        position: "absolute", top: 30, right: 28,
        fontFamily: 'var(--font-serif)', fontStyle: "italic",
        fontSize: 180, color: "rgba(124,92,255,0.08)",
        lineHeight: 0.9, fontWeight: 400,
        pointerEvents: "none", userSelect: "none",
        writingMode: "vertical-rl", letterSpacing: "-0.04em",
      }}>{watermark || labelEn}</div>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        {breadcrumb && (
          <Reveal>
            <div style={{
              fontFamily: 'var(--font-mono-label)',
              fontSize: 11, letterSpacing: "0.18em",
              color: "#6B6B6B", fontWeight: 500,
              marginBottom: 28, textTransform: "uppercase",
            }}>
              {breadcrumb.map((c, i) => (
                <span key={i}>
                  {i > 0 && <span style={{ margin: "0 12px", opacity: 0.5 }}>/</span>}
                  {c.href ? (
                    <a href={c.href} style={{ color: "#6B6B6B", textDecoration: "none" }}>{c.label}</a>
                  ) : (
                    <span style={{ color: "var(--purple)" }}>{c.label}</span>
                  )}
                </span>
              ))}
            </div>
          </Reveal>
        )}
        <Reveal>
          <div style={{ display: "flex", alignItems: "center", gap: 20, marginBottom: 28 }}>
            <div style={{ width: 48, height: 1, background: "var(--purple)" }} />
            <span style={{ fontFamily: 'var(--font-mono-label)', fontSize: 12, letterSpacing: "0.2em", color: "var(--purple)", fontWeight: 500 }}>
              {labelEn}
            </span>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{
            fontFamily: 'var(--font-serif)',
            fontSize: "clamp(48px, 6vw, 88px)",
            lineHeight: 1.08,
            fontWeight: 400,
            color: "#1A1A1A",
            margin: 0,
            letterSpacing: "-0.02em",
          }}>
            {titleParts.map((x, i) => (
              <span key={i}
                style={{
                  fontFamily: 'var(--font-serif)',
                  fontStyle: x.em ? "italic" : "normal",
                  color: x.accent ? "var(--purple)" : "inherit",
                }}
              >{x.t}</span>
            ))}
          </h1>
        </Reveal>
        {intro && (
          <Reveal delay={160}>
            <p style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 17, color: "#6B6B6B",
              marginTop: 36, maxWidth: 760, lineHeight: 1.95,
            }}>
              {intro}
            </p>
          </Reveal>
        )}
      </div>
    </section>
  );
}

function SectionHeading({ labelEn, children, dark = false, intro, align = "left" }) {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <div style={{ marginBottom: isMobile ? 40 : 64, textAlign: align }}>
      <div style={{ display: "inline-block" }}>
        <SectionLabel dark={dark}>{labelEn}</SectionLabel>
      </div>
      <h2 style={{
        fontFamily: 'var(--font-serif)',
        fontSize: isMobile ? 34 : 52,
        fontWeight: 400,
        color: dark ? "#fff" : "#1A1A1A",
        margin: "20px 0 0",
        letterSpacing: "-0.01em",
        lineHeight: 1.18,
      }}>
        {children}
      </h2>
      {intro && (
        <p style={{
          fontFamily: 'var(--font-sans)',
          fontSize: 16,
          color: dark ? "#B0A8CC" : "#6B6B6B",
          marginTop: 20,
          lineHeight: 1.9,
          maxWidth: 620,
          ...(align === "center" ? { marginLeft: "auto", marginRight: "auto" } : {}),
        }}>
          {intro}
        </p>
      )}
    </div>
  );
}

function BigCTA({ labelEn = "CONTACT", title, sub, primary, secondary, bgImage }) {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section style={{
      padding: isMobile ? "72px 20px" : "140px 48px",
      background: "#1A1530",
      color: "#fff",
      position: "relative",
      overflow: "hidden",
    }}>
      {bgImage && (
        <img src={bgImage} alt="" style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%", objectFit: "cover",
          opacity: 0.35,
        }} />
      )}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(100deg, rgba(26,21,48,0.92) 0%, rgba(58,42,106,0.75) 50%, rgba(124,92,255,0.35) 100%)",
      }} />
      <div style={{
        position: "absolute",
        bottom: "-30%", right: "-5%",
        width: 600, height: 600, borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(124,92,255,0.3) 0%, transparent 70%)",
        pointerEvents: "none",
      }} />
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <Reveal>
          <SectionLabel dark>{labelEn}</SectionLabel>
        </Reveal>
        <Reveal delay={80}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.3fr 1fr", gap: isMobile ? 36 : 72, alignItems: "end", marginTop: 28 }}>
            <div>
              <h2 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: "clamp(44px, 5vw, 72px)",
                fontWeight: 400, margin: 0,
                letterSpacing: "-0.02em", lineHeight: 1.12,
              }}>
                {title}
              </h2>
              {sub && (
                <p style={{
                  fontFamily: 'var(--font-serif)',
                  fontSize: 22, color: "#E8E0FF",
                  marginTop: 26, lineHeight: 1.7, fontWeight: 400,
                }}>
                  {sub}
                </p>
              )}
            </div>
            <div>
              <div style={isMobile ? { borderTop: "1px solid rgba(255,255,255,0.2)", paddingTop: 28 } : { borderLeft: "1px solid rgba(255,255,255,0.2)", paddingLeft: 32 }}>
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  {primary && (
                    <Button variant="primary" href={primary.href}
                      style={{ background: "#fff", color: "#1A1530", justifyContent: "space-between", padding: "18px 28px" }}>
                      <span>{primary.label}</span>
                    </Button>
                  )}
                  {secondary && (
                    <Button variant="onDark" href={secondary.href}
                      style={{ justifyContent: "space-between", padding: "16px 28px" }}>
                      <span>{secondary.label}</span>
                    </Button>
                  )}
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Field({ label, name, type = "text", required, placeholder, children, hint, colSpan = 1 }) {
  const style = {
    width: "100%",
    padding: "14px 16px",
    background: "#fff",
    border: "1px solid #E5E5E5",
    borderRadius: 8,
    fontFamily: 'var(--font-sans)',
    fontSize: 15,
    color: "#1A1A1A",
    outline: "none",
    transition: "border-color 160ms, box-shadow 160ms",
  };
  const onFocus = (e) => {
    e.currentTarget.style.borderColor = "var(--purple)";
    e.currentTarget.style.boxShadow = "0 0 0 3px rgba(124,92,255,0.12)";
  };
  const onBlur = (e) => {
    e.currentTarget.style.borderColor = "#E5E5E5";
    e.currentTarget.style.boxShadow = "none";
  };
  return (
    <div style={{ gridColumn: `span ${colSpan}` }}>
      <label style={{
        display: "block",
        fontFamily: 'var(--font-mono-label)',
        fontSize: 11,
        letterSpacing: "0.18em",
        color: "#6B6B6B",
        fontWeight: 500,
        marginBottom: 10,
        textTransform: "uppercase",
      }}>
        {label}
        {required && <span style={{ color: "var(--purple)", marginLeft: 8 }}>*</span>}
      </label>
      {children ? (
        children
      ) : type === "textarea" ? (
        <textarea name={name} placeholder={placeholder} rows={6}
          onFocus={onFocus} onBlur={onBlur}
          style={{ ...style, resize: "vertical", minHeight: 140 }} />
      ) : (
        <input type={type} name={name} placeholder={placeholder} required={required}
          onFocus={onFocus} onBlur={onBlur}
          style={style} />
      )}
      {hint && (
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12,
          color: "#6B6B6B", marginTop: 8, lineHeight: 1.6,
        }}>
          {hint}
        </div>
      )}
    </div>
  );
}

function InfoRow({ k, children }) {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : "200px 1fr",
      gap: isMobile ? 8 : 32,
      padding: "24px 0",
      borderBottom: "1px solid #E5E5E5",
      alignItems: "start",
    }}>
      <div style={{
        fontFamily: 'var(--font-mono-label)',
        fontSize: 11, letterSpacing: "0.18em",
        color: "var(--purple)", fontWeight: 500,
        textTransform: "uppercase",
        paddingTop: 3,
      }}>
        {k}
      </div>
      <div style={{
        fontFamily: 'var(--font-sans)',
        fontSize: 15, color: "#1A1A1A",
        lineHeight: 1.85,
      }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { PageHero, SectionHeading, BigCTA, Field, InfoRow });