/* Accountable-style floating line doodles around section / page headlines */
const SECTION_DOODLE_SRC = {
  hourglass: `${STYLED}doodle-hourglass.svg?v=20260716doodle2`,
  document: `${STYLED}doodle-document.svg?v=20260716doodle2`,
  receipt: `${STYLED}doodle-receipt.svg?v=20260716doodle2`,
  calculator: `${STYLED}doodle-calculator.svg?v=20260716doodle2`,
};

const SECTION_DOODLE_PRESETS = {
  features: [
    { icon: "hourglass", slot: "tl", rotate: -18 },
    { icon: "document", slot: "ml", rotate: -14 },
    { icon: "receipt", slot: "mr", rotate: 18 },
  ],
  hero: [
    { icon: "hourglass", slot: "tl", rotate: -16 },
    { icon: "document", slot: "tr", rotate: 14 },
    { icon: "receipt", slot: "br", rotate: 12 },
    { icon: "calculator", slot: "bl", rotate: -12 },
  ],
  heroAlt: [
    { icon: "receipt", slot: "tl", rotate: -16 },
    { icon: "hourglass", slot: "tr", rotate: 18 },
    { icon: "document", slot: "ml", rotate: -10 },
    { icon: "calculator", slot: "br", rotate: 12 },
  ],
  trust: [
    { icon: "receipt", slot: "tl", rotate: -15 },
    { icon: "hourglass", slot: "tr", rotate: 20 },
  ],
  coaches: [
    { icon: "hourglass", slot: "tl", rotate: -12 },
    { icon: "receipt", slot: "tr", rotate: 22 },
    { icon: "document", slot: "mr", rotate: -8 },
  ],
  platform: [
    { icon: "calculator", slot: "tl", rotate: -14 },
    { icon: "document", slot: "tr", rotate: 12 },
    { icon: "hourglass", slot: "br", rotate: -10 },
  ],
  reviews: [
    { icon: "document", slot: "tl", rotate: -10 },
    { icon: "receipt", slot: "br", rotate: 16 },
  ],
  press: [
    { icon: "document", slot: "tl", rotate: -20 },
    { icon: "calculator", slot: "mr", rotate: 14 },
  ],
  partners: [
    { icon: "receipt", slot: "tr", rotate: 16 },
    { icon: "hourglass", slot: "bl", rotate: -14 },
  ],
  cta: [
    { icon: "receipt", slot: "tr", rotate: 18 },
    { icon: "hourglass", slot: "bl", rotate: -16 },
  ],
  wissen: [
    { icon: "document", slot: "ml", rotate: -14 },
    { icon: "calculator", slot: "tr", rotate: 16 },
    { icon: "receipt", slot: "br", rotate: -10 },
  ],
  career: [
    { icon: "hourglass", slot: "tr", rotate: 15 },
    { icon: "document", slot: "bl", rotate: -18 },
  ],
  fragebogen: [
    { icon: "calculator", slot: "tl", rotate: -12 },
    { icon: "document", slot: "tr", rotate: 14 },
    { icon: "receipt", slot: "br", rotate: -8 },
  ],
  /* Dense packs for Leistungen / Service content heads */
  leistung: [
    { icon: "hourglass", slot: "tl", rotate: -16 },
    { icon: "document", slot: "tr", rotate: 14 },
    { icon: "receipt", slot: "mr", rotate: 12 },
  ],
  leistungAlt: [
    { icon: "receipt", slot: "tl", rotate: -14 },
    { icon: "calculator", slot: "tr", rotate: 16 },
    { icon: "document", slot: "bl", rotate: -10 },
  ],
  service: [
    { icon: "calculator", slot: "tl", rotate: -14 },
    { icon: "hourglass", slot: "tr", rotate: 18 },
    { icon: "document", slot: "mr", rotate: -10 },
    { icon: "receipt", slot: "bl", rotate: 12 },
  ],
  serviceBlock: [
    { icon: "document", slot: "tl", rotate: -12 },
    { icon: "receipt", slot: "tr", rotate: 16 },
    { icon: "hourglass", slot: "br", rotate: -14 },
  ],
  section: [
    { icon: "document", slot: "tl", rotate: -12 },
    { icon: "hourglass", slot: "tr", rotate: 16 },
  ],
};

function SectionDoodles({ variant = "section", className = "" }) {
  const items = SECTION_DOODLE_PRESETS[variant] || SECTION_DOODLE_PRESETS.section;
  return (
    <div
      className={`acc-section-doodles acc-section-doodles--${variant}${className ? ` ${className}` : ""}`}
      aria-hidden="true"
    >
      {items.map((item, index) => (
        <span
          key={`${variant}-${item.icon}-${item.slot}-${index}`}
          className={`acc-section-doodle acc-section-doodle--${item.slot}`}
          style={{ "--doodle-rotate": `${item.rotate}deg` }}
        >
          <img src={SECTION_DOODLE_SRC[item.icon]} alt="" width="72" height="72" loading="lazy" decoding="async" />
        </span>
      ))}
    </div>
  );
}

function CookieConsentVideo({ videoId, title }) {
  const [consented, setConsented] = React.useState(false);
  const thumb = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
  const embed = `https://www.youtube-nocookie.com/embed/${videoId}`;

  if (!consented) {
    return (
      <div className="acc-video-consent">
        <button type="button" className="acc-video-thumb" onClick={() => setConsented(true)}>
          <img src={thumb} alt={title} width="720" height="405" loading="lazy" />
          <span className="acc-video-play" aria-hidden="true">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
              <circle cx="24" cy="24" r="24" fill="rgba(0, 101, 75, 0.92)" />
              <path d="M19 15v18l14-9-14-9z" fill="#fff" />
            </svg>
          </span>
        </button>
        <p className="acc-video-consent-text">
          YouTube verwendet Cookies. Diese werden von YouTube genutzt, um Informationen zum Standort, zur Aktivität und zu Präferenzen des Nutzers zu erhalten. Durch Bestätigen der Schaltfläche akzeptieren Sie diese Cookies und können das Video betrachten.
        </p>
        <button type="button" className="acc-btn acc-btn-primary acc-btn-primary--compact" onClick={() => setConsented(true)}>
          Video ansehen
        </button>
      </div>
    );
  }

  return (
    <div className="acc-youtube-wrap">
      <iframe
        title={title}
        src={embed}
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        loading="lazy"
      />
    </div>
  );
}

function ServiceBulletList({ items }) {
  return (
    <ul className="acc-sub-list">
      {items.map((item) => <li key={item}>{item}</li>)}
    </ul>
  );
}

function ContactMiniList() {
  return (
    <ul className="acc-contact-mini-list">
      <li>Markt 9-10, 01945 Ruhland</li>
      <li><a href={PHONE_HREF}>{PHONE_DISPLAY}</a></li>
      <li><a href="mailto:info@st-ru.de">info@st-ru.de</a></li>
      <li>Termine ausserhalb der Buerozeiten nach Vereinbarung</li>
    </ul>
  );
}

function CtaBottomVisual() {
  return (
    <div className="acc-cta-bottom-visual">
      <div className="acc-cta-bottom-visual-media">
        <img
          src={STYLED_IMAGES.cta}
          alt="Persönliche Beratung und Kontakt, Steuerberatungsgesellschaft mbH Ruhland"
          width="600"
          height="338"
          loading="lazy"
        />
      </div>
      <div className="acc-cta-map">
        <iframe
          className="acc-cta-map-iframe"
          title="Standort Steuerberatungsgesellschaft mbH Ruhland, Markt 9-10, 01945 Ruhland"
          src={MAPS_EMBED_URL}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          allow="fullscreen; geolocation"
          allowFullScreen
        />
        <a
          href={MAPS_DIRECTIONS_URL}
          className="acc-cta-map-directions"
          target="_blank"
          rel="noopener noreferrer"
        >
          Anfahrt planen
        </a>
      </div>
    </div>
  );
}

function SubpageCta() {
  return (
    <section className="acc-section acc-container" id="kontaktblock">
      <div className="acc-cta-bottom-card acc-cta-bottom-card--contact">
        <div className="acc-cta-bottom-copy acc-heading-with-doodles">
          <SectionDoodles variant="cta" />
          <h2>Wir beraten Sie gerne</h2>
          <p>
            Wir beraten und unterstützen Sie gerne in steuerlichen Angelegenheiten. Wir sind gerne für Sie da!
            Termine außerhalb der Bürozeiten nach Vereinbarung.
          </p>
          <ContactMiniList />
          <div className="acc-cta-actions">
            <a href="mailto:info@st-ru.de" className="acc-btn acc-btn-primary acc-btn-primary--big">Email schreiben</a>
            <a href={PHONE_HREF} className="acc-btn acc-btn-outline">Telefonisch anfragen</a>
          </div>
        </div>
        <CtaBottomVisual />
        <div className="acc-cta-mascot" aria-hidden="true">
          <img
            src={STYLED_IMAGES.ctaMascot}
            alt=""
            width="148"
            height="220"
            loading="lazy"
            decoding="async"
          />
        </div>
      </div>
    </section>
  );
}

/**
 * Compact Accountable-style trust/compliance strip.
 * Honest Steuerberater marks only — never BaFin.
 */
function TrustComplianceStrip({ variant = "section", heading = true }) {
  const items = TRUST_COMPLIANCE_ITEMS;
  const rootClass =
    variant === "footer"
      ? "acc-trust-compliance acc-trust-compliance--footer"
      : "acc-trust-compliance acc-trust-compliance--section acc-section acc-container";

  return (
    <aside className={rootClass} aria-label="Vertrauen und berufliche Einordnung">
      {heading ? (
        <p className="acc-trust-compliance-heading">
          Vertrauen &amp; Einordnung — als Steuerberatungsgesellschaft, nicht als Bank-App
        </p>
      ) : null}
      <ul className="acc-trust-compliance-row">
        {items.map((item) => {
          const linkProps = item.external
            ? { target: "_blank", rel: "noopener noreferrer" }
            : {};
          return (
            <li key={item.id} className="acc-trust-compliance-item">
              <a
                className="acc-trust-compliance-link"
                href={item.href}
                title={`${item.label} — ${item.caption}`}
                {...linkProps}
              >
                <img
                  className="acc-trust-compliance-logo"
                  src={item.src}
                  alt={item.label}
                  width="160"
                  height="40"
                  loading="lazy"
                  decoding="async"
                />
                <span className="acc-trust-compliance-caption">{item.caption}</span>
              </a>
            </li>
          );
        })}
      </ul>
    </aside>
  );
}