/* global React, window */
const { useState: useState_AP, useRef: useRef_AP, useEffect: useEffect_AP } = React;

/* =========================================================
   Testimonials — Google rating + Wistia video grid
   ========================================================= */
const TESTIMONIAL_VIDEOS = [
  { id: "qecv9jfnwp", aspect: 1.7777777777777777, kind: "Client · Construction" },
  { id: "4gt6ep2jxr", aspect: 1.7777777777777777, kind: "Client · Interior"     },
  { id: "avt9fu3h06", aspect: 1.7777777777777777, kind: "Client · Build-out"    },
  { id: "tkduyx1smp", aspect: 1.3114754098360655, kind: "Client · Owner"        },
];
const TESTIMONIAL_VIDEOS_AR = [
  "شريك · مقاولات",
  "شريك · تصميم داخلي",
  "شريك · بناء",
  "شريك · مالك",
];

function GoogleLogo() {
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.26 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
    </svg>
  );
}

function Star() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
  );
}

function WistiaEmbed({ id, aspect }) {
  // Inline the recommended pre-defined style + tag.
  return (
    <div dangerouslySetInnerHTML={{
      __html: `
        <style>
          wistia-player[media-id='${id}']:not(:defined) {
            background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/${id}/swatch');
            display: block;
            filter: blur(5px);
            padding-top: ${(1 / aspect) * 100}%;
          }
        </style>
        <wistia-player media-id="${id}" aspect="${aspect}"></wistia-player>
      `
    }} />
  );
}

function Testimonials() {
  const { L, lang } = useLang();
  const T = L.testimonials;
  const labels = lang === "ar" ? TESTIMONIAL_VIDEOS_AR : TESTIMONIAL_VIDEOS.map(v => v.kind);
  return (
    <section className="section">
      <div className="container">
        <Reveal><div className="section-eyebrow">{T.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {T.headline[0]}<br/>{T.headline[1]}
          </h2>
        </Reveal>

        <div className="proof-head">
          <Reveal className="google-card">
            <div className="g-logo"><GoogleLogo /></div>
            <div className="g-rating">
              <div className="num mono">{T.googleRating}<span className="of">/5</span></div>
              <div className="stars" aria-label="5 out of 5 stars">
                {[1,2,3,4,5].map(i => <Star key={i} />)}
              </div>
              <div className="lbl">{T.googleLabel}</div>
            </div>
            <div className="meta">{T.googleReviews}</div>
          </Reveal>
          <Reveal delay={80} className="proof-tagline">
            {T.videosLabel}
          </Reveal>
        </div>

        <div className="testimonial-videos">
          <Reveal className="tv-cell" delay={120}>
            <span className="tv-tag">{labels[0]}</span>
            <WistiaEmbed id={TESTIMONIAL_VIDEOS[0].id} aspect={TESTIMONIAL_VIDEOS[0].aspect} />
          </Reveal>
          <div className="tv-stack">
            <Reveal className="tv-cell" delay={180}>
              <span className="tv-tag">{labels[1]}</span>
              <WistiaEmbed id={TESTIMONIAL_VIDEOS[1].id} aspect={TESTIMONIAL_VIDEOS[1].aspect} />
            </Reveal>
            <Reveal className="tv-cell" delay={240}>
              <span className="tv-tag">{labels[2]}</span>
              <WistiaEmbed id={TESTIMONIAL_VIDEOS[2].id} aspect={TESTIMONIAL_VIDEOS[2].aspect} />
            </Reveal>
          </div>
        </div>

        <div className="testimonial-videos" style={{ marginTop: 24, gridTemplateColumns: "1fr" }}>
          <Reveal className="tv-cell" delay={120}>
            <span className="tv-tag">{labels[3]}</span>
            <WistiaEmbed id={TESTIMONIAL_VIDEOS[3].id} aspect={TESTIMONIAL_VIDEOS[3].aspect} />
          </Reveal>
        </div>

        <div style={{ marginTop: 96 }}><DividerLine /></div>
      </div>
    </section>
  );
}

/* =========================================================
   FAQ accordion
   ========================================================= */
function FAQ() {
  const { L } = useLang();
  const F = L.faq;
  const [open, setOpen] = useState_AP(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <Reveal><div className="section-eyebrow">{F.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {F.headline[0]}<br/>{F.headline[1]}
          </h2>
        </Reveal>

        <Reveal delay={120} className="faq-list">
          {F.items.map((it, i) => {
            const isOpen = open === i;
            return (
              <FAQItem
                key={i}
                q={it.q}
                a={it.a}
                isOpen={isOpen}
                onClick={() => setOpen(isOpen ? -1 : i)}
              />
            );
          })}
        </Reveal>
      </div>
    </section>
  );
}

function FAQItem({ q, a, isOpen, onClick }) {
  const aRef = useRef_AP(null);
  useEffect_AP(() => {
    if (!aRef.current) return;
    aRef.current.style.maxHeight = isOpen ? aRef.current.scrollHeight + "px" : "0px";
  }, [isOpen, a]);
  return (
    <div className={`faq-item ${isOpen ? "open" : ""}`}>
      <button className="faq-q" onClick={onClick} aria-expanded={isOpen}>
        <span>{q}</span>
        <span className="chev"><Icon name="plus" size={20} strokeWidth={2} /></span>
      </button>
      <div className="faq-a" ref={aRef}>
        <div className="faq-a-inner">{a}</div>
      </div>
    </div>
  );
}

/* =========================================================
   Application — Typeform embed
   ========================================================= */
function Application() {
  const { L } = useLang();
  const A = L.apply;
  const ref = useRef_AP(null);

  // Load typeform embed.js once. Re-init when language changes (Typeform widget
  // picks up the data-tf-live id and renders).
  useEffect_AP(() => {
    const SRC = "https://embed.typeform.com/next/embed.js";
    let s = document.querySelector(`script[src="${SRC}"]`);
    if (!s) {
      s = document.createElement("script");
      s.src = SRC;
      s.async = true;
      document.body.appendChild(s);
    }
    // Force re-init by re-running the script if already present
    if (window.tf && typeof window.tf.load === "function") {
      try { window.tf.load(); } catch {}
    }
  }, []);

  return (
    <section className="section" id="apply" style={{ paddingTop: 32 }}>
      <div className="container">
        <Reveal><div className="section-eyebrow">{A.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {A.headline[0]}<br/>{A.headline[1]}
          </h2>
        </Reveal>
        <Reveal delay={120}><p className="lead">{A.sub}</p></Reveal>

        <Reveal delay={180} className="typeform-shell">
          <div ref={ref} data-tf-live="01KRNS2AJNPV2TRJMT519VMKS0"></div>
        </Reveal>

        <div className="typeform-trust">
          <Icon name="lock" size={12} strokeWidth={1.8} />
          {A.trust}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   Final CTA
   ========================================================= */
function FinalCTA() {
  const { L } = useLang();
  const F = L.final;
  return (
    <section className="section">
      <div className="container">
        <Reveal className="final">
          <span className="pill"><span className="dot" />{F.badge}</span>
          <h2>
            {F.headline[0]}<br/>{F.headline[1]}
          </h2>
          <p className="lead" style={{ margin: "0 auto", maxWidth: 600, textAlign: "center" }}>
            {F.sub}
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 32, flexWrap: "wrap" }}>
            <Magnetic>
              <a href="#apply" className="btn btn-primary btn-lg">
                {F.ctaPrimary}<Icon name="arrow-right" size={16} />
              </a>
            </Magnetic>
            <a href="#vsl" className="btn btn-ghost btn-lg">
              <Icon name="play" size={14} strokeWidth={1.8} />
              {F.ctaSecondary}
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =========================================================
   Footer
   ========================================================= */
function Footer() {
  const { L } = useLang();
  const F = L.footer;
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-inner">
          <div className="foot-brand">
            <img src="assets/logo-teal-white.png" alt="Mahara Media" />
            <p>{F.disclaimer}</p>
          </div>
          {F.cols.map((col, i) => (
            <div key={i} className="foot-col">
              <h5>{col.title}</h5>
              <ul>
                {col.items.map((it, j) => {
                  if (typeof it === "string") {
                    return <li key={j}><a href="#">{it}</a></li>;
                  }
                  return (
                    <li key={j}>
                      <a href={it.href} target="_blank" rel="noopener noreferrer"
                         style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                        <Icon name={it.icon} size={13} strokeWidth={1.6} />
                        {it.label}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
        <div className="foot-bottom">
          <span>{F.legal}</span>
          <span>{F.tag}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Testimonials, FAQ, FAQItem, Application, FinalCTA, Footer });