/* global React */
// Pixel Floors — Proofs, Benefits, Contact, Footer

function PFProofs({ content }) {
  return (
    <section className="pf-section" id="proofs">
      <div className="pf-shell">
        <div className="pf-section-head">
          <span className="eyebrow">{content.eyebrow}</span>
          <h2 className="pf-h2">{content.title}</h2>
          <p className="lead">{content.lead}</p>
        </div>

        <div className="pf-proofs-grid">
          <div className="pf-proof-hero">
            <div>
              <div className="big-num">{content.bigNum}</div>
              <div className="big-label">{content.bigLabel}</div>
            </div>
            <div className="tagline">{content.tag}</div>
          </div>
          <div className="pf-proof-side">
            <div className="pf-proof-stat">
              <div className="num">{content.s1Num}</div>
              <div className="label">{content.s1Lbl}</div>
            </div>
            <div className="pf-proof-stat alt">
              <div className="num">{content.s2Num}</div>
              <div className="label">{content.s2Lbl}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PFBenefits({ content }) {
  return (
    <section className="pf-section" id="why">
      <div className="pf-shell">
        <div className="pf-section-head">
          <span className="eyebrow">{content.eyebrow}</span>
          <h2 className="pf-h2">{content.title}</h2>
          <p className="lead">{content.lead}</p>
        </div>
        <div className="pf-benefits-grid">
          {content.items.map((it, i) => (
            <div className="pf-benefit" key={i}>
              <div className="icon"><PFIcon name={it.icon} size={32} /></div>
              <span className="roi-tag">{it.tag}</span>
              <h3>{it.name}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Phone / mail icons (inline SVG, currentColor)
function PhoneIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.86 19.86 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" />
    </svg>
  );
}
function MailIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect width="20" height="16" x="2" y="4" rx="2" />
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
    </svg>
  );
}
function ClockIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  );
}
function CheckIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

function PFContact({ content }) {
  const [checks, setChecks] = React.useState({ mini: true, full: false, event: false, other: false });
  const [demo, setDemo] = React.useState(true);
  const [submitted, setSubmitted] = React.useState(false);

  const toggle = (id) => setChecks((c) => ({ ...c, [id]: !c[id] }));

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  };

  return (
    <section className="pf-section" id="contact">
      <div className="pf-shell">
        <div className="pf-section-head">
          <span className="eyebrow">{content.eyebrow}</span>
          <h2 className="pf-h2">
            {content.title}
            <span style={{
              backgroundImage: "linear-gradient(120deg, #8c4abe 0%, #fe862e 50%, #5bfead 100%)",
              backgroundSize: "200% auto",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
              WebkitTextFillColor: "transparent",
              color: "transparent",
            }}>
              {content.titleAccent}
            </span>
          </h2>
          <p className="lead">{content.lead}</p>
        </div>

        <div className="pf-contact-block">
          <div className="pf-contact-info">
            <div>
              <h3>{content.title.trim()}{" "}{content.titleAccent}</h3>
            </div>

            <div className="info-row">
              <div className="icon"><PhoneIcon /></div>
              <div className="col">
                <span className="k">{content.sales}</span>
                <a className="v" href={`tel:${content.salesValue.replace(/\s/g, "")}`}>{content.salesValue}</a>
              </div>
            </div>

            <div className="info-row">
              <div className="icon"><MailIcon /></div>
              <div className="col">
                <span className="k">{content.email}</span>
                <a className="v" href={`mailto:${content.emailValue}`}>{content.emailValue}</a>
              </div>
            </div>

            <div className="info-row">
              <div className="icon"><ClockIcon /></div>
              <div className="col">
                <span className="k">{content.reply}</span>
                <span className="v">{content.replyValue}</span>
              </div>
            </div>
          </div>

          <form className="pf-contact-form" onSubmit={onSubmit}>
            <h3>{content.formTitle}</h3>
            <div className="pf-checks">
              {content.checks.map((c) => (
                <div
                  key={c.id}
                  className={"pf-check" + (checks[c.id] ? " checked" : "")}
                  onClick={() => toggle(c.id)}
                  role="checkbox"
                  aria-checked={checks[c.id]}
                  tabIndex={0}
                >
                  <span className="box">{checks[c.id] ? <CheckIcon /> : null}</span>
                  <span className="icon"><PFIcon name={c.icon} size={22} /></span>
                  <span>{c.label}</span>
                </div>
              ))}
            </div>

            <div className="pf-field-grid">
              <div className="pf-field">
                <label htmlFor="first">{content.fields.first}</label>
                <input id="first" type="text" autoComplete="given-name" />
              </div>
              <div className="pf-field">
                <label htmlFor="last">{content.fields.last}</label>
                <input id="last" type="text" autoComplete="family-name" />
              </div>
              <div className="pf-field">
                <label htmlFor="email">{content.fields.email}</label>
                <input id="email" type="email" autoComplete="email" />
              </div>
              <div className="pf-field">
                <label htmlFor="phone">{content.fields.phone}</label>
                <input id="phone" type="tel" autoComplete="tel" />
              </div>
            </div>
            <div className="pf-field">
              <label htmlFor="details">{content.fields.details}</label>
              <textarea id="details" placeholder={content.fields.detailsPh}></textarea>
            </div>

            <div className="pf-switch-row">
              <span>{content.demo}</span>
              <div className={"pf-switch" + (demo ? " on" : "")} onClick={() => setDemo(d => !d)} role="switch" aria-checked={demo} tabIndex={0} />
            </div>

            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <button type="submit" className="pf-btn primary large">
                {submitted ? "✓ " : ""}{content.submit} →
              </button>
              <span style={{ fontSize: 12, color: "var(--text-muted)" }}>{content.submitNote}</span>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function PFFooter({ content, lang, setLang }) {
  return (
    <footer className="pf-footer">
      <div className="pf-shell">
        <div className="pf-footer-grid">
          <div className="col">
            <img src="design-system/logos/horizontal-logo.svg" alt="Pixel Floors" />
            <p>{content.tagline}</p>
          </div>
          {content.cols.map((c, i) => (
            <div className="col" key={i}>
              <h5>{c.h}</h5>
              {c.items.map((it, j) => <a key={j} href="#">{it}</a>)}
            </div>
          ))}
        </div>
        <div className="meta">
          <span>{content.meta}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
            <span>{content.version}</span>
            <span className="lang-switch" style={{ background: "rgba(30,0,48,.06)" }}>
              <button className={lang === "cs" ? "active" : ""} onClick={() => setLang("cs")}>CZ</button>
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            </span>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.PFProofs = PFProofs;
window.PFBenefits = PFBenefits;
window.PFContact = PFContact;
window.PFFooter = PFFooter;