// contact.jsx · Contact page

const contactStyles = `
  .c-hero{padding:88px 0 48px;position:relative;overflow:hidden}
  .c-hero-mark{position:absolute;right:-160px;top:80px;width:520px;height:320px;
    color:${ARMIK.accentBri}3a;pointer-events:none;animation:drift 22s ease-in-out infinite}
  .c-hero h1{font-size:clamp(56px,8.6vw,128px);max-width:16ch;letter-spacing:-0.02em}
  .c-hero h1 em{color:var(--accent);font-style:italic}
  .c-hero .sub{margin-top:28px;font-family:var(--display);font-size:28px;
    line-height:1.35;color:var(--ink-soft);max-width:36ch}

  .c-banner{margin-top:64px;display:grid;grid-template-columns:1fr 1.4fr;gap:24px;
    align-items:stretch}
  @media(max-width:780px){.c-banner{grid-template-columns:1fr}}
  .c-banner-img{position:relative;border-radius:6px;overflow:hidden;
    background:${ARMIK.blue};min-height:280px;
    box-shadow:0 30px 80px -30px ${ARMIK.blue}55}
  .c-banner-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .c-banner-img .badge{position:absolute;left:22px;bottom:22px;font-family:var(--mono);
    font-size:10.5px;color:#fff;letter-spacing:.12em;padding:8px 14px;
    background:rgba(0,0,0,.32);backdrop-filter:blur(6px);border-radius:999px;
    border:1px solid rgba(255,255,255,.22)}
  .c-promise{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
    padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:20px}
  .c-promise h3{font-family:var(--display);font-size:32px;line-height:1.15;
    letter-spacing:-0.01em}
  .c-promise p{color:var(--ink-soft);font-size:15px;line-height:1.7}
  .c-promise ul{display:flex;flex-direction:column;gap:10px;margin-top:8px}
  .c-promise li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;
    color:var(--ink-soft);line-height:1.55}
  .c-promise li::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;
    background:var(--accent);margin-top:8px}

  .c-grid{margin-top:96px;padding-top:48px;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:1.3fr 1fr;gap:80px}
  @media(max-width:980px){.c-grid{grid-template-columns:1fr;gap:48px}}

  /* FORM */
  .form{display:flex;flex-direction:column;gap:24px}
  .form h3{font-family:var(--display);font-size:38px;letter-spacing:-0.01em;
    line-height:1.1;margin-bottom:8px}
  .form h3 em{color:var(--accent);font-style:italic}
  .form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:720px){.form .row{grid-template-columns:1fr}}
  .field{display:flex;flex-direction:column;gap:8px}
  .field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-mute)}
  .field label .req{color:var(--accent)}
  .field input,.field textarea,.field select{
    background:transparent;border:0;border-bottom:1px solid var(--ink-faint);
    color:var(--ink);font-family:var(--body);font-size:16px;padding:10px 0;
    outline:none;transition:.25s;width:100%}
  .field textarea{resize:vertical;min-height:96px;line-height:1.5}
  .field input:focus,.field textarea:focus,.field select:focus{
    border-color:var(--accent)}
  .field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
  .field select{appearance:none;padding-right:20px;cursor:pointer}
  .form-submit{margin-top:8px;align-self:flex-start}
  .form-note{font-size:12.5px;color:var(--ink-faint);line-height:1.6;margin-top:4px}

  .form-success{padding:40px 32px;border:1px solid var(--accent);
    background:${ARMIK.accentBri}24;border-radius:4px;display:flex;flex-direction:column;gap:14px;
    animation:fadeUp .8s ease-out}
  @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  .form-success .t{font-family:var(--display);font-size:32px;line-height:1.15;
    letter-spacing:-0.01em}
  .form-success .b{color:var(--ink-soft);font-size:14.5px;line-height:1.65;max-width:42ch}
  .form-success .mark{width:36px;height:36px;border-radius:50%;background:var(--accent);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1}

  /* ASIDE */
  .c-aside{display:flex;flex-direction:column;gap:24px}
  .c-card{padding:32px 28px;background:var(--surface);border:1px solid var(--rule);
    border-radius:6px;display:flex;flex-direction:column;gap:14px;transition:.25s;
    position:relative;overflow:hidden}
  .c-card::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;
    background:var(--accent);transform:scaleY(0);transform-origin:top;transition:.35s}
  .c-card:hover{transform:translateY(-2px)}
  .c-card:hover::before{transform:scaleY(1)}
  .c-card h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent)}
  .c-card p,.c-card a{font-family:var(--display);font-size:24px;line-height:1.3;
    letter-spacing:-0.01em}
  .c-card a{border-bottom:1px solid var(--ink-faint);padding-bottom:2px;
    display:inline-block;width:max-content}
  .c-card a:hover{border-color:var(--accent);color:var(--accent)}
  .c-card .note{font-family:var(--body);font-size:13.5px;color:var(--ink-mute);
    line-height:1.65;margin-top:4px}

  .c-meta{padding:48px 0;border-top:1px solid var(--rule);margin-top:48px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  @media(max-width:780px){.c-meta{grid-template-columns:1fr;gap:18px}}
  .c-meta .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
  .c-meta .v{font-family:var(--display);font-size:24px;line-height:1.3}
  .c-meta .v em{color:var(--accent);font-style:italic}
`;

function ContactPage() {
  useReveal();
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name:"", email:"", company:"", role:"founder",
    revenue:"", timing:"exploring", message:""
  });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior:"smooth" });
  };

  return (
    <>
      <style>{buildStyles()}</style>
      <style>{contactStyles}</style>
      <Nav active="Contact" />

      <section className="c-hero">
        <div className="c-hero-mark"><CirclesMark size={320} stroke={1.2} /></div>
        <div className="wrap">
          <div className="eyebrow mono reveal">
            <span className="bar"></span>
            <span>Start a confidential conversation</span>
          </div>
          <h1 className="display reveal">Tell us about the company you <em>built</em>.</h1>
          <p className="sub italic reveal d1">
            All enquiries are read by a person, treated in strict confidence,
            and replied to within one working day.
          </p>

          <div className="c-banner">
            <div className="c-banner-img reveal d1">
              <img src="assets/handshake.webp" alt="Two hands meeting" />
              <span className="badge">A handshake means something</span>
            </div>
            <div className="c-promise reveal d2">
              <h3>How we treat your enquiry.</h3>
              <p>Sending a note to Armik should feel as private as a phone call to a friend. That is the only way it works.</p>
              <ul>
                <li>Read by a partner of the firm. Never an inbox, never an algorithm.</li>
                <li>Replied to within one working day, usually the same day.</li>
                <li>Not shared with staff, customers, competitors, or third parties.</li>
                <li>No commitment, no NDA needed for a first conversation.</li>
              </ul>
            </div>
          </div>

          <div className="c-grid">
            <div>
              {submitted ? (
                <div className="form-success">
                  <div className="mark">✓</div>
                  <div className="t">Thank you. We have your note.</div>
                  <div className="b">
                    Someone from Armik will reply personally within one
                    working day, usually sooner. Nothing you have shared
                    will leave the firm.
                  </div>
                  <a href="index.html" className="btn btn-ghost" style={{marginTop:12,alignSelf:"flex-start"}}>
                    Back to home <span className="arrow"></span>
                  </a>
                </div>
              ) : (
                <form className="form reveal" onSubmit={submit}>
                  <h3>Write to <em>us</em>.</h3>
                  <div className="row">
                    <div className="field">
                      <label>Your name <span className="req">*</span></label>
                      <input required value={form.name} onChange={update("name")}
                        placeholder="Jane Whitfield" />
                    </div>
                    <div className="field">
                      <label>Email <span className="req">*</span></label>
                      <input required type="email" value={form.email}
                        onChange={update("email")} placeholder="jane@company.co.uk" />
                    </div>
                  </div>
                  <div className="row">
                    <div className="field">
                      <label>Company</label>
                      <input value={form.company} onChange={update("company")}
                        placeholder="Whitfield Engineering Ltd" />
                    </div>
                    <div className="field">
                      <label>You are a</label>
                      <select value={form.role} onChange={update("role")}>
                        <option value="founder">Founder or owner</option>
                        <option value="advisor">Advisor or broker</option>
                        <option value="other">Something else</option>
                      </select>
                    </div>
                  </div>
                  <div className="row">
                    <div className="field">
                      <label>Approximate revenue</label>
                      <select value={form.revenue} onChange={update("revenue")}>
                        <option value="">Prefer not to say</option>
                        <option>Under £2m</option>
                        <option>£2m to £5m</option>
                        <option>£5m to £10m</option>
                        <option>£10m to £25m</option>
                        <option>Over £25m</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Timing</label>
                      <select value={form.timing} onChange={update("timing")}>
                        <option value="exploring">Just exploring</option>
                        <option value="thinking">Thinking about it</option>
                        <option value="active">Actively considering a sale</option>
                        <option value="advisor">An advisor is already engaged</option>
                      </select>
                    </div>
                  </div>
                  <div className="field">
                    <label>A note <span className="req">*</span></label>
                    <textarea required value={form.message} onChange={update("message")}
                      placeholder="A sentence or two about the business and what you are considering. Detail is helpful but never required." />
                  </div>
                  <button type="submit" className="btn btn-primary form-submit">
                    Send privately <span className="arrow"></span>
                  </button>
                  <p className="form-note">
                    Strictly confidential. We never share or sell your details, and
                    we will not contact your team, customers, or competitors.
                  </p>
                </form>
              )}
            </div>

            <aside className="c-aside">
              <div className="c-card reveal d1">
                <h4>Direct line</h4>
                <a href="mailto:hello@armikcapital.co.uk">hello@armikcapital.co.uk</a>
                <p className="note">Replies usually within 24 hours, often the same day. Always from a person.</p>
              </div>
              <div className="c-card reveal d2">
                <h4>Intermediaries</h4>
                <p>Advisors welcome.</p>
                <p className="note">We work happily with brokers, accountants, and solicitors, and pay fees directly.</p>
              </div>
              <div className="c-card reveal d3">
                <h4>Discretion</h4>
                <p>Total.</p>
                <p className="note">Nothing you share leaves Armik without your written agreement.</p>
              </div>
            </aside>
          </div>

          <div className="c-meta">
            <div className="reveal d1">
              <div className="lbl">Geography</div>
              <div className="v">United Kingdom</div>
            </div>
            <div className="reveal d2">
              <div className="lbl">Cadence</div>
              <div className="v">1 to 2 per year</div>
            </div>
            <div className="reveal d3">
              <div className="lbl">Hold period</div>
              <div className="v"><em>Indefinite</em></div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage />);