/* global React */

function MSMarkA({ size = 14 }) {
  return (
    <svg className="ms" width={size} height={size} viewBox="0 0 23 23" aria-hidden="true">
      <rect width="10" height="10" x="1" y="1" fill="#F25022" />
      <rect width="10" height="10" x="12" y="1" fill="#7FBA00" />
      <rect width="10" height="10" x="1" y="12" fill="#00A4EF" />
      <rect width="10" height="10" x="12" y="12" fill="#FFB900" />
    </svg>
  );
}

function AboutV6() {
  const strong = { color: "var(--foreground)", fontWeight: 700 };
  return (
    <div>
      {/* NAV */}
      <header className="v4nav">
        <div className="v4nav-in">
          <a href="index.html" className="brand" aria-label="tcviz home">
            <window.Logo height={34} tone="pbi" />
          </a>
          <nav className="v4nav-links" aria-label="Primary">
            <a href="index.html#products">Catalog</a>
            <a href="gallery.html">Gallery</a>
            <a href="blog.html">Blog</a>
            <a href="index.html#specs">Why tcviz</a>
            <a href="about.html">About</a>
          </nav>
          <div className="v4nav-cta">
            <a href="contact.html" className="btn btn-ghost btn-sm">Contact</a>
            <a href="index.html#products" className="btn btn-sm">Browse visuals</a>
          </div>
        </div>
      </header>

      {/* HEAD */}
      <section className="sec tight" style={{ paddingTop: 64, paddingBottom: 8 }}>
        <div className="wrap">
          <span className="eyebrow">About</span>
          <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: "clamp(38px,5vw,60px)", lineHeight: 1.03, letterSpacing: "-0.03em", margin: "14px 0 0" }}>About TC</h1>
          <p style={{ fontSize: 18, color: "var(--muted)", margin: "16px 0 0", maxWidth: 560 }}>
            The story behind tcviz.com and the person building these Power BI visuals.
          </p>
        </div>
      </section>

      {/* BODY */}
      <section className="sec" style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="about-grid">
            <div style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.75, maxWidth: 680 }}>
              <h2 style={{ fontSize: 24, color: "var(--foreground)", fontWeight: 700, letterSpacing: "-0.01em", marginTop: 0, marginBottom: 16 }}>Hi, I'm Tino Callarisa.</h2>
              <p style={{ marginTop: 0 }}>
                TC (tcviz) is an independent studio based in La Rápita (Tarragona, Spain), dedicated to building enterprise-grade custom visuals for Microsoft Power BI. Everything you see on this site — the visuals, the documentation, the support — is built and maintained by me.
              </p>
              <p>
                I have spent the last 27 years between data and the boardroom. I started as a CRM and ERP developer, moved into application development with Visual Basic, and then crossed over to strategy consulting — leading <strong style={strong}>Route-to-Market (RTM)</strong> and <strong style={strong}>Revenue Growth Management (RGM)</strong> projects in more than <strong style={strong}>30 countries</strong> across FMCG, retail and distribution. Today my focus is on <strong style={strong}>data science</strong>, <strong style={strong}>predictive machine-learning models</strong> and <strong style={strong}>business intelligence</strong>. That dual background — the analytics craft <em>and</em> sitting in the executive workshop — is what shapes every visual I ship.
              </p>

              <h3 style={{ fontSize: 18, color: "var(--foreground)", fontWeight: 700, marginTop: 32, marginBottom: 12 }}>Background</h3>
              <ul style={{ paddingLeft: 20, margin: 0 }}>
                <li style={{ marginBottom: 8 }}><strong style={strong}>27 years</strong> in data science, BI and strategy consulting.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Data scientist</strong> — predictive machine-learning models for commercial and operational decisions.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Business Intelligence</strong> — Power BI, semantic models, KPI frameworks for executive teams.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>CRM &amp; ERP developer</strong> · early career building business systems end-to-end.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Visual Basic developer</strong> · desktop and line-of-business applications.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Strategy consultant · RTM &amp; RGM</strong> — projects in more than 30 countries.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Master in Business Intelligence</strong> · EAE Business School.</li>
              </ul>

              <h3 style={{ fontSize: 18, color: "var(--foreground)", fontWeight: 700, marginTop: 32, marginBottom: 12 }}>What I believe in</h3>
              <ul style={{ paddingLeft: 20, margin: 0 }}>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Information density without clutter.</strong> A KPI tile should answer five questions, not one.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Documented contracts.</strong> Every measure, every field well, every formatting option is published — no surprises after deployment.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Real support.</strong> When you email tcviz, you reach me directly. No ticket queues, no first-line scripts.</li>
                <li style={{ marginBottom: 8 }}><strong style={strong}>Microsoft certification first.</strong> Every visual is published through Microsoft AppSource and code-signed.</li>
              </ul>

              <h3 style={{ fontSize: 18, color: "var(--foreground)", fontWeight: 700, marginTop: 32, marginBottom: 12 }}>How to work with me</h3>
              <p>
                The whole catalog is freemium: install any visual from Microsoft AppSource and try it for free. Pro features unlock through an AppSource subscription. If you need a custom visual, custom field wells, or an integration that's not on the catalog, drop me a line.
              </p>
            </div>

            <aside className="about-aside">
              <div className="about-photo">
                <img src="logos/tino-portrait.png" alt="Tino Callarisa" />
              </div>
              <div className="about-block" style={{ borderTop: "none", paddingTop: 0 }}>
                <div className="eyebrow">Studio</div>
                <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 20, margin: "8px 0", letterSpacing: "-0.01em", color: "var(--foreground)" }}>TC · tcviz</h3>
                <p style={{ fontSize: 14, color: "var(--muted)", margin: 0 }}>Independent studio · Power BI custom visuals.</p>
              </div>

              <div className="about-block">
                <div className="eyebrow">Experience</div>
                <p style={{ fontSize: 14, marginTop: 8, lineHeight: 1.6, color: "var(--muted)" }}>
                  <strong style={strong}>27 years</strong> · data science, BI, consulting<br />
                  <strong style={strong}>30+ countries</strong> · RTM &amp; RGM projects
                </p>
              </div>

              <div className="about-block">
                <div className="eyebrow">Education</div>
                <p style={{ fontSize: 14, marginTop: 8, lineHeight: 1.6, color: "var(--muted)" }}>Master in Business Intelligence<br /><span>EAE Business School</span></p>
              </div>

              <div className="about-block">
                <div className="eyebrow">Location</div>
                <p style={{ fontSize: 14, marginTop: 8, color: "var(--muted)" }}>La Rápita (Tarragona)<br />Catalonia · Spain</p>
              </div>

              <div className="about-block">
                <div className="eyebrow">Direct contact</div>
                <p style={{ fontSize: 14, marginTop: 8 }}><a href="mailto:support@tcviz.com" style={{ color: "var(--primary)", fontWeight: 600 }}>support@tcviz.com</a></p>
              </div>

              <div className="about-block">
                <div className="eyebrow">Distribution</div>
                <p style={{ fontSize: 14, marginTop: 8, color: "var(--muted)" }}>Available exclusively on Microsoft AppSource.</p>
                <a href="https://appsource.microsoft.com/" target="_blank" rel="noopener noreferrer" className="btn btn-sm" style={{ marginTop: 12 }}>Microsoft AppSource ↗</a>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="v4foot">
        <div className="wrap">
          <div className="v4foot-grid">
            <div>
              <window.Logo height={30} tone="pbi" />
              <p className="blurb">Enterprise-grade custom visuals for Power BI. Designed, documented and supported by TC.</p>
              <span className="pill" style={{ marginTop: 16 }}><MSMarkA /> Microsoft AppSource</span>
            </div>
            <div>
              <h5>Products</h5>
              <ul>
                <li><a href="index.html#products">All visuals</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="blog.html">Blog</a></li>
              </ul>
            </div>
            <div>
              <h5>Company</h5>
              <ul>
                <li><a href="about.html">About TC</a></li>
                <li><a href="contact.html">Contact</a></li>
              </ul>
            </div>
            <div>
              <h5>Legal</h5>
              <ul>
                <li><a href="terms.html">Terms of Use</a></li>
                <li><a href="privacy.html">Privacy</a></li>
                <li><a href="mailto:support@tcviz.com">info@tcviz.com</a></li>
              </ul>
            </div>
          </div>
          <div className="v4foot-bottom">
            <span>© 2026 TC · tcviz.com</span>
            <span>All systems operational</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

window.AboutV6 = AboutV6;