const Browser = ({ url, theme = "light", children }) =>
  <div className={"sb-browser " + theme}>
    <div className="sb-browser-bar">
      <span /><span /><span />
      <div className="sb-browser-url mono">{url}</div>
    </div>
    <div className="sb-browser-body">{children}</div>
  </div>;


const TechnicalMock = () =>
  <Browser url="weblsolutions.com.br" theme="dark">
    <div className="ts-mock">
      <div className="ts-nav">
        <span className="ts-logo">WEB<em>SOLUTIONS</em></span>
        <span className="ts-nav-links mono">SITES · APPS · ECOMMERCE · SUPORTE</span>
        <span className="ts-lang mono">PT/EN/ES</span>
      </div>
      <div className="ts-hero">
        <div className="ts-eyebrow mono">TUDO QUE SUA MARCA PRECISA</div>
        <div className="ts-title">
          Alcance mais<br />
          clientes,<br />
          no país inteiro.
        </div>
        <div className="ts-meta">
          <div><span className="mono">+120</span><br /><em>sites criados</em></div>
          <div><span className="mono">5★</span><br /><em>clientes satisfeitos</em></div>
          <div><span className="mono">24/7</span><br /><em>resposta a incidentes</em></div>
        </div>
      </div>
    </div>
  </Browser>;


const ClientShowcase = () => {
  const cases = [
    {
      id: "technical",
      tag: "SheBytesMe",
      name: "Estrutura Premium",
      kicker: "Sites bonitos e funcionais",
      blurb: "Ferramentas que realmente ajudam sua empresa a crescer.",
      mock: <TechnicalMock />,
      bullets: ["Sua página na internet", "Chatbot integrado", "Autoridade e profissionalismo", "Sua biografia online"],
      featured: true
    }
  ];

  const [active, setActive] = React.useState(0);

  return (
    <section className="section storefronts" id="clientes">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="eyebrow"></div>
            <h2>Tenha tudo que a tecnologia pode te oferecer <span className="italic"></span>.</h2>
          </div>
          <p className="lede">
            Sua marca merece uma estrutura premium, personalizada para o seu negócio.
          </p>
        </div>

        <div className="sf-stage">
          <div className="sf-display">
            <div className="sf-display-inner" key={active}>
              {cases[active].mock}
            </div>
            <div className="sf-display-meta">
              <span className="mono">Site profissional com preço justo - {cases[active].tag}</span>
              <span className="sf-display-name">{cases[active].name}</span>
            </div>
          </div>

          <div className="sf-list">
            {cases.map((c, i) => (
              <button
                key={c.id}
                className={"sf-row " + (active === i ? "active" : "")}
                onClick={() => setActive(i)}
              >
                <div className="sf-row-top">
                  <span className="mono sf-row-tag">{c.tag}</span>
                  {c.featured && (
                    <span className="tag sf-feat">
                      <span className="dot" />plano mensal R$49,99
                    </span>
                  )}
                </div>
                <div className="sf-row-name">{c.name}</div>
                <div
                  className="sf-row-kicker mono"
                  dangerouslySetInnerHTML={{ __html: c.kicker }}
                />
                {active === i && (
                  <>
                    <div className="sf-row-blurb">{c.blurb}</div>
                    <ul className="sf-row-bullets">
                      {c.bullets.map((b, j) => (
                        <li key={j}><span>✱</span>{b}</li>
                      ))}
                    </ul>
                    <a className="sf-row-cta" href="#planos">
                      Quero meu site
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                        <path d="M7 17 17 7M9 7h8v8" strokeLinecap="round" />
                      </svg>
                    </a>
                  </>
                )}
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.ClientShowcase = ClientShowcase;