/* ========================================================
   Founder teaser + CTA + Footer
   ======================================================== */

/* Stylized portrait mark — abstract silhouette, not a real photo */
function PortraitMark() {
  return (
    <div className="portrait">
      <svg viewBox="0 0 320 400" preserveAspectRatio="xMidYMid slice" className="portrait-svg" aria-hidden>
        <defs>
          <linearGradient id="pg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--surface-2)"/>
            <stop offset="100%" stopColor="var(--bg-soft)"/>
          </linearGradient>
          <linearGradient id="pgs" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#2a2a2e"/>
            <stop offset="100%" stopColor="#141416"/>
          </linearGradient>
        </defs>
        <rect width="320" height="400" fill="url(#pg)"/>
        {/* grid bg */}
        <g stroke="var(--border)" strokeWidth="0.5" opacity="0.5">
          {Array.from({length: 10}).map((_,i)=>(<line key={"v"+i} x1={i*32} y1="0" x2={i*32} y2="400"/>))}
          {Array.from({length: 13}).map((_,i)=>(<line key={"h"+i} x1="0" y1={i*32} x2="320" y2={i*32}/>))}
        </g>
        {/* Silhouette: shoulders + head */}
        <path d="M60 400 L60 340 Q60 290 110 275 Q130 268 140 258 Q120 250 115 225 Q108 225 108 210 Q106 200 112 198 Q112 170 130 155 Q150 140 175 145 Q210 152 218 190 Q220 200 216 210 Q216 225 208 225 Q204 250 183 258 Q193 268 213 275 Q263 290 263 340 L263 400 Z"
          fill="url(#pgs)" stroke="var(--border-3)" strokeWidth="0.8"/>
        {/* accent glow ring behind head */}
        <circle cx="162" cy="180" r="55" fill="none" stroke="var(--accent)" strokeOpacity="0.3" strokeWidth="0.8"/>
        <circle cx="162" cy="180" r="80" fill="none" stroke="var(--accent)" strokeOpacity="0.12" strokeWidth="0.6"/>
        {/* accent dot */}
        <circle cx="215" cy="110" r="2.5" fill="var(--accent)"/>
        <circle cx="215" cy="110" r="7" fill="none" stroke="var(--accent)" strokeOpacity="0.4"/>
      </svg>
      <div className="portrait-tag mono">JEEL P. / FOUNDER</div>
      <style>{`
        .portrait {
          position: relative;
          aspect-ratio: 4 / 5;
          width: 100%;
          border-radius: 14px;
          overflow: hidden;
          border: 1px solid var(--border-2);
          background: var(--surface);
        }
        .portrait-svg { width: 100%; height: 100%; display: block; }
        .portrait-tag {
          position: absolute; left: 16px; bottom: 16px;
          font-size: 10px; letter-spacing: 0.16em;
          color: var(--text-3);
          padding: 6px 10px;
          border: 1px solid var(--border-2);
          border-radius: 999px;
          background: color-mix(in oklab, var(--bg) 70%, transparent);
          backdrop-filter: blur(6px);
        }
      `}</style>
    </div>
  );
}

function About() {
  return (
    <section id="about" className="about container" aria-label="About the founder">
      <div className="about-grid">
        <div className="reveal">
          <PortraitMark/>
        </div>
        <div className="about-text reveal">
          <div className="section-label"><span className="num">06</span> — The team</div>
          <h2 className="about-h">
            "I spent eight years watching companies spend fortunes on AI that never left the demo."
          </h2>
          <p className="about-p">
            I'm <span style={{color:"var(--text)"}}>Jeel</span> — I founded Mindlytic after leading ML and platform work at Stripe-adjacent fintech and two Series-B agent startups. We're a small team of senior engineers who would rather ship one production system than pitch ten.
          </p>
          <p className="about-p" style={{marginTop: 16}}>
            Our delivery team in Surat means your system gets worked on while Jersey City sleeps. Every engagement is signed off by me personally.
          </p>
          <div className="about-signoff">
            <div className="about-sig">
              <svg viewBox="0 0 140 40" width="120" height="34" aria-hidden>
                <path d="M5 28 Q15 8, 25 24 T 45 22 Q55 12, 65 26 Q75 36, 80 20 T 95 24 Q110 18, 130 14"
                  stroke="var(--text-2)" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
              </svg>
            </div>
            <a href="about.html#leadership" className="ilink">More about the team →</a>
          </div>
        </div>
      </div>
      <style>{`
        .about { padding: var(--section-y) 0; }
        .about-grid {
          display: grid;
          grid-template-columns: 0.7fr 1fr;
          gap: 72px;
          align-items: center;
        }
        .about-h {
          font-size: clamp(26px, 2.8vw, 36px);
          line-height: 1.2;
          font-weight: 500;
          letter-spacing: -0.02em;
          margin: 20px 0 28px;
          max-width: 22ch;
          color: var(--text);
        }
        .about-p { font-size: 16px; line-height: 1.65; color: var(--text-3); max-width: 52ch; }
        .about-signoff { display: flex; align-items: center; gap: 32px; margin-top: 36px; }
        @media (max-width: 860px) {
          .about-grid { grid-template-columns: 1fr; gap: 40px; max-width: 520px; }
        }
      `}</style>
    </section>
  );
}

/* ---------------- CTA ---------------- */
function CTA() {
  return (
    <section id="contact" className="cta" aria-label="Book a call">
      <div className="container cta-inner">
        <div className="cta-glow" aria-hidden/>
        <div className="cta-grid-bg" aria-hidden/>
        <div className="cta-content reveal">
          <div className="section-label"><span className="num">07</span> — Let's talk</div>
          <h2 className="cta-h">
            Have an AI project <br/><span className="cta-h-accent">in mind?</span>
          </h2>
          <p className="cta-sub">
            Book a 30-minute discovery call. We'll tell you if we're the right fit — and if not, who is.
          </p>
          <div className="cta-actions">
            <a href="contact.html" className="btn btn-primary btn-lg">
              Book a discovery call <I.Arrow/>
            </a>
            <div className="cta-avail">
              <I.Calendar/>
              <span>Usually available this week</span>
            </div>
          </div>
          <div className="cta-alt mono">
            OR EMAIL <a href="mailto:hello@mindlytic.ai" className="cta-email">hello@mindlytic.ai</a>
          </div>
        </div>
      </div>
      <style>{`
        .cta { position: relative; padding: var(--section-y) 0; overflow: hidden; }
        .cta-inner { position: relative; }
        .cta-glow {
          position: absolute; inset: -10%;
          background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--accent-soft), transparent 60%);
          opacity: 0.9;
          pointer-events: none;
        }
        .cta-grid-bg {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(to right, color-mix(in oklab, var(--text) 6%, transparent) 1px, transparent 1px),
            linear-gradient(to bottom, color-mix(in oklab, var(--text) 6%, transparent) 1px, transparent 1px);
          background-size: 48px 48px;
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
          -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
          opacity: 0.4;
          pointer-events: none;
        }
        .cta-content { position: relative; text-align: center; max-width: 780px; margin: 0 auto; padding: 24px; }
        .cta-h {
          font-size: clamp(44px, 7vw, 88px);
          line-height: 1;
          letter-spacing: -0.035em;
          font-weight: 600;
          margin-bottom: 24px;
        }
        .cta-h-accent { color: var(--accent); }
        .cta-sub { font-size: 18px; color: var(--text-2); max-width: 44ch; margin: 0 auto 40px; line-height: 1.55; }
        .cta-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
        .btn-lg { height: 54px; padding: 0 28px; font-size: 15px; }
        .cta-avail { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
        .cta-avail svg { color: var(--accent); }
        .cta-alt { margin-top: 48px; font-size: 10.5px; color: var(--text-4); }
        .cta-email { color: var(--text-2); margin-left: 8px; letter-spacing: 0; font-family: var(--font-mono); }
        .cta-email:hover { color: var(--accent); }
      `}</style>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer className="foot" role="contentinfo">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <Wordmark/>
            <p className="foot-tag">AI-native development studio. Production AI for companies who need it to actually work.</p>
            <div className="foot-locales">
              <div className="foot-locale">
                <span className="mono foot-locale-l">HQ · NJ</span>
                <span className="foot-locale-v">110 Montgomery St, Jersey City</span>
              </div>
              <div className="foot-locale">
                <span className="mono foot-locale-l">DELIVERY · IN</span>
                <span className="foot-locale-v">Vesu, Surat, Gujarat</span>
              </div>
            </div>
          </div>
          <div className="foot-cols">
            <div>
              <div className="mono foot-col-h">Company</div>
              <ul>
                <li><a href="about.html">About</a></li>
                <li><a href="portfolio.html">Work</a></li>
                <li><a href="careers.html">Careers</a></li>
                <li><a href="journal.html">Journal</a></li>
              </ul>
            </div>
            <div>
              <div className="mono foot-col-h">Services</div>
              <ul>
                <li><a href="services-agents.html">AI Agents</a></li>
                <li><a href="services-rag.html">RAG & Knowledge</a></li>
                <li><a href="services-voice.html">Voice AI</a></li>
                <li><a href="services-consult.html">Fractional CTO</a></li>
              </ul>
            </div>
            <div>
              <div className="mono foot-col-h">Contact</div>
              <ul>
                <li><a href="mailto:hello@mindlytic.ai">hello@mindlytic.ai</a></li>
                <li><a href="contact.html">Book a call</a></li>
                <li className="foot-social">
                  <a href="https://linkedin.com/company/mindlytic" aria-label="LinkedIn"><I.Linkedin/></a>
                  <a href="https://github.com/mindlytic" aria-label="GitHub"><I.Github/></a>
                  <a href="https://x.com/mindlytic" aria-label="X"><I.X/></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Mindlytic AI · <span className="mono">Built with intent.</span></span>
          <span className="foot-bottom-links">
            <a href="privacy.html">Privacy</a>
            <a href="terms.html">Terms</a>
          </span>
        </div>
      </div>
      <style>{`
        .foot { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 72px 0 32px; }
        .foot-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 72px; padding-bottom: 56px; border-bottom: 1px solid var(--border); }
        .foot-tag { font-size: 14px; color: var(--text-3); max-width: 36ch; margin: 20px 0 28px; line-height: 1.55; }
        .foot-locales { display: flex; flex-direction: column; gap: 12px; }
        .foot-locale { display: flex; flex-direction: column; gap: 2px; }
        .foot-locale-l { font-size: 10px; color: var(--text-4); }
        .foot-locale-v { font-size: 13px; color: var(--text-2); }
        .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
        .foot-col-h { font-size: 10px; color: var(--text-4); margin-bottom: 18px; }
        .foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
        .foot-cols a { font-size: 14px; color: var(--text-2); transition: color .2s; }
        .foot-cols a:hover { color: var(--accent); }
        .foot-social { display: flex; gap: 12px; margin-top: 8px; }
        .foot-social a {
          width: 32px; height: 32px;
          border: 1px solid var(--border-2); border-radius: 8px;
          display: inline-flex; align-items: center; justify-content: center;
          color: var(--text-3);
        }
        .foot-social a:hover { color: var(--accent); border-color: var(--accent-line); }
        .foot-bottom {
          display: flex; justify-content: space-between; align-items: center;
          padding-top: 28px; font-size: 12.5px; color: var(--text-4);
        }
        .foot-bottom-links { display: flex; gap: 24px; }
        .foot-bottom a:hover { color: var(--text-2); }
        @media (max-width: 860px) {
          .foot-top { grid-template-columns: 1fr; gap: 48px; }
          .foot-cols { grid-template-columns: repeat(3, 1fr); gap: 24px; }
        }
        @media (max-width: 540px) {
          .foot-cols { grid-template-columns: 1fr 1fr; }
          .foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { About, CTA, Footer });