// page-contact.jsx — "Contact"

const CONT_W = 1440;
const CONT_H = 3650;

function PageContact() {
  return (
    <CPage active="Contact" width={CONT_W} height={CONT_H}>
      <ContactHero />
      <ContactForm />
      <ContactChannels />
      <ContactFAQ />
    </CPage>
  );
}

function ContactHero() {
  return (
    <section className="c-section-pad c-hero-pad" style={{
      position: 'relative',
      padding: '80px 56px 100px',
      overflow: 'hidden',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div aria-hidden className="c-orb" style={{
        position: 'absolute', left: '60%', top: -100, width: 800, height: 800,
        borderRadius: '50%',
        background: `radial-gradient(circle at 40% 40%, ${P1686.violet}66 0%, ${P1686.blue}33 50%, transparent 75%)`,
        filter: 'blur(80px)', opacity: 0.45, pointerEvents: 'none',
        animation: 'c-orbFloat 16s ease-in-out infinite',
      }} />
      <div className="c-content">
      <div style={{ position: 'relative', paddingTop: 56, maxWidth: 1100 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>Contact · 01</MonoLabel>
        <h1 className="c-headline-mega" style={{
          margin: '24px 0 0', fontWeight: 500,
          fontSize: 132, lineHeight: 0.95, letterSpacing: -3.8,
          textWrap: 'balance',
        }}>
          Reach us<br />
          <span style={{ color: P1686.muted }}>directly.</span>
        </h1>
        <p className="c-body-lg" style={{
          marginTop: 36, fontSize: 19, lineHeight: 1.55, color: P1686.muted,
          maxWidth: 640,
        }}>
          We read every note. Founders pitching, operators looking for a home,
          press and partners. Pick the door that fits and write to us.
        </p>
      </div>
      </div>
    </section>
  );
}

const INQUIRY_TYPES = [
  {
    k: 'founder',
    label: 'Founder pitch',
    sub: 'You operate a profitable, founder-led software or services company and are exploring a long-hold home.',
    eta: '5 business days',
    tint: 'violet',
  },
  {
    k: 'general',
    label: 'General inquiry',
    sub: 'Partnerships, vendor introductions, or you simply want to start a conversation.',
    eta: '5 business days',
    tint: 'blue',
  },
  {
    k: 'press',
    label: 'Press & media',
    sub: 'Editorial, podcast, or research inquiry. Please include outlet and deadline in your note.',
    eta: '2 business days',
    tint: 'moss',
  },
];

function ContactForm() {
  const [active, setActive] = React.useState('founder');
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content">
      <header style={{ marginBottom: 56, maxWidth: 900 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>§ Send a note</MonoLabel>
        <h2 className="c-headline-sml" style={{
          margin: '14px 0 0', fontWeight: 500,
          fontSize: 56, lineHeight: 1, letterSpacing: -1.4,
        }}>Choose the door, then write.</h2>
      </header>

      {/* intent picker */}
      <div className="c-grid-3" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        marginBottom: 32,
      }}>
        {INQUIRY_TYPES.map((t) => {
          const isActive = active === t.k;
          const tintHex = t.tint === 'violet' ? P1686.violet : t.tint === 'blue' ? P1686.blue : P1686.moss;
          return (
            <button key={t.k} type="button" onClick={() => setActive(t.k)}
              style={{
                cursor: 'pointer', textAlign: 'left',
                background: isActive ? P1686.surfaceHi : P1686.surface,
                border: `1px solid ${isActive ? P1686.lineHi : P1686.line}`,
                borderRadius: 14, padding: '24px 24px 22px',
                color: 'inherit', font: 'inherit',
                transition: 'background .2s, border-color .2s, transform .2s',
                position: 'relative', overflow: 'hidden',
              }}>
              {isActive && (
                <div aria-hidden style={{
                  position: 'absolute', top: -80, right: -80, width: 240, height: 240, borderRadius: '50%',
                  background: `radial-gradient(circle, ${tintHex}44 0%, transparent 70%)`,
                  filter: 'blur(16px)',
                }} />
              )}
              <div style={{
                position: 'relative',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                marginBottom: 14,
              }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: 99, background: tintHex,
                    boxShadow: isActive ? `0 0 12px ${tintHex}` : 'none',
                  }} />
                  <span style={{
                    fontSize: 18, fontWeight: 500, letterSpacing: -0.3, color: P1686.text,
                  }}>{t.label}</span>
                </span>
                <span style={{
                  width: 18, height: 18, borderRadius: 99,
                  border: `1.5px solid ${isActive ? P1686.text : P1686.lineHi}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {isActive && <span style={{ width: 8, height: 8, borderRadius: 99, background: P1686.text }} />}
                </span>
              </div>
              <p style={{
                margin: 0, position: 'relative',
                fontSize: 14, lineHeight: 1.55, color: P1686.muted,
              }}>{t.sub}</p>
              <div style={{
                marginTop: 22, paddingTop: 16, borderTop: `1px solid ${P1686.line}`,
                position: 'relative',
                display: 'flex', justifyContent: 'space-between',
              }}>
                <MonoLabel>Reply ETA</MonoLabel>
                <MonoLabel style={{ color: P1686.text }}>{t.eta}</MonoLabel>
              </div>
            </button>
          );
        })}
      </div>

      {/* form */}
      <div style={{
        background: P1686.surface, border: `1px solid ${P1686.line}`,
        borderRadius: 16, padding: '36px 36px 28px',
      }}>
        <div className="c-grid-2" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
        }}>
          <Field label="Your name" placeholder="First Last" />
          <Field label="Email" placeholder="you@company.com" />
          <Field label="Company" placeholder="Operating company or affiliation" />
          <Field label="Role" placeholder="Founder · CEO · Partner · …" />
        </div>
        <div style={{ marginTop: 24 }}>
          <Field
            label={active === 'founder' ? 'Tell us about your business' : active === 'press' ? 'Outlet, deadline, and angle' : 'What\u2019s on your mind?'}
            placeholder={
              active === 'founder'
                ? 'Sector, ARR / revenue, team size, why you\u2019re thinking about a long-hold partner…'
                : active === 'press'
                  ? 'Outlet, format, deadline. Anything specific you\u2019d like to cover.'
                  : 'A few sentences is plenty. We\u2019ll write back.'
            }
            multiline
          />
        </div>
        <div className="c-flex-stack" style={{
          marginTop: 28, paddingTop: 24, borderTop: `1px solid ${P1686.line}`,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16,
        }}>
          <MonoLabel>Encrypted in transit · we don't share addresses</MonoLabel>
          <button type="button" className="c-cta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '14px 24px', borderRadius: 999,
            background: P1686.text, color: P1686.bg,
            border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer',
            fontFamily: 'inherit',
          }}>
            Send note
            <span className="c-cta-arrow" style={{ display: 'inline-flex', transition: 'transform .25s' }}>
              <Arrow size={13} color={P1686.bg} />
            </span>
          </button>
        </div>
      </div>
      </div>
    </section>
  );
}

function Field({ label, placeholder, multiline }) {
  const base = {
    width: '100%',
    background: P1686.bg2,
    border: `1px solid ${P1686.line}`,
    borderRadius: 10,
    padding: '14px 16px',
    color: P1686.text,
    fontFamily: 'inherit', fontSize: 15, lineHeight: 1.4,
    outline: 'none',
  };
  return (
    <label style={{ display: 'block' }}>
      <MonoLabel>{label}</MonoLabel>
      <div style={{ marginTop: 8 }}>
        {multiline ? (
          <textarea placeholder={placeholder} rows={5} style={{ ...base, resize: 'vertical', minHeight: 140 }} />
        ) : (
          <input type="text" placeholder={placeholder} style={base} />
        )}
      </div>
    </label>
  );
}

function ContactChannels() {
  const channels = [
    {
      label: 'General inquiries',
      primary: 'contact@1686holdings.com',
      sub: 'Founders, operators, partners. We read every note.',
      href: 'mailto:contact@1686holdings.com',
    },
    {
      label: 'Press & media',
      primary: 'contact@1686holdings.com',
      sub: 'Editorial, podcast, research. Include outlet and deadline.',
      href: 'mailto:contact@1686holdings.com',
    },
  ];
  return (
    <section className="c-section-pad c-section-pad-y" style={{
      padding: '120px 56px',
      borderBottom: `1px solid ${P1686.line}`,
    }}>
      <div className="c-content">
      <header style={{ marginBottom: 48, maxWidth: 900 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>§ Direct channels</MonoLabel>
        <h2 className="c-headline-sml" style={{
          margin: '14px 0 0', fontWeight: 500,
          fontSize: 56, lineHeight: 1, letterSpacing: -1.4,
        }}>Or just email us.</h2>
      </header>
      <div className="c-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
        {channels.map((c) => (
          <a key={c.label} href={c.href} className="c-card" style={{
            display: 'flex', flexDirection: 'column', gap: 16,
            background: P1686.surface, border: `1px solid ${P1686.line}`,
            borderRadius: 14, padding: '28px 28px 30px',
            textDecoration: 'none', color: 'inherit', minHeight: 200,
          }}>
            <MonoLabel>{c.label}</MonoLabel>
            <div style={{
              fontSize: 26, fontWeight: 500, letterSpacing: -0.5,
              color: P1686.text, lineHeight: 1.2, marginTop: 'auto',
            }}>{c.primary}</div>
            <div style={{ fontSize: 13, color: P1686.muted, lineHeight: 1.5 }}>{c.sub}</div>
          </a>
        ))}
      </div>
      </div>
    </section>
  );
}

function ContactFAQ() {
  const qa = [
    {
      q: 'What kinds of companies do you build with?',
      a: 'Profitable, founder-led software and services businesses, typically $2M–$25M revenue. Sectors we know: compliance and trust, professional services, developer infrastructure, hospitality operations.',
    },
    {
      q: 'How does the partnership work?',
      a: 'We build alongside founders. Our team provides shared back office, agentic-engineering leverage, and operator-led management. The exact structure varies by company. If you’re exploring what fits, write to us and we’ll walk through it.',
    },
    {
      q: 'What\u2019s the timeline from first conversation to partnership?',
      a: 'Usually 8–14 weeks. We don\u2019t run competitive processes; we work through diligence in conversation with the founder.',
    },
    {
      q: 'Are you currently hiring?',
      a: 'For the holding company, no. For portfolio companies, occasionally; those listings live on the individual company sites.',
    },
  ];
  return (
    <section className="c-section-pad c-section-pad-y" style={{ padding: '120px 56px 140px' }}>
      <div className="c-content">
      <header style={{ marginBottom: 48, maxWidth: 900 }}>
        <MonoLabel style={{ color: P1686.violetHi }}>§ Quick answers</MonoLabel>
        <h2 className="c-headline-sml" style={{
          margin: '14px 0 0', fontWeight: 500,
          fontSize: 56, lineHeight: 1, letterSpacing: -1.4,
        }}>Things people ask.</h2>
      </header>

      <div style={{
        border: `1px solid ${P1686.line}`, borderRadius: 16, overflow: 'hidden',
      }}>
        {qa.map((item, i) => <FAQItem key={i} item={item} defaultOpen={i === 0} divider={i > 0} />)}
      </div>
      </div>
    </section>
  );
}

function FAQItem({ item, defaultOpen, divider }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div style={{
      borderTop: divider ? `1px solid ${P1686.line}` : 'none',
      background: open ? P1686.surface : 'transparent',
      transition: 'background .25s',
    }}>
      <button type="button" onClick={() => setOpen((o) => !o)}
        style={{
          width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '24px 28px', background: 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: 'inherit', color: 'inherit', textAlign: 'left', gap: 32,
        }}>
        <span style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, color: P1686.text }}>{item.q}</span>
        <span style={{
          width: 32, height: 32, borderRadius: 99,
          border: `1px solid ${P1686.lineHi}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: P1686.muted,
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          transition: 'transform .25s',
          flexShrink: 0,
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
            <path d="M6 1v10M1 6h10" />
          </svg>
        </span>
      </button>
      <div style={{
        maxHeight: open ? 240 : 0,
        opacity: open ? 1 : 0,
        transition: 'max-height .35s cubic-bezier(.2,.7,.3,1), opacity .25s',
        overflow: 'hidden',
      }}>
        <p style={{
          margin: 0, padding: '0 28px 28px',
          fontSize: 16, lineHeight: 1.6, color: P1686.muted, maxWidth: 880,
        }}>{item.a}</p>
      </div>
    </div>
  );
}

window.PageContact = PageContact;
window.CONT_DIMS = { w: CONT_W, h: CONT_H };