// ──────────────────────────────────────────────────────────────
// ABOUT PAGE CONTENT — built from the TapScan_About Figma file.
// Layout, spacing, type sizes and copy transcribed from the design
// (1440px frame, 940px content column, 64px section rhythm).
// ──────────────────────────────────────────────────────────────

const INK = "#212331";

// Value cards — same content, icons and styling as the homepage "What We Believe In" blocks.
const ABOUT_VALUE_CHIP_BG = ["#6976E7", "#2F3886", "#FFB855"];
const ABOUT_VALUE_ICON_STROKE = ["#fff", "#fff", "#1C2250"];
const ABOUT_VALUES = [
  {
    title: "Insight Over Assumption",
    body: "We dig into what's actually happening at the touchpoint, not what people think is happening.",
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7" />
          <line x1="16.5" y1="16.5" x2="21" y2="21" />
          <line x1="11" y1="8" x2="11" y2="14" />
          <line x1="8" y1="11" x2="14" y2="11" />
        </svg>
  },
  {
    title: "Collaboration Drives Results",
    body: "The best work happens when brand, agency, and field teams build on the same shared signal.",
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="9" cy="8" r="3" />
          <circle cx="17" cy="9" r="2.5" />
          <path d="M3 20c0-3 3-5 6-5s6 2 6 5" />
          <path d="M15 20c0-2 2-3.5 4-3.5s2.5 1 2.5 1" />
        </svg>
  },
  {
    title: "Always Be Evolving",
    body: "We don't stand still. Every campaign teaches us something, and every next one is sharper for it.",
    icon:
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12a9 9 0 1 1-3-6.7" />
          <polyline points="21 4 21 10 15 10" />
        </svg>
  },
];

// Founder cards — photo panel + name / role / bio (Figma founder rows, 940×311).
const ABOUT_FOUNDERS = [
  {
    name: "Terry Dennis",
    role: "Co Founder",
    photo: "assets/about/terry-dennis.png",
    linkedin: "https://www.linkedin.com/in/terry-dennis-44b4744/?skipRedirect=true",
    bio: [
      "Terry is an award-winning marketer and seasoned CPG leader with 30+ years of experience driving growth for global brands across Canada, the US, and Mexico. He built Storck Canada into the top-performing subsidiary and led a leading point of sale marketing company into a shopper focused 50 Best Managed Companies.",
      "At TapScan, he helps guide strategic touchpoints into high-performing client solutions.",
    ],
  },
  {
    name: "John Snow",
    role: "Co Founder",
    photo: "assets/about/john-snow.png",
    linkedin: "https://www.linkedin.com/in/john-snow-12b9183/",
    bio: [
      "John spent nearly three decades at Unilever as a leader in global packaging innovation. He has delivered innovative technologies and end to end system solutions resulting in significant cost, experience and efficiency improvements.",
      "At TapScan, he architects the platforms and solutions that global businesses use to engage and communicate with their customers, shoppers and consumers on their path to purchase and at their point of use.",
    ],
  },
];

function TSAboutFounderCard({ f }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div className="ts-founder-card"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        borderRadius: 16, overflow: "hidden",
        border: "1px solid #DDDFEE",
        boxShadow: hover ? "0 12px 28px rgba(139,146,205,0.35)" : "2px 2px 4px rgba(139,146,205,0.25)",
        transition: "box-shadow 220ms cubic-bezier(0.2,0.8,0.2,1)",
        display: "flex", flexDirection: "row", alignItems: "stretch",
        background: "#fff", width: "100%",
      }}>
      <div className="ts-founder-photo" style={{
        width: 250, flexShrink: 0, background: "#EFF1FF",
        position: "relative", overflow: "hidden", minHeight: 296,
      }}>
        <img src={f.photo} alt={f.name} style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center 30%", display: "block",
        }} />
      </div>
      <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24, flexGrow: 1 }} className="ts-founder-body">
        <div className="ts-founder-header" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <h3 style={{ margin: 0, fontFamily: "Montserrat", fontWeight: 900, fontSize: 32, lineHeight: 1, color: INK }}>
              {f.name}<span style={{ color: "#FFB855" }}>.</span>
            </h3>
            <div style={{ fontFamily: "Montserrat", fontWeight: 400, fontSize: 22, lineHeight: 1, color: INK }}>{f.role}</div>
          </div>
          {f.linkedin && (
            <a href={f.linkedin} target="_blank" rel="noopener noreferrer" aria-label={f.name + " — LinkedIn"} style={{
              height: 40, padding: "0 16px", borderRadius: 999, border: "1px solid #DDDFEE", flexShrink: 0,
              display: "flex", alignItems: "center", gap: 8, color: "#2F3886",
              fontFamily: "Montserrat", fontWeight: 600, fontSize: 13, whiteSpace: "nowrap", textDecoration: "none",
              transition: "all 180ms",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#2F3886"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#2F3886"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#2F3886"; e.currentTarget.style.borderColor = "#DDDFEE"; }}>
              <span>View LinkedIn</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}><path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M8 17H5V10H8V17M6.5 8.7C5.5 8.7 4.7 7.9 4.7 6.9S5.5 5.1 6.5 5.1 8.3 5.9 8.3 6.9C8.3 7.9 7.5 8.7 6.5 8.7M19 17H16V13.4C16 12.5 15.3 11.8 14.4 11.8S12.8 12.5 12.8 13.4V17H9.8V10H12.8V11.2C13.3 10.4 14.4 9.8 15.3 9.8C17.3 9.8 19 11.5 19 13.5V17Z" /></svg>
            </a>
          )}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {f.bio.map((p, i) => (
            <p key={i} style={{ margin: 0, fontFamily: "Montserrat", fontWeight: 400, fontSize: 16, lineHeight: 1.5, color: INK }}>{p}</p>
          ))}
        </div>
      </div>
    </div>
  );
}

function TSAboutContent({ onContact, onDemo }) {
  return (
    <div>
      {/* HERO — brand gradient with drifting accents, same treatment as the case-studies page */}
      <section className="ts-cs-hero" style={{
        color: "#fff",
        textAlign: "center",
        paddingTop: 230,
        paddingBottom: 150,
      }}>
        <div style={{ maxWidth: 1480, margin: "0 auto", padding: "0 24px" }}>
          <h1 style={{
            fontFamily: "Montserrat", fontWeight: 900,
            lineHeight: 1.05, margin: 0,
            letterSpacing: "-0.02em",
            color: "#fff",
            textShadow: "4px 4px 4px rgba(0,0,0,0.25), -4px -4px 4px rgba(0,0,0,0.25)",
            fontSize: 48,
          }}>Built by Brand Experts<span style={{ color: "#FFB855" }}>,</span> Backed by Experience<span style={{ color: "#FFB855" }}>.</span></h1>
          <p style={{
            fontFamily: "Montserrat", fontWeight: 300,
            fontSize: 22, lineHeight: 1.4, marginTop: 28, marginBottom: 0,
            color: "#fff",
            maxWidth: 820, marginLeft: "auto", marginRight: "auto",
            textShadow: "2px 2px 4px rgba(0,0,0,0.3)",
          }}>TapScan was founded in 2018 as part of Ahead of the Curve Group. It&rsquo;s co-founders are former leaders in brand marketing, design, and global customer packaging with CPG companies including Nestle and Unilever<span style={{ color: "#FFB855", fontWeight: 900 }}>.</span></p>
          <div style={{ marginTop: 40, display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
            <button onClick={onDemo} className="ts-cta-btn ts-cta-btn-primary" style={{
                fontFamily: "Montserrat", fontWeight: 700, fontSize: 16,
                padding: "20px 24px", borderRadius: 8,
                background: "#FFB855", color: "#1C2250",
                border: "none", cursor: "pointer",
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
              }}>
              <span>Book a Demo</span>
              <span className="ts-cta-arrow" aria-hidden="true" style={{ display: "inline-flex" }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="4" y1="12" x2="20" y2="12" />
                  <polyline points="13 5 20 12 13 19" />
                </svg>
              </span>
            </button>
            <button onClick={onContact} className="ts-cta-btn ts-cta-btn-secondary" style={{
                fontFamily: "Montserrat", fontWeight: 700, fontSize: 16,
                padding: "20px 24px", borderRadius: 8,
                background: "transparent", color: "#fff",
                border: "2px solid #fff", cursor: "pointer",
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
              }}>
              <span>Contact Us</span>
              <span className="ts-cta-arrow" aria-hidden="true" style={{ display: "inline-flex" }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="4" y1="12" x2="20" y2="12" />
                  <polyline points="13 5 20 12 13 19" />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </section>

      {/* VALUES — same blocks as the homepage "What We Believe In" section */}
      <section className="ts-about-section" style={{ background: "#F5F6FF", padding: "64px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto" }}>
          <h2 style={{ margin: 0, fontFamily: "Montserrat", fontWeight: 900, fontSize: 32, lineHeight: 1.1, color: INK, textAlign: "center" }}>
            What We Believe In<span style={{ color: "#FFB855" }}>.</span>
          </h2>
          <div className="ts-values-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 40 }}>
            {ABOUT_VALUES.map((v, i) =>
            <div key={i} style={{ background: "#fff", borderRadius: 16, padding: 32 }}>
                <div style={{ width: 48, height: 48, borderRadius: 10, background: ABOUT_VALUE_CHIP_BG[i], color: ABOUT_VALUE_ICON_STROKE[i], display: "grid", placeItems: "center", marginBottom: 20 }}>{v.icon}</div>
                <h4 style={{ fontWeight: 900, fontSize: 18, margin: 0, color: INK }}>{v.title}<span style={{ color: "#FFB855" }}>.</span></h4>
                <p style={{ fontWeight: 400, fontSize: 14, lineHeight: 1.6, color: INK, marginTop: 10, marginBottom: 0 }}>{v.body}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FOUNDERS — white, two profile cards */}
      <section className="ts-about-section" style={{ background: "#fff", padding: "64px" }}>
        <div style={{ maxWidth: 940, margin: "0 auto", display: "flex", flexDirection: "column", gap: 64 }}>
          <h2 style={{ margin: 0, fontFamily: "Montserrat", fontWeight: 900, fontSize: 32, lineHeight: 1.1, color: INK, textAlign: "center" }}>
            Who We Are &amp; Why We Built TapScan<span style={{ color: "#FFB855" }}>.</span>
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 64 }}>
            {ABOUT_FOUNDERS.map((f) => <TSAboutFounderCard key={f.name} f={f} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

window.TSAboutContent = TSAboutContent;
