/* Friendly Civic — common UI primitives */

const { useState, useEffect, useRef } = React;

/* ----- Watermark layout helper ----- */
function Watermark({ text, top, left, right, size = 240, tone = "mint", rotate = 0 }) {
  const cls = tone === "sand" ? "watermark watermark--sand"
            : tone === "coral" ? "watermark watermark--coral"
            : "watermark";
  return (
    <div className={cls}
      style={{ top, left, right, fontSize: size, transform: `rotate(${rotate}deg)`, lineHeight: 0.9 }}>
      {text}
    </div>
  );
}

/* ----- Section header (English on top, Japanese below + underline) ----- */
function SectionHead({ en, jp, sub, align = "left", accent }) {
  return (
    <div className={`sechead${align === "center" ? " sechead--center" : ""}`}>
      <div className="en">{en}</div>
      <h2 className="jp">
        {jp}
      </h2>
      <div className="underline" />
      {sub && <div className="sub">{sub}</div>}
    </div>
  );
}

/* ----- Wave divider — a soft swooping shape ----- */
function WaveDivider({ from = "#FAFAF7", to = "#E8F2EE", flip = false }) {
  return (
    <svg className="wave" viewBox="0 0 1440 70" preserveAspectRatio="none"
      style={{ transform: flip ? "scaleY(-1)" : "none" }}>
      <rect width="1440" height="70" fill={from} />
      <path d="M0,40 C240,10 520,70 760,40 C980,12 1220,68 1440,30 L1440,70 L0,70 Z" fill={to} />
    </svg>
  );
}

/* ----- Floating circular CTA bottom-right ----- */
function FloatingCTA() {
  return (
    <a href="#network" className="float-cta" aria-label="住吉店オープンのお知らせ">
      <span className="lead">NEWS</span>
      <span className="text">住吉店<br/>オープン<br/>のお知らせ</span>
      <span className="arrow">→</span>
    </a>
  );
}

/* ----- Furigana toggle — toggles body class ----- */
function FuriganaToggle({ on, onChange }) {
  return (
    <button className={`toggle-rb${on ? " active" : ""}`}
      onClick={() => onChange(!on)} aria-pressed={on}>
      <span className="dot" />
      <span className="label"><ruby>振<rt>ふ</rt></ruby>り<ruby>仮<rt>が</rt></ruby><ruby>名<rt>な</rt></ruby></span>
      <span style={{ opacity: 0.6, fontSize: 11 }}>{on ? "ON" : "OFF"}</span>
    </button>
  );
}

/* expose */
Object.assign(window, { Watermark, SectionHead, WaveDivider, FloatingCTA, FuriganaToggle });