/* @dsCard group="Rechnung Landing" viewport="1440x900" name="Rechnung Landing, Google Ads" subtitle="Accountable 1:1 layout, Steuerberatung Ruhland Mandanten-Kontext" */

/* Accountable trust trio, light tinted cards + corner SVG icons */
const TRUST_CARDS = [
  {
    icon: "customer-success.svg",
    title: "Steuerfragen kompetent beantwortet",
    body: "Unser Team hilft bei Fragen zu Buchhaltung, Steuern und Sozialversicherung, persönlich, telefonisch oder per Email.",
    alt: "Kundenservice und Steuerberatung",
  },
  {
    icon: "tax-guarantee.svg",
    title: "Fachlich fundiert & termingerecht",
    body: "Jahresabschlüsse und Steuererklärungen nach aktuellem Recht, zuverlässig, prüfungssicher und auf den Punkt.",
    alt: "Garantie für Steuererklärungen",
  },
  {
    icon: "tax-advisor.svg",
    title: "Persönliche Betreuung vor Ort",
    body: "Markt 9-10 in Ruhland, kurze Wege, feste Ansprechpartner und Beratung auf Augenhöhe.",
    alt: "Persönliche Betreuung vor Ort am Markt 9-10 in Ruhland",
  },
];

function PurpleStar({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01L12 2z" />
    </svg>
  );
}

/** Heart filled with German flag stripes (black / red / gold) — not a rectangle. */
function GermanFlagIcon() {
  return (
    <svg
      className="acc-hero-pill-flag"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 22"
      width="18"
      height="16"
      aria-hidden="true"
      focusable="false"
    >
      <defs>
        <clipPath id="acc-de-heart-clip">
          <path d="M12 20.4C12 20.4 2.5 14.2 2.5 8.1C2.5 4.9 4.9 2.6 7.8 2.6c1.8 0 3.3.9 4.2 2.3C12.9 3.5 14.4 2.6 16.2 2.6c2.9 0 5.3 2.3 5.3 5.5 0 6.1-9.5 12.3-9.5 12.3z" />
        </clipPath>
      </defs>
      <g clipPath="url(#acc-de-heart-clip)">
        <rect x="0" y="0" width="24" height="7.4" fill="#000000" />
        <rect x="0" y="7.4" width="24" height="7.3" fill="#D80027" />
        <rect x="0" y="14.7" width="24" height="7.5" fill="#FFDA44" />
      </g>
    </svg>
  );
}

function AddisonVideoBlock() {
  const [playing, setPlaying] = React.useState(false);
  const video = VIDEO_EMBEDS[0];

  if (playing) {
    return (
      <div className="acc-video-embed-wrap">
        <div className="acc-video-embed">
          <iframe
            src={`${video.embed}?autoplay=1&rel=0`}
            title={video.title}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            loading="lazy"
          />
        </div>
      </div>
    );
  }

  return (
    <div className="acc-video-embed-wrap">
      <button
        type="button"
        className="acc-video-thumb"
        onClick={() => setPlaying(true)}
        aria-label={`${video.title} abspielen`}
      >
        <img
          src={video.thumb}
          alt={video.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>
        <span className="acc-video-caption">{video.title}</span>
      </button>
    </div>
  );
}

function SparkleIcon() {
  return (
    <svg width="40" height="40" viewBox="0 0 40 40" aria-hidden="true">
      <defs>
        <linearGradient id="sparkle-grad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#278ED3" />
          <stop offset="50%" stopColor="#00654B" />
          <stop offset="82%" stopColor="#0a8f6a" />
          <stop offset="100%" stopColor="#c4a35a" />
        </linearGradient>
      </defs>
      <path fill="url(#sparkle-grad)" d="M20 2l2.5 8.5L31 13l-7 5.5L26 28l-6-4.5L14 28l2-9.5L9 13l8.5-2.5L20 2z" />
    </svg>
  );
}

function PlayIcon() {
  return (
    <svg className="acc-play-icon" viewBox="0 0 12 12" aria-hidden="true">
      <path d="M2 1.5v9l8-4.5-8-4.5z" />
    </svg>
  );
}

const FEATURE_ART_FILES = {
  finanzbuchhaltung: "finanzbuchhaltung.svg",
  jahresabschluss: "jahresabschluss.svg",
  lohnbuchhaltung: "lohnbuchhaltung.svg",
  addison: "addison.svg",
};

function PlatformSliderVisual({ visual }) {
  if (!visual) return null;

  switch (visual.type) {
    case "feature": {
      const src =
        (STYLED_IMAGES.featureArt && STYLED_IMAGES.featureArt[visual.kind]) ||
        (FEATURE_ART_FILES[visual.kind]
          ? `${ASSETS}feature-art/${FEATURE_ART_FILES[visual.kind]}`
          : null);
      if (!src) return null;
      return (
        <div className="platform-slider_visual" aria-hidden="true">
          <img
            className="platform-slider_visual-img"
            src={src}
            alt=""
            width="320"
            height="320"
            loading="lazy"
          />
        </div>
      );
    }
    case "icon":
      return (
        <div className="platform-slider_visual platform-slider_visual--icon" aria-hidden="true">
          <img
            className="platform-slider_visual-icon"
            src={ICONS + visual.file}
            alt=""
            width="120"
            height="126"
            loading="lazy"
          />
        </div>
      );
    default: {
      const _exhaustive = visual.type;
      void _exhaustive;
      return null;
    }
  }
}

const PLATFORM_TAB_ICONS = {
  gruendungsberatung: "tax-advisor.svg",
  finanzbuchhaltung: "banking.svg",
  lohnbuchhaltung: "customer-success.svg",
  jahresabschluss: "tax-guarantee.svg",
  "addison-oneclick": "service-addison.svg",
  "online-rechner": "service-calculator.svg",
};

function platformTabIconSrc(tab) {
  if (PLATFORM_TAB_ICONS[tab.id]) return ICONS + PLATFORM_TAB_ICONS[tab.id];
  if (tab.visual && tab.visual.type === "icon" && tab.visual.file) {
    return ICONS + tab.visual.file;
  }
  return ICONS + "service-support.svg";
}

function PlatformSlider({ tabs }) {
  const [activeId, setActiveId] = React.useState(tabs[0].id);
  const tabRefs = React.useRef([]);

  const activeIndex = tabs.findIndex((tab) => tab.id === activeId);

  const selectTab = React.useCallback((id, focus = false) => {
    setActiveId(id);
    if (!focus) return;
    const index = tabs.findIndex((tab) => tab.id === id);
    const node = tabRefs.current[index];
    if (node) node.focus();
  }, [tabs]);

  const onTabListKeyDown = (event) => {
    let nextIndex = null;
    switch (event.key) {
      case "ArrowRight":
      case "ArrowDown":
        nextIndex = (activeIndex + 1) % tabs.length;
        break;
      case "ArrowLeft":
      case "ArrowUp":
        nextIndex = (activeIndex - 1 + tabs.length) % tabs.length;
        break;
      case "Home":
        nextIndex = 0;
        break;
      case "End":
        nextIndex = tabs.length - 1;
        break;
      default:
        return;
    }
    event.preventDefault();
    selectTab(tabs[nextIndex].id, true);
  };

  return (
    <section className="platform-slider acc-section" aria-labelledby="platform-slider-heading">
      <div className="acc-container">
        <div className="platform-slider_heading acc-heading-with-doodles">
          <SectionDoodles variant="platform" />
          <h2 id="platform-slider-heading">Leistungen, die zu Ihrem Unternehmen passen</h2>
          <p>
            Von der Gründung bis zum Jahresabschluss, wählen Sie eine Leistung und erfahren Sie, wie wir Sie
            unterstützen.
          </p>
        </div>

        <div className="platform-slider_component">
          <div
            role="tablist"
            className="platform-slider_menu"
            data-slider="nav"
            aria-label="Unsere Leistungen"
            onKeyDown={onTabListKeyDown}
          >
            {tabs.map((tab, index) => {
              const selected = tab.id === activeId;
              const tabStateClass = selected
                ? " platform-slider_tab--active is-active"
                : " platform-slider_tab--idle";
              return (
                <button
                  key={tab.id}
                  type="button"
                  role="tab"
                  id={`platform-tab-${tab.id}`}
                  className={`platform-slider_tab${tabStateClass}`}
                  aria-selected={selected}
                  aria-controls={`platform-panel-${tab.id}`}
                  tabIndex={selected ? 0 : -1}
                  ref={(node) => {
                    tabRefs.current[index] = node;
                  }}
                  onClick={() => selectTab(tab.id)}
                >
                  <span className="platform-slider_tab-icon" aria-hidden="true">
                    <img src={platformTabIconSrc(tab)} alt="" width="28" height="28" />
                  </span>
                  <span className="platform-slider_tab-label">{tab.label}</span>
                </button>
              );
            })}
          </div>

          <div className="platform-slider_panels">
            {tabs.map((tab) => {
              const selected = tab.id === activeId;
              return (
                <div
                  key={tab.id}
                  role="tabpanel"
                  id={`platform-panel-${tab.id}`}
                  className={`platform-slider_panel${selected ? " is-active" : ""}`}
                  aria-labelledby={`platform-tab-${tab.id}`}
                  hidden={!selected}
                >
                  <div className="platform-slider_panel-copy">
                    <h3 className="platform-slider_panel-title">{tab.label}</h3>
                    <p className="platform-slider_panel-intro">{tab.intro}</p>
                    <ul className="platform-slider_panel-list">
                      {tab.highlights.map((item) => (
                        <li key={item}>{item}</li>
                      ))}
                    </ul>
                    <div className="platform-slider_panel-actions">
                      <a href={tab.href} className="acc-btn acc-btn-primary">
                        {tab.ctaLabel}
                      </a>
                      <a href={CONTACT_HREF} className="acc-btn acc-btn-outline">
                        Erstgespräch vereinbaren
                      </a>
                    </div>
                  </div>
                  <PlatformSliderVisual visual={tab.visual} />
                </div>
              );
            })}
          </div>
        </div>

        <div className="platform-slider_pricing">
          <div className="platform-slider_pricing-copy">
            <strong>Faire &amp; transparente Beratung</strong>
            <span>
              Individuelle Honorare nach Aufwand, wir besprechen Ihren Bedarf persönlich und unverbindlich.
            </span>
          </div>
          <a href={CONTACT_HREF} className="acc-btn acc-btn-light-purple">
            Erstgespräch vereinbaren
          </a>
        </div>
      </div>
    </section>
  );
}

function FeatureArtwork({ kind, alt }) {
  const artSrc =
    (STYLED_IMAGES.featureArt && STYLED_IMAGES.featureArt[kind]) ||
    `${ASSETS}feature-art/${kind}.svg?v=20260716add`;

  return (
    <div className={`acc-feature-art-card acc-feature-art-card--${kind}`}>
      <div className="acc-feature-art-frame" aria-hidden="true" />
      <div className="acc-feature-art-inner">
        <img
          className="acc-feature-art-image"
          src={artSrc}
          alt={alt}
          width="720"
          height="560"
          loading="lazy"
        />
      </div>
    </div>
  );
}

function TrustCard({ icon, title, body, alt }) {
  return (
    <div className="acc-trust-card">
      <h3>{title}</h3>
      <p>{body}</p>
      <div className="acc-trust-card-icon-wrap">
        <img className="card-icon" src={ICONS + icon} alt={alt || ""} width="94" height="99" loading="lazy" />
      </div>
    </div>
  );
}

function ReviewMarquee({ reviews }) {
  const slides = [...reviews, ...reviews];

  return (
    <div className="acc-review-marquee" aria-label="Google Bewertungen">
      <div className="acc-review-marquee__track">
        {slides.map((r, i) => {
          const hasQuote = Boolean(r.text);
          const quote = hasQuote ? r.text.replace(/\s*\n\s*/g, " ").replace(/\s{2,}/g, " ").trim() : null;

          return (
            <article
              key={`${r.author}-${i}`}
              className="acc-review-card"
              aria-hidden={i >= reviews.length ? "true" : undefined}
            >
              <div className="acc-review-card-top">
                <span className="acc-review-avatar" aria-hidden="true">{r.initials}</span>
                <div className="acc-rating-stars acc-rating-stars--subtle" aria-label={`${r.stars} von 5 Sternen`}>
                  {Array.from({ length: r.stars }).map((_, j) => <PurpleStar key={j} size={14} />)}
                </div>
              </div>
              {hasQuote ? (
                <p className="acc-review-quote">„{quote}“</p>
              ) : (
                <div className="acc-review-quote acc-review-quote--tag">
                  {(r.positiveTags || []).map((tag) => (
                    <span key={tag} className="acc-review-attr">{tag}</span>
                  ))}
                  <span className="acc-review-attr-note">{r.note || "Positive Google Bewertung ohne Freitext."}</span>
                </div>
              )}
              <div className="acc-review-footer">
                <div className="acc-review-author-block">
                  <span className="acc-review-author">{r.author}</span>
                  <span className="acc-review-source">{r.source}</span>
                </div>
                <span className="acc-review-date">{r.date}</span>
              </div>
            </article>
          );
        })}
      </div>
    </div>
  );
}

function PressCard({ item }) {
  const [imageFailed, setImageFailed] = React.useState(false);
  const showImage = item.image && !imageFailed;

  return (
    <>
      {showImage ? (
        <span className="acc-press-media" aria-hidden="true">
          <img
            src={item.image}
            alt=""
            loading="lazy"
            onError={() => setImageFailed(true)}
          />
        </span>
      ) : (
        <span className="acc-press-media acc-press-media--fallback" aria-hidden="true" />
      )}
      <span className="acc-press-category">{item.category}</span>
      <span className="acc-press-caption">
        <strong>{item.title}</strong>
      </span>
    </>
  );
}

function CoachArrowIcon({ direction }) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      {direction === "left" ? <path d="M15 18l-6-6 6-6" /> : <path d="M9 18l6-6-6-6" />}
    </svg>
  );
}

function TeamCarousel({ members }) {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const stripRef = React.useRef(null);

  const setActive = React.useCallback((index) => {
    setActiveIndex(index);
  }, []);

  const scrollToIndex = React.useCallback((index) => {
    const container = stripRef.current;
    if (!container) return;
    const card = container.querySelectorAll("[data-tax-coach-item]")[index];
    if (!card) return;
    container.scrollTo({ left: card.offsetLeft - container.offsetLeft, behavior: "smooth" });
    setActive(index);
  }, [setActive]);

  const scroll = (dir) => {
    const next = Math.max(0, Math.min(members.length - 1, activeIndex + dir));
    scrollToIndex(next);
  };

  React.useEffect(() => {
    const container = stripRef.current;
    if (!container) return;

    const mobileQuery = window.matchMedia("(max-width: 767px)");
    let scrollTimeout = null;

    const onScroll = () => {
      if (!mobileQuery.matches) return;
      window.clearTimeout(scrollTimeout);
      scrollTimeout = window.setTimeout(() => {
        const cards = Array.from(container.querySelectorAll("[data-tax-coach-item]"));
        let nearestIndex = 0;
        let minDistance = Infinity;
        cards.forEach((card, index) => {
          const distance = Math.abs(container.scrollLeft - card.offsetLeft);
          if (distance < minDistance) {
            minDistance = distance;
            nearestIndex = index;
          }
        });
        setActive(nearestIndex);
      }, 80);
    };

    container.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      window.clearTimeout(scrollTimeout);
      container.removeEventListener("scroll", onScroll);
    };
  }, [members.length, setActive]);

  const activateOnDesktop = (index) => {
    if (window.matchMedia("(min-width: 768px)").matches) {
      setActive(index);
    }
  };

  return (
    <div className="acc-coach-carousel-wrap">
      <button
        type="button"
        className="acc-coach-nav-btn acc-coach-nav-btn--overlay acc-coach-nav-btn--prev"
        onClick={() => scroll(-1)}
        aria-label="Vorheriges Teammitglied"
      >
        <CoachArrowIcon direction="left" />
      </button>
      <button
        type="button"
        className="acc-coach-nav-btn acc-coach-nav-btn--overlay acc-coach-nav-btn--next"
        onClick={() => scroll(1)}
        aria-label="Nächstes Teammitglied"
      >
        <CoachArrowIcon direction="right" />
      </button>

      <div
        id="tax-coach-detail"
        className="acc-coach-strip"
        ref={stripRef}
        role="list"
      >
        {members.map((member, index) => {
          const isActive = index === activeIndex;
          return (
            <article
              key={member.name}
              className={`acc-coach-card${isActive ? " is-active" : ""}`}
              role="listitem"
              data-tax-coach-item
              data-coach-index={index}
              aria-current={isActive ? "true" : undefined}
              onClick={() => activateOnDesktop(index)}
              onMouseEnter={() => activateOnDesktop(index)}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  activateOnDesktop(index);
                }
              }}
              tabIndex={0}
            >
              <div className="acc-coach-portrait" aria-hidden="true">
                <img
                  className="acc-coach-portrait-img"
                  src={STYLED_IMAGES.teamPlaceholder}
                  alt=""
                  width="220"
                  height="280"
                  loading="lazy"
                />
                <span className="acc-coach-initials">{member.initials}</span>
              </div>
              <div className="acc-coach-overlay" data-overlay aria-hidden="true" />
              <div className="acc-coach-caption">
                <div className="acc-coach-name">{member.name}</div>
                <div className="acc-coach-role">{member.role}</div>
              </div>
            </article>
          );
        })}
      </div>
    </div>
  );
}

function AiChatSection() {
  const [messages, setMessages] = React.useState([]);
  const chatBodyRef = React.useRef(null);

  const questions = [
    "Was bietet ADDISON OneClick konkret?",
    "Welche Leistungen übernehmen Sie bei der Finanzbuchhaltung?",
    "Wie läuft die Lohnbuchhaltung bei Ihnen ab?",
  ];
  const answers = {
    "Was bietet ADDISON OneClick konkret?":
      "Mit ADDISON OneClick tauschen Sie Daten cloudbasiert und sicher mit unserer Kanzlei aus: digitales Postfach, testiertes Kassenbuch, Finanzreports in Echtzeit, Online Austausch von Lohnformularen mit Plausibilitätsprüfung, oder ADDISON OneClick Online Buchhaltung für selbstbuchende Mandanten. Ganz ohne Update und Installationsaufwand.",
    "Welche Leistungen übernehmen Sie bei der Finanzbuchhaltung?":
      "Wir übernehmen die kontinuierliche Abstimmung Ihrer Konten mit Reporting, organisieren Ihr Rechnungswesen, kontieren laufende Geschäftsfälle EDV gerecht, erstellen kurzfristige Erfolgsrechnungen und verwalten offene Posten von Kunden und Lieferanten.",
    "Wie läuft die Lohnbuchhaltung bei Ihnen ab?":
      "Wir führen laufende Lohnabrechnungen und Gehaltsabrechnungen durch, melden bei Krankenkassen an und ab, verbinden uns online mit Sozialversicherungsträgern und Finanzamt, beraten zu Dienstverträgen und unterstützen bei Lohnsteuer und Sozialversicherungsprüfungen.",
  };

  const ask = (q) => {
    setMessages((prev) => [...prev, { role: "user", text: q }, { role: "bot", text: answers[q] }]);
  };

  React.useEffect(() => {
    const el = chatBodyRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [messages]);

  return (
    <section className="acc-ai acc-section acc-container" aria-labelledby="ai-heading">
      <div className="acc-ai-card">
        <h2 id="ai-heading" className="acc-ai-heading">
          Ihr <span className="acc-ai-gradient">digitaler Kanal</span> zur Kanzlei.
        </h2>
        <p className="acc-ai-sub">
          Mit <strong>ADDISON OneClick</strong> bieten wir Ihnen eine moderne, cloudbasierte Lösung für den sicheren Datenaustausch mit unserer Kanzlei, persönlich in Ruhland oder digital von überall.
        </p>

        <div className="acc-chat-ui">
          <div className="acc-chat-header">
            <SparkleIcon />
            <h3>Fragen zu Buchhaltung, Steuern &amp; ADDISON OneClick</h3>
          </div>
          <div className="acc-chat-body" ref={chatBodyRef}>
            {messages.length === 0 && questions.map((q) => (
              <button key={q} type="button" className="acc-chat-chip" onClick={() => ask(q)}>{q}</button>
            ))}
            {messages.map((m, i) => (
              <div key={i} className={`acc-chat-msg acc-chat-msg--${m.role}`}>{m.text}</div>
            ))}
          </div>
          <div className="acc-chat-input-bar">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
              <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
              <line x1="12" y1="19" x2="12" y2="23" />
            </svg>
            <input type="text" placeholder="Nachricht senden" readOnly aria-label="Nachricht senden" />
          </div>
        </div>

        <div className="acc-ai-video">
          <AddisonVideoBlock />
        </div>

        <div className="acc-ai-cta-wrap">
          <a href={CONTACT_HREF} className="acc-btn acc-btn-primary">
            Beratung vereinbaren
          </a>
        </div>

        <div className="acc-ai-mascot" aria-hidden="true">
          <img
            src={STYLED_IMAGES.aiMascot}
            alt=""
            width="160"
            height="248"
            loading="lazy"
            decoding="async"
          />
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  "Gründungsberatung",
  "Finanzbuchhaltung",
  "Lohnbuchhaltung",
  "Unternehmensberatung",
  "ADDISON OneClick",
  "Einkommensteuererklärung",
  "Jahresabschluss",
  "Unternehmensnachfolge",
  "Steuern und Sozialversicherung",
  "Online Rechner",
];

const FEATURES = [
  {
    tag: "Finanzbuchhaltung",
    title: "Professionelle Buchführung: Rechnungen, Belege und Auswertungen",
    desc: "Die Finanzbuchhaltung ist ein zeitintensiver Arbeitsbereich. Diese Aufgabe übernehmen wir gerne für Sie.",
    bullets: [
      "Kontinuierliche Abstimmung Ihrer Konten und Reporting",
      "Organisation des Rechnungswesens",
      "Verwaltung offener Posten von Kunden und Lieferanten",
    ],
    visual: "finanzbuchhaltung",
  },
  {
    tag: "Steuern",
    title: "Jahresabschluss und Einkommensteuererklärung: fachlich fundiert",
    desc: "Wir erstellen gerne Ihre Einkommensteuererklärung und unterstützen Sie bei steueroptimalen Lösungen.",
    bullets: [
      "Erstellung Jahresabschluss gemäß handelsrechtlichen und bilanzsteuerrechtlichen Vorgaben",
      "Prüfung Ihres Steuerbescheids",
      "Unterstützung bei Einsprüchen und Stundungsanträgen",
    ],
    visual: "jahresabschluss",
    reverse: true,
  },
  {
    tag: "Lohn",
    title: "Lohnbuchhaltung mit aktuellem Fachwissen",
    desc: "Besonders bei der Lohnbuchhaltung ist umfangreiches und aktuelles Wissen gefragt, wir stellen Ihnen unser Fachwissen gerne zur Verfügung.",
    bullets: [
      "Laufende Lohnabrechnung und Gehaltsabrechnung",
      "Onlineverbindung zu Sozialversicherungsträgern und Finanzamt",
      "Beratung zur Gestaltung von Lohn und Gehaltszahlungen",
    ],
    visual: "lohnbuchhaltung",
  },
  {
    tag: "Digital",
    title: "ADDISON OneClick: digitaler Datenaustausch mit Ihrer Kanzlei",
    desc: "Jetzt erfolgreich in eine digitale Zukunft starten, cloudbasiert, sicher und ohne Updateaufwand.",
    bullets: [
      "Digitales Postfach für sicheren Nachrichtenaustausch",
      "Finanzreports für stets aktuelle Unternehmensdaten",
      "ADDISON OneClick Online Buchhaltung für selbstbuchende Mandanten",
    ],
    visual: "addison",
    reverse: true,
  },
];

const RATING_PILLS = [
  {
    label: GOOGLE_REVIEWS.sourceLabel,
    score: String(GOOGLE_REVIEWS.aggregateStars).replace(".", ","),
    count: `${GOOGLE_REVIEWS.aggregateCount} Bewertungen`,
    href: GOOGLE_REVIEWS.url,
  },
];

const USEFUL_LINKS = {
  title: "Steuerberatung Ruhland",
  cols: [
    [
      { label: "Gründungsberatung", href: "leistungen.html#gruendungsberatung" },
      { label: "Finanzbuchhaltung", href: "leistungen.html#finanzbuchhaltung" },
      { label: "Lohnbuchhaltung", href: "leistungen.html#lohnbuchhaltung" },
    ],
    [
      { label: "Unternehmensberatung", href: "leistungen.html#unternehmensberatung" },
      { label: "Jahresabschluss", href: "leistungen.html#jahresabschluss" },
      { label: "Unternehmensnachfolge", href: "leistungen.html#unternehmensnachfolge" },
    ],
    [
      { label: "ADDISON OneClick", href: "leistungen.html#addison-oneclick" },
      { label: "Brutto Netto Rechner", href: "steuerwissen.html#rechner" },
      { label: "Annuitäten Rechner", href: "steuerwissen.html#rechner" },
    ],
    [
      { label: "Steuerrechner & Tipps", href: "steuerwissen.html" },
      { label: "Steuernews für Mandanten", href: "aktuelles.html" },
      { label: "Karriere", href: "karriere.html" },
    ],
  ],
};

function RechnungLandingPage() {
  useStickyCta();
  const promo = usePromoDismiss();
  const menu = useMobileMenu();

  return (
    <div className="acc-page">
      <SharedPromoBar visible={promo.visible} leaving={promo.leaving} onDismiss={promo.dismiss} />

      <div className="acc-nav-zone">
        <SharedHeader menu={menu} activePage="home" />

        {/* 2, Hero */}
        <section className="acc-hero acc-section--first" id="hero-section">
          <div className="acc-container acc-hero-inner">
            <div className="acc-hero-pill">
              <span className="acc-hero-pill-flag-wrap" aria-hidden="true">
                <GermanFlagIcon />
              </span>
              Für Selbstständige und Unternehmer
            </div>
            <h1>
              Professionelle<br />Finanzbuchhaltung
            </h1>
            <p className="acc-hero-lead">
              Unsere Aufgabe ist es, zum Erfolg Ihres Unternehmens beizutragen. Rechtzeitig Chancen erkennen,
              Risiken aufzeigen und langfristige Strategien entwickeln, das ist unser oberstes Gebot.
            </p>
            <div className="acc-cta-actions acc-hero-actions">
              <a href={FRAGEBOGEN_HREF} className="acc-btn acc-btn-primary acc-btn-primary--big">
                Fragebogen starten
              </a>
              <a href={CAREER_HREF} className="acc-btn acc-btn-outline acc-btn-outline--hero">
                Wir suchen Verstärkung
              </a>
            </div>
            <div className="acc-hero-visual" id="trigger-sticky">
              <div className="acc-hero-visual__stage">
                <img
                  className="acc-hero-visual__static"
                  src={STYLED_IMAGES.hero}
                  alt="Illustriertes Bürogebäude am Marktplatz Ruhland mit Steuerberater-Schriftzug"
                  width="1536"
                  height="1024"
                  decoding="async"
                />
                <div className="acc-hero-visual__flakes" aria-hidden="true" />
              </div>
            </div>
          </div>
        </section>

        {/* Top partner / funding logos (real st-ru.de assets, restored) */}
        <section className="acc-top-logos" aria-label="Partner und Förderung">
          <div className="acc-container acc-partners-row acc-partners-row--top">
            {PARTNER_LOGOS.map((logo) => (
              <img
                key={logo.alt}
                className="acc-partner-logo"
                src={logo.src}
                alt={logo.alt}
                width="150"
                height="80"
              />
            ))}
          </div>
        </section>
      </div>

      <SharedStickyCta />
      <SharedMobileMenu menu={menu} activePage="home" />

      <main>
        {/* 3, Trust trio (Accountable: heading + 3 cards) */}
        <section className="acc-trust acc-section acc-container" id="scroll-threshold">
          <div className="acc-trust-heading acc-trust-heading--centered acc-heading-with-doodles">
            <SectionDoodles variant="trust" />
            <h2>Erledigen Sie Ihre Steuern sicher und sorgenfrei</h2>
            <p>
              Steuerliches Fachwissen aus der Lausitz, mit der Nähe einer regionalen Kanzlei und dem Anspruch
              professioneller Beratung auf Augenhöhe.
            </p>
          </div>
          <div className="acc-trust-grid acc-trust-grid--trio">
            {TRUST_CARDS.map((card) => (
              <TrustCard key={card.icon} {...card} />
            ))}
          </div>
        </section>

        <TrustComplianceStrip variant="section" heading />

        {/* 4, AI / Digital */}
        <AiChatSection />

        {/* 5, Team coaches */}
        <section className="acc-coaches acc-section">
          <div className="acc-container">
            <div className="acc-coaches-inner">
              <div className="acc-coaches-intro acc-heading-with-doodles">
                <SectionDoodles variant="coaches" />
                <h2>Ihre Steuerberater sind für Sie da, wenn Sie persönliche Unterstützung brauchen.</h2>
                <p>
                  Selbstständig zu sein bedeutet, viele Aufgaben gleichzeitig zu managen. An unserem Standort
                  Markt&nbsp;9-10 in Ruhland betreuen wir Sie persönlich, mit festen Ansprechpartnern, kurzen Wegen
                  und Beratung auf Augenhöhe, wenn Sie Unterstützung bei Buchhaltung, Steuern oder Lohn brauchen.
                </p>
              </div>
              <TeamCarousel members={TEAM} />
            </div>
          </div>
        </section>

        {/* 6, Platform slider (Leistungen) + slim pricing CTA */}
        <PlatformSlider tabs={PLATFORM_SLIDER_TABS} />

        {/* 7, Features intro — composite SVG wash + floating line doodles */}
        <section className="acc-features-intro acc-section acc-heading-with-doodles">
          <SectionDoodles variant="features" />
          <h2>Lassen Sie uns Ihre Steuern erledigen, alles aus einer Hand</h2>
        </section>

        {/* 8–11, Feature rows */}
        {FEATURES.map((f) => (
          <section key={f.tag} className={`acc-feature acc-container${f.reverse ? " reverse" : ""}`}>
            <div className="acc-feature-inner">
              <div>
                <span className="acc-feature-tag">{f.tag}</span>
                <h3>{f.title}</h3>
                <p className="acc-feature-desc">{f.desc}</p>
                <ul className="acc-feature-list">
                  {f.bullets.map((b) => <li key={b}>{b}</li>)}
                </ul>
              </div>
              <div className="acc-feature-visual">
                <FeatureArtwork kind={f.visual} alt={f.title} />
              </div>
            </div>
          </section>
        ))}

        {/* 12, Reviews (real Google Maps data from st-ru-real-data.json) */}
        <section className="acc-reviews acc-section acc-container acc-heading-with-doodles">
          <SectionDoodles variant="reviews" />
          <h2>Echte Erfahrungsberichte und Kommentare</h2>
          <div className="acc-rating-pills" aria-label="Bewertungsquellen">
            {RATING_PILLS.map((pill) => (
              <a key={pill.label} className="acc-rating-pill" href={pill.href} target="_blank" rel="noopener noreferrer">
                <span className="acc-rating-pill-score">{pill.score}</span>
                <span className="acc-rating-pill-meta">
                  <strong>{pill.label}</strong>
                  <span>{pill.count}</span>
                </span>
              </a>
            ))}
          </div>
          <ReviewMarquee reviews={GOOGLE_REVIEWS.reviews} />
        </section>

        {/* 13, Press / Aktuelles (real Steuernews, not Accountable press marks) */}
        <section className="acc-press acc-section acc-container acc-heading-with-doodles">
          <SectionDoodles variant="press" />
          <h2>Aktuelles aus unserer Steuernews</h2>
          <div className="acc-press-grid">
            {HOME_PRESS_ARTICLES.map((item) => (
              <a key={item.title} href={item.href} className="acc-press-item" aria-label={`${item.title} in Aktuelles öffnen`}>
                <PressCard item={item} />
              </a>
            ))}
          </div>
        </section>

        {/* 14, Partners (real ESF / EU / Atikon only) */}
        <section className="acc-partners acc-section acc-container acc-heading-with-doodles">
          <SectionDoodles variant="partners" />
          <h2>Unsere Partner &amp; Förderung</h2>
          <div className="acc-partners-row">
            {PARTNER_LOGOS.map((logo) => (
              <img
                key={`partners-${logo.alt}`}
                className="acc-partner-logo"
                src={logo.src}
                alt={logo.alt}
                width="150"
                height="80"
                loading="lazy"
              />
            ))}
          </div>
          <div className="acc-partners-videos" aria-label="Videos zu ADDISON OneClick">
            {VIDEO_EMBEDS.map((v) => (
              <a
                key={v.id}
                className="acc-partners-video-link"
                href={v.watch}
                target="_blank"
                rel="noopener noreferrer"
              >
                <img src={v.thumb} alt="" width="160" height="90" loading="lazy" />
                <span>{v.title}</span>
              </a>
            ))}
          </div>
        </section>

        {/* 15, Bottom CTA */}
        <section className="acc-section acc-container" id="kontaktblock">
          <div className="acc-cta-bottom-card">
            <div className="acc-heading-with-doodles">
              <SectionDoodles variant="cta" />
              <h2>Starten Sie jetzt mit uns</h2>
              <p>
                Lassen Sie uns Ihre Finanzbuchhaltung und Steuern übernehmen, alles aus einer Hand.
                Persönlich in Ruhland, digital organisiert und als Arbeitgeber zum Kennenlernen.
              </p>
              <div className="acc-cta-actions">
                <a href="mailto:info@st-ru.de" className="acc-btn acc-btn-primary acc-btn-primary--big">Beratung anfragen</a>
                <a href={CAREER_HREF} className="acc-btn acc-btn-outline">Karriere ansehen</a>
              </div>
            </div>
            <CtaBottomVisual />
          </div>
        </section>

        {/* 16, Useful links */}
        <section className="acc-links acc-section acc-container acc-heading-with-doodles">
          <SectionDoodles variant="section" />
          <h2>Nützliche Links</h2>
          <div className="acc-links-grid">
            <div className="acc-links-col">
              <h3>{USEFUL_LINKS.title}</h3>
            </div>
            {USEFUL_LINKS.cols.map((col, i) => (
              <div key={i} className="acc-links-col">
                {col.map((link) => (
                  <a key={link.label} href={link.href}>
                    <PlayIcon />
                    {link.label}
                  </a>
                ))}
              </div>
            ))}
          </div>
        </section>
      </main>

      <SharedFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<RechnungLandingPage />);