// Founder.jsx — photo + bio

function Founder() {
  useLucide();
  const paragraphs = [
  "I'm Mikhail Trufanov, founder of AI Fitters. Before this, I built and ran businesses across media, advertising, hospitality, food production, and wholesale. Different industries, same headaches — staff, suppliers, cash flow, customers who don't reply, and never enough hours.",
  "I know what a real business feels like from the inside. That's why I started AI Fitters: AI is genuinely useful for small businesses, but the people who could benefit most don't have the time to figure out which tools, how to plug them in, or what's worth paying for.",
  "So we do it. We learn your business first. We fit the right tools quietly in the background. We keep them running.",
  "You just run your business."];


  return (
    <Section id="about" bg="white">
      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr",
        gap: 72, alignItems: "center" }} className="grid-founder">

        {/* Left: photo */}
        <div style={{ position: "relative" }}>
          <div style={{
            background: "var(--sand)", borderRadius: 20,
            aspectRatio: "4 / 5",
            border: "1px dashed var(--sand-deep)",
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center",
            color: "var(--muted)", gap: 10
          }}>
            <i data-lucide="user" style={{ width: 32, height: 32, strokeWidth: 1.5 }}></i>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".06em",
              textTransform: "uppercase"
            }}>Photo of Mikhail</span>
          </div>

          {/* Floating signature chip */}
          <div style={{
            position: "absolute", bottom: 24, left: -24,
            background: "#fff", borderRadius: 14, padding: "14px 18px",
            boxShadow: "var(--sh-md)", border: "1px solid var(--line)",
            display: "flex", alignItems: "center", gap: 12
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 99,
              background: "var(--blue-900)", color: "#fff",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontWeight: 700, fontSize: 14
            }}>M</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ink)" }}>Mikhail Trufanov</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>Founder · AI Fitters</div>
            </div>
          </div>
        </div>

        {/* Right: copy */}
        <div>
          <Eyebrow>The founder</Eyebrow>
          <h2 style={{
            fontSize: "clamp(32px, 4.5vw, 48px)", fontWeight: 800,
            letterSpacing: "-0.03em", lineHeight: 1.1,
            margin: "14px 0 28px", color: "var(--ink)", textWrap: "balance"
          }}>Meet the founder.</h2>

          <div style={{ display: "flex", flexDirection: "column", gap: 18, maxWidth: 580 }}>
            {paragraphs.map((p, i) =>
            <p key={i} style={{
              fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)",
              margin: 0, textWrap: "pretty"
            }}>{p}</p>
            )}
            <p style={{
              fontSize: 22, fontWeight: 600, fontStyle: "italic",
              color: "var(--ink)", margin: "8px 0 0",
              letterSpacing: "-0.015em"
            }}>— Mikhail</p>
          </div>
        </div>
      </div>
    </Section>);

}
window.Founder = Founder;