const { Eyebrow, Card, Divider, Badge } = window.IndigoAdvisoryDesignSystem_fba97f;

const gutter = { paddingLeft: 'var(--gutter)', paddingRight: 'var(--gutter)' };
const wrap = { maxWidth: 'var(--container)', margin: '0 auto' };

function TeamCard({ role, bio, name, photo }) {
  const ref = React.useRef(null);
  const [open, setOpen] = React.useState(false);
  const [t, setT] = React.useState({ rx: 0, ry: 0, gx: 50, gy: 50, on: false });
  const move = (e) => {
    if (open) return;
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top) / r.height;
    setT({ rx: (0.5 - py) * 10, ry: (px - 0.5) * 12, gx: px * 100, gy: py * 100, on: true });
  };
  const leave = () => { setT({ rx: 0, ry: 0, gx: 50, gy: 50, on: false }); setOpen(false); };
  return (
    <div
      ref={ref}
      onMouseMove={move}
      onMouseLeave={leave}
      onClick={() => setOpen(o => !o)}
      style={{ perspective: '900px', cursor: 'pointer' }}
    >
      <div style={{
        transform: open ? 'none' : `rotateX(${t.rx}deg) rotateY(${t.ry}deg) translateZ(0)`,
        transformStyle: 'preserve-3d',
        transition: t.on ? 'transform 80ms linear' : 'transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out)',
        background: 'var(--surface-card)',
        borderRadius: 'var(--radius-md)',
        border: 'var(--hairline)',
        padding: 'var(--space-5)',
        position: 'relative',
        overflow: 'hidden',
        boxShadow: (t.on || open)
          ? 'inset 0 1px 0 rgba(255,255,255,0.5), 0 18px 40px rgba(22,21,15,0.22)'
          : 'inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 16px rgba(22,21,15,0.1)'
      }}>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: t.on ? 1 : 0, transition: 'opacity 300ms var(--ease-out)', background: `radial-gradient(320px circle at ${t.gx}% ${t.gy}%, rgba(255,240,205,0.5), transparent 60%)` }} />
        <div style={{ display: 'flex', gap: 'var(--space-4)', position: 'relative', transform: 'translateZ(40px)' }}>
          <div style={{ width: open ? 132 : 72, height: open ? 132 : 72, flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'linear-gradient(135deg, var(--stone-100), var(--washi-100))', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', textAlign: 'center', lineHeight: 1.3, position: 'relative', overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(90,62,32,0.12)', transition: 'width 420ms var(--ease-out), height 420ms var(--ease-out)' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%)', transform: `translateX(${t.on ? '120%' : '-120%'})`, transition: 'transform 900ms var(--ease-out)', zIndex: 2 }} />
            {photo
              ? <img src={photo} alt={name || role} loading="lazy" decoding="async" width="132" height="132" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: t.on ? 'grayscale(1) contrast(1.08)' : 'grayscale(1) contrast(1.02)', transform: t.on ? 'scale(1.06)' : 'scale(1)', transition: 'transform 600ms var(--ease-out), filter 600ms var(--ease-out)' }} />
              : <span style={{ position: 'relative' }}>PHOTO<br/>TBD</span>}
          </div>
          <div>
            {name ? <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h4)', fontWeight: 'var(--fw-med)', color: 'var(--text-primary)' }}>{name}</div> : null}
            <div style={{ fontFamily: name ? 'var(--font-mono)' : 'var(--font-display)', fontSize: name ? 'var(--fs-xs)' : 'var(--fs-h4)', letterSpacing: name ? '0.12em' : 'var(--ls-tight)', textTransform: name ? 'uppercase' : 'none', fontWeight: name ? 'var(--fw-reg)' : 'var(--fw-med)', color: name ? 'var(--shu-600)' : 'var(--text-primary)', marginTop: name ? 4 : 0 }}>{role}</div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', margin: '6px 0 0', ...(open ? {} : { display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden' }) }}>{bio}</p>
            <span style={{ display: 'inline-block', marginTop: 'var(--space-3)', fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', letterSpacing: '0.12em', color: 'var(--shu-600)' }}>{open ? 'CLOSE −' : 'READ MORE +'}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function AboutScreen() {
  const team = [
    { role: 'Chairman', name: 'Vinit Kumar', photo: 'assets/vinit.sq.jpg', bio: 'Chairman of Indigo Group, leading the business for over twenty-five years — from an initial focus on agri-food and processing to diversified investments across biotechnology, technology, and infrastructure.' },
    { role: 'Advisor', name: 'Neeraj Chandra', photo: 'assets/neeraj.sq.jpg', bio: 'A distinguished banking professional with over 35 years of cross-functional expertise in Trade, Payments, Cash Management, Technology, and Operations. A Chartered Accountant by training, Neeraj most recently served as Head of Operations and Technology at Abu Dhabi Commercial Bank (ADCB) in India until 2025, where he was a member of the senior management team and led critical digitization and de-duplication projects. He has been instrumental in setting up foundational infrastructures and driving complex system migrations for global institutions — a founding member of the Commonwealth Bank of Australia\u2019s presence in India, with senior roles at ADCB, HSBC, The Bank of New York, and Standard Chartered. His contributions have earned the FIAKS Maven award, BFSI 100 Innovation Leadership Award, BFSI Technology Leadership Award, and the BFSI Leadership Award.' },
    { role: 'General Manager', name: 'Chandan Prajapati', photo: 'assets/chandan.sq.jpg', bio: 'Oversees group operations day to day — coordinating across business lines, managing execution timelines, and keeping the organisation running behind every mandate.' },
    { role: 'Accounts Manager', name: 'Yogesh Agre', photo: 'assets/yogesh.sq.jpg', bio: 'Manages the accounts function across the group — bookkeeping, reconciliations, payables and receivables, and statutory filings that keep the books clean and audit-ready.' },
    { role: 'Lead — AI Transformation', name: 'Anshuman Rathore', photo: 'assets/anshuman.sq.jpg', bio: "I work in the Chairman's Office at Indigo Group, running investment diligence across defence tech, biotech, mining, fintech and healthcare — from first founder call to final investment. Alongside it, I build the systems that hold the desk together: meeting intelligence pipelines, deal trackers, document routing, accounting automation. Two dozen live deals, one desk. IIT Kharagpur. Mumbai." },
    { role: "Senior Executive Manager to Chairman's Office", name: 'Ramila Dsouza', photo: 'assets/ramila.sq.jpg', bio: "Supports the Chairman's Office — managing schedules, correspondence, and coordination across the group so that mandates, meetings, and travel run without friction." },
    { role: 'Senior Manager, Accounts and Finance', name: 'Sachin Gupta', photo: 'assets/sachin.sq.jpg', bio: 'Leads the accounts and finance function across the group — financial reporting, taxation, audit, and controls — ensuring the numbers behind every transaction are accurate and compliant.' },
    { role: 'Assistant Manager, Finance', name: 'Muskaan Bhatter', photo: 'assets/muskaan.sq.jpg', bio: 'Manages bond portfolio investments and structured finance transactions, develops real estate financial models and cash flow projections, and supports investor requirements, and capital raising.' },
    { role: 'Manager — Investment and Transaction Execution', name: 'Keval Kareliya', photo: 'assets/keval.sq.jpg', bio: 'Structured finance and investment banking professional with \u20b92,000+ Cr of transaction exposure across structured debt, project finance, private credit, LRD refinancing and working capital facilities \u2014 including individual transactions of up to \u20b9500 Cr. Previously with a boutique investment banking firm, with hands-on experience in deal structuring, financial modelling, credit evaluation, lender syndication, due diligence and end-to-end execution. Prepares and reviews transaction and collateral documentation, including Information Memorandums and other lender-facing materials, with strong exposure to AIFs, private credit funds, NBFCs and banks \u2014 lender outreach, term sheet evaluation, security structuring, repayment waterfalls, escrow mechanisms and covenant frameworks. MBA in Finance from JBIMS (A+), M.Com and B.Com; NISM Certified Research Analyst with further certifications in Financial Modelling and Corporate Valuation.' },
    { role: 'Legal Head', name: 'Himanshu Joshi', photo: 'assets/himanshu.sq.jpg', bio: 'An accomplished legal professional with over 20 years of comprehensive experience managing end-to-end legal functions across real estate, corporate, and commercial sectors. Experienced in drafting and reviewing property and commercial agreements, conducting title due diligence, overseeing registrations, and ensuring compliance with RERA and other statutory requirements. Demonstrated expertise in handling litigation across civil, criminal, consumer, labour, and arbitration matters, effectively representing organisational interests. Accomplished in providing strategic legal advisory to management and business teams, supporting key decision-making, and maintaining strong governance and compliance standards. Well-versed in intellectual property rights, corporate law, and liaisoning with regulatory authorities and government departments.' },
    { role: 'Legal Executive', name: 'Ronak Agarwal', photo: 'assets/ronak.sq.jpg', bio: 'Handles transaction documentation and legal diligence — drafting and reviewing the agreements that give every structure its enforceable form.' },
    { role: 'Senior HR Executive', name: 'Vairagi Roliya', photo: 'assets/vairagi.sq.jpg', bio: 'Recruiter by profession, people person by passion. Helps Indigo Group build high-performing teams through strategic hiring and people-focused initiatives — building workplaces where both people and businesses thrive.' },
    { role: 'Admin', name: 'Taher Shaikh', photo: 'assets/taher.sq.jpg', bio: 'Manages administration and office operations across the group — facilities, vendors, and day-to-day coordination that keep the desk running.' },
    { role: 'Receptionist cum Executive Assistant', name: 'Mahirah Siddiqui', photo: 'assets/mahirah.sq.jpg', bio: 'Front desk receptionist and executive assistant, with two years and two months at Indigo — the first point of contact for visitors and calls, and support across scheduling and office coordination.' },
    { role: 'CS and Legal Intern', name: 'Vrushti Dedhia', photo: 'assets/vrushti.sq.jpg', bio: 'Responsible for ensuring the company complies with all legal, regulatory, and corporate governance requirements while safeguarding its legal interests. Oversees statutory compliance, board and shareholder matters, contract management, and regulatory filings. Provides legal guidance, manages legal risks and disputes, and supports the organization in maintaining ethical and compliant business operations.' },
    { role: 'CS Intern', name: 'Shilpa Slun', photo: 'assets/shilpa.sq.jpg', bio: 'Responsible for ensuring the company complies with all legal, regulatory, and corporate governance requirements while safeguarding its legal interests. Oversees statutory compliance, board and shareholder matters, contract management, and regulatory filings. Provides legal guidance, manages legal risks and disputes, and supports the organization in maintaining ethical and compliant business operations.' },
    { role: 'CS Intern', name: 'Shikha Kohli', photo: 'assets/shikha.sq.jpg', bio: 'A CS intern with a keen interest in corporate law, compliance and governance — supporting secretarial and regulatory work across the group.' },
  ];
  return (
    <div>
      <section style={{ background: 'linear-gradient(120deg, #5c3d22 0%, #8a5e38 100%)', ...gutter, paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-8)' }}>
        <div style={{ ...wrap, maxWidth: 'var(--container-narrow)', position: 'relative' }}>
          <div style={{ position: 'absolute', left: -40, top: -60, width: 320, height: 320, pointerEvents: 'none', background: 'radial-gradient(circle, rgba(255,214,140,0.18), transparent 65%)', filter: 'blur(10px)', animation: 'aboutGlow 14s ease-in-out infinite' }} />
          <div style={{ position: 'relative' }}>
          <div style={{ animation: 'aboutRise 900ms var(--ease-out) both' }}>
            <Eyebrow style={{ color: 'rgba(255,255,255,0.85)' }}>About Indigo</Eyebrow>
          </div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h2)', fontWeight: 'var(--fw-med)', lineHeight: 'var(--lh-snug)', letterSpacing: 'var(--ls-tight)', color: 'var(--paper)', margin: 'var(--space-5) 0 0', animation: 'aboutRise 1000ms var(--ease-out) 140ms both' }}>
            A diversified group, built over two and a half decades of creating value alongside its partners.
          </p>
          <div style={{ height: 2, width: 0, background: 'linear-gradient(90deg, var(--yamabuki-400), transparent)', margin: 'var(--space-6) 0 0', animation: 'aboutRule 1200ms var(--ease-out) 420ms both' }} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'rgba(255,255,255,0.82)', margin: 'var(--space-6) 0 0', animation: 'aboutRise 1000ms var(--ease-out) 560ms both' }}>
            Indigo Group, headquartered in Mumbai, is a diversified conglomerate engaged in technology, infrastructure, and food processing — and acts as a principal to transactions rather than an adviser at arm's length. Led by its Chairman, Mr. Vinit Kumar, for over twenty-five years, the Group has built value for itself and its partners across a long business journey. From an initial focus on agri-food and processing, it has diversified and invested heavily in biotechnology and the technology sector, working today on frontier areas such as blockchain and artificial intelligence.
          </p>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--washi-100)', ...gutter, paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-9)' }}>
        <div style={wrap}>
          <Eyebrow>The team</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-5)', marginTop: 'var(--space-6)' }}>
            {team.map((m) => (
              <TeamCard key={m.role} role={m.role} bio={m.bio} name={m.name} photo={m.photo} />
            ))}
          </div>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', marginTop: 'var(--space-5)' }}></p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutScreen });
