/* === Shared UI components === */
const { useState, useEffect, useRef } = React;

const ICONS = {
  arrow: <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  arrowUp: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M5 3h6v6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  plus: <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>,
  check: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  phone: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 3.5C2 2.67 2.67 2 3.5 2h1.4c.5 0 .9.34 1 .82l.4 1.7c.1.46-.1.94-.5 1.2l-.8.5c.7 1.3 1.7 2.3 3 3l.5-.8c.26-.4.74-.6 1.2-.5l1.7.4c.48.1.82.5.82 1V12.5c0 .83-.67 1.5-1.5 1.5h-.5C5.7 14 0 8.3 0 1V.5C0 .22.22 0 .5 0h2c.28 0 .5.22.5.5V2c0 .83-.67 1.5-1.5 1.5z" fill="currentColor"/></svg>,
  mail: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="2.5" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.2"/><path d="M1.5 3.5L7 8l5.5-4.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>,
  pin: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 13s4.5-4.2 4.5-7.5a4.5 4.5 0 10-9 0C2.5 8.8 7 13 7 13z" stroke="currentColor" strokeWidth="1.2"/><circle cx="7" cy="5.5" r="1.5" stroke="currentColor" strokeWidth="1.2"/></svg>,
  clock: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.2"/><path d="M7 4v3l2 1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>,
};

function Placeholder({ label, className = "", style = {}, variant = "wide", src, alt = "" }) {
  return (
    <div className={`placeholder placeholder--${variant} ${className}`} style={style}>
      {src ? (
        <img className="placeholder__img" src={src} alt={alt || label || ""} loading="lazy" />
      ) : (
        <div className="placeholder__label">{label}</div>
      )}
    </div>
  );
}

function Button({ children, variant = "primary", href, onClick, ...rest }) {
  const cls = `btn btn--${variant}`;
  const content = <>{children}{ICONS.arrow}</>;
  if (href) return <a className={cls} href={href} onClick={onClick} {...rest}>{content}</a>;
  return <button className={cls} onClick={onClick} {...rest}>{content}</button>;
}

function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function SectionHead({ num, kicker, title, lede, className = "" }) {
  return (
    <div className={`section-head ${className}`.trim()}>
      <div>
        <Eyebrow num={num}>{kicker}</Eyebrow>
        <h2 style={{ marginTop: 18 }}>{title}</h2>
      </div>
      {lede && <p className="section-head__lede">{lede}</p>}
    </div>
  );
}

function Tag({ children, accent }) {
  return <span className={`tag ${accent ? "tag--accent" : ""}`}>{children}</span>;
}

function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={`faq__item ${open === i ? "is-open" : ""}`}>
          <button className="faq__btn" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="faq__icon">{ICONS.plus}</span>
          </button>
          <div className="faq__panel"><p>{it.a}</p></div>
        </div>
      ))}
    </div>
  );
}

function MarqueeStrip({ items }) {
  const inner = <span>{items.map((t, i) => <span key={i}>{t}</span>)}</span>;
  return (
    <div className="strip">
      <div className="strip__track">{inner}{inner}{inner}</div>
    </div>
  );
}

function PhoneMock({ src, alt = "" }) {
  return (
    <div className="phone">
      <div className="phone__notch"></div>
      <div className="phone__screen">
        {src ? (
          <img className="phone__screen-img" src={src} alt={alt} />
        ) : (
          <div style={{ padding: "44px 18px 18px", height: "100%", display: "flex", flexDirection: "column", gap: 10, background: "var(--bg-2)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".08em" }}>Mein Plan · Mo</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 14 }}>4 / 6</div>
          </div>
          <div style={{ background: "var(--primary)", color: "var(--bg)", borderRadius: 14, padding: 14, marginTop: 6 }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 9, opacity: .7, textTransform: "uppercase", letterSpacing: ".08em" }}>Übung 04</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 18, marginTop: 6, lineHeight: 1.15 }}>Skapula-Stabilität</div>
            <div style={{ fontSize: 11, opacity: .8, marginTop: 4 }}>3 × 12 · 60s Pause</div>
          </div>
          <div style={{ background: "repeating-linear-gradient(135deg, var(--bg-3) 0 8px, var(--bg-2) 8px 16px)", aspectRatio: "16/10", borderRadius: 12, display: "grid", placeItems: "center" }}>
            <div style={{ width: 30, height: 30, borderRadius: "50%", background: "var(--card)", display: "grid", placeItems: "center", boxShadow: "0 2px 6px rgba(0,0,0,.15)" }}>
              <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 1l7 4-7 4z" fill="var(--ink)"/></svg>
            </div>
          </div>
          <div style={{ display: "grid", gap: 6, marginTop: 4 }}>
            {["Aufwärmen · 5 min", "Außenrotation · 3×12", "Skapula-Retraktion", "Cool-Down"].map((t, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 10px", background: "var(--card)", border: "1px solid var(--line)", borderRadius: 8, fontSize: 11 }}>
                <span>{t}</span>
                <span style={{ color: i < 2 ? "var(--accent)" : "var(--muted)" }}>{i < 2 ? "✓" : "○"}</span>
              </div>
            ))}
          </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Placeholder, Button, Eyebrow, SectionHead, Tag, FAQ, MarqueeStrip, PhoneMock, ICONS });