/* global React, ReactDOM, Header, Footer, Button, Field, Icon, BarsMotif, scrollToSection, useReveal */


function Hero() {
  return (
    <section className="hero" id="top">
      <BarsMotif className="bars-bg" style={{ width: 660, height: 540 }} opacity={0.14} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="eyebrow">Commercial Strategic Counsel</div>
        <h1>Clarity of Purpose. Confidence in Direction.</h1>
        <div className="mint-rule"></div>
        <p className="lede">
          Senior advisory to business owners, executives and boards who are navigating through inflection points and strategic opportunities. Grounded in decades of strategic operating experience across multiple industries and various business structures.
        </p>
        <div className="actions">
          <Button variant="secondary" onClick={() => scrollToSection('contact')}>Schedule a conversation</Button>
          <Button variant="ghost-light" onClick={() => scrollToSection('engagements')}>View engagements</Button>
        </div>
      </div>
    </section>
  );
}

function Practice() {
  const [ref, visible] = useReveal();
  const services = [
    {
      num: '01',
      icon: 'compass',
      title: 'Corporate strategy',
      body: 'Defining the right question before producing the answer. Where to engage, where to step back, and how to sequence the moves that follow.',
    },
    {
      num: '02',
      icon: 'handshake',
      title: 'Acquisitions & divestitures',
      body: 'Advisory support from initial target identification through closing. Covering deal structure, due diligence coordination, and integration that ultimately determines success.',
    },
    {
      num: '03',
      icon: 'file-search',
      title: 'Strategic due diligence',
      body: 'A senior set of eyes on the numbers, the narrative, and the gap between them. Q of E work without the team overhead.',
    },
    {
      num: '04',
      icon: 'landmark',
      title: 'Board advisory',
      body: 'Governance counsel for boards, audit committees, and business leaders. Advising on succession planning, capital structure and acquisition / divestiture. The discipline of asking the right question first.',
    },
  ];
  return (
    <section ref={ref} className={`section section-reveal${visible ? ' is-visible' : ''}`} id="practice">
      <div className="container">
        <div className="section-eyebrow">Practice</div>
        <h2 className="section-head">A focused practice across the corporate strategic decisions that matter most.</h2>
        <div className="mint-rule-sm"></div>

        <div className="services services--four">
          {services.map(s => (
            <div className="service" key={s.title}>
              <div className="card-num">{s.num}</div>
              <div className="icon"><Icon name={s.icon} /></div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Approach() {
  const [ref, visible] = useReveal();
  const items = [
    { n: '01', h: 'Clarity',     p: 'We cut through complexity to reveal what is essential – and we put that question in writing before we work on it.' },
    { n: '02', h: 'Direction',   p: "We help organizations make decisive choices and move. We don't return a menu. We return a recommendation." },
    { n: '03', h: 'Experience',  p: 'Our counsel is grounded in decades of operating practice across industrials and middle-market services.' },
    { n: '04', h: 'Partnership', p: 'Principal-led on every engagement. Our success is defined by your outcomes – not the volume of our deliverables.' },
  ];
  return (
    <section ref={ref} className={`section alt section-reveal${visible ? ' is-visible' : ''}`} id="approach">
      <div className="container">
        <div className="section-eyebrow">The Cowles Approach</div>
        <h2 className="section-head">Four working principles. One sequenced recommendation.</h2>
        <div className="mint-rule-sm"></div>

        <div className="approach-grid">
          {items.map(it => (
            <div className="approach-item" key={it.n}>
              <div className="watermark" aria-hidden="true">{it.n}</div>
              <div className="n">{it.n}</div>
              <h4>{it.h}</h4>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedEngagement() {
  return (
    <div className="featured-engagement">
      <div className="fe-head">
        <BarsMotif className="bars" opacity={0.22} />
        <div className="label">Featured engagement · Industrials</div>
        <h3>Carving out a non-core industrial division at 1.4× clearing value.</h3>
        <div className="meta">
          <span><strong>Sector</strong><div>Industrials</div></span>
          <span><strong>Engagement</strong><div>Divestiture · 9 months</div></span>
          <span><strong>Year</strong><div>2025</div></span>
          <span><strong>Outcome</strong><div>Closed at $410M</div></span>
        </div>
      </div>

      <div className="fe-body">
        <div className="fe-col">
          <h4>Situation</h4>
          <p>
            A privately held industrials platform had spent four years operating a small
            aftermarket division acquired in a prior cycle. Margins were respectable on paper;
            management attention was not. The board had asked twice whether to keep the business –
            and twice received "we should run more analysis."
          </p>
          <p>
            Our engagement started with a single question, agreed in writing: <em>"Should we own
            this in five years?"</em> We committed to a recommendation, not a third deck of options.
          </p>
        </div>
        <div className="fe-col">
          <h4>Action</h4>
          <p>
            We re-cut the division's economics on a clean stand-alone basis, stripped out the
            shared-services subsidy, and modeled the stranded cost the parent would inherit on
            day one. The recommendation was unambiguous: divest within the current capital cycle.
          </p>
          <p>
            Perimeter, structure, and TSA pricing followed – work usually deferred to bankers and
            almost always under-sold. We then sat opposite three financial buyers and one strategic,
            holding the operating narrative steady through 1,400 diligence requests.
          </p>
        </div>
      </div>

      <div className="fe-outcomes">
        <div className="stat">
          <div className="csa-metric csa-metric--lg">1.4×</div>
          <div className="csa-caption" style={{ marginTop: 4 }}>clearing value</div>
          <div className="lbl" style={{ marginTop: 8 }}>Multiple to estimate</div>
          <div className="desc">Closing value relative to our pre-process clearing estimate.</div>
        </div>
        <div className="stat">
          <div className="csa-metric csa-metric--lg">$410M</div>
          <div className="csa-caption" style={{ marginTop: 4 }}>transaction value</div>
          <div className="lbl" style={{ marginTop: 8 }}>Enterprise value</div>
          <div className="desc">Closed enterprise value, all-cash structure.</div>
        </div>
        <div className="stat">
          <div className="n">60<span className="unit">%</span></div>
          <div className="lbl">Stranded cost</div>
          <div className="desc">Versus the parent's planning case – a function of TSA discipline.</div>
        </div>
      </div>
    </div>
  );
}

function Engagements() {
  const [ref, visible] = useReveal();
  const others = [
    {
      sector: 'Services · Recapitalization',
      cover: '#185FA5',
      title: 'A minority recap that aligned founder and growth incentives',
      summary: 'Structured a partial liquidity event preserving operating control while resetting the capital base for the next decade.',
      meta: ['6-month engagement', '2023'],
    },
    {
      sector: 'Healthcare · Acquisition',
      cover: '#0C447C',
      title: 'Quality-of-earnings work that re-priced a deal mid-process',
      summary: 'Identified a $14M run-rate gap between the seller narrative and the operating reality, re-anchored value, and held the deal together.',
      meta: ['4-month engagement', '2024'],
    },
    {
      sector: 'Industrials · Board advisory',
      cover: '#185FA5',
      title: "A succession plan that survived the founder's exit",
      summary: 'Worked with the board through CEO transition: candidate criteria, sequencing, and the first 200 days of governance discipline.',
      meta: ['12-month engagement', '2022'],
    },
  ];

  return (
    <section ref={ref} className={`section section-reveal${visible ? ' is-visible' : ''}`} id="engagements">
      <div className="container">
        <div className="section-eyebrow">Selected engagements</div>
        <h2 className="section-head">Pattern recognition from prior cycles.</h2>
        <div className="mint-rule-sm"></div>
        <p className="section-lede">
          A small sample of recent work, sanitized for confidentiality. Engagements are accepted
          selectively – typically three to five active mandates at any time.
        </p>

        <FeaturedEngagement />

        <div className="subsection-head">Other recent work</div>

        <div className="engagements engagements--three" style={{ marginTop: 32 }}>
          {others.map(e => (
            <article className="engagement static" key={e.title}>
              <div className="cover" style={{ background: e.cover }}>
                <BarsMotif className="bars" style={{ width: 420, height: '100%', position: 'absolute', right: 0, top: 0 }} opacity={0.24} />
                <div className="sector">{e.sector}</div>
              </div>
              <div className="body">
                <h3>{e.title}</h3>
                <p className="summary">{e.summary}</p>
                <div className="meta">
                  <span>{e.meta[0]}</span><span className="dot"></span><span>{e.meta[1]}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Principal() {
  const [ref, visible] = useReveal();
  return (
    <section ref={ref} className={`section alt section-reveal${visible ? ' is-visible' : ''}`} id="principal">
      <div className="container">
        <div className="principal">
          <div className="portrait-frame">
            <div className="portrait">
              <img src="assets/chris-cowles.jpg" alt="Chris Cowles" className="portrait-photo" />
            </div>
          </div>
          <div>
            <div className="section-eyebrow">Principal</div>
            <h2 className="name">Chris Cowles</h2>
            <div className="mint-rule-sm"></div>
            <p className="section-lede" style={{ marginTop: 24 }}>
              Twenty-six years as a CFO across industrials and middle-market services.
              Three years as principal at Cowles Strategic Advisory – counseling executives
              and boards through the decisions that shape the next decade of their enterprise.
            </p>
            <p className="section-lede">
              Cowles is a sole proprietorship by design. Every engagement is led personally –
              there is no team behind the curtain, and the answer you receive is the one I will
              defend in front of your board.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [ref, visible] = useReveal();
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '', email: '', org: '', situation: 'Considering an acquisition', message: ''
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <section ref={ref} className={`contact-section section-reveal${visible ? ' is-visible' : ''}`} id="contact">
      <div className="container">
        <div className="contact-grid">
          <div>
            <div className="section-eyebrow">Direct</div>
            <h2 className="section-head" style={{ maxWidth: '20ch' }}>
              Tell us where you are. We'll tell you whether we can help.
            </h2>
            <div className="mint-rule-sm"></div>
            <p className="section-lede" style={{ marginTop: 24 }}>
              A first call is 45 minutes. We use the time to define the question
              you're actually trying to answer – and to be honest with you about whether
              an engagement here is the right next step.
            </p>
            <div style={{
              marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--csa-rule)',
              fontFamily: 'var(--csa-sans)', color: 'var(--csa-ink)'
            }}>
              <div style={{
                fontFamily: 'var(--csa-mono)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                color: 'var(--csa-blue)', marginBottom: 12
              }}>
                Or connect directly
              </div>
              <div style={{ fontSize: 17, lineHeight: 1.7 }}>
                <a href="mailto:chris@cowlesadvisory.com" style={{ color: 'var(--csa-navy)', borderBottom: '1px solid var(--csa-mint)' }}>
                  chris@cowlesadvisory.com
                </a><br />
                By appointment · Cheshire, CT
              </div>
            </div>
          </div>

          <div className="form">
            {submitted ? (
              <div className="success">
                <h3>Thank you. Your message is with us.</h3>
                <p>
                  Chris will be in touch within one business day to confirm a call.
                  All correspondence with Cowles is treated as confidential by default.
                </p>
                <div style={{ marginTop: 18 }}>
                  <Button variant="text" onClick={() => { setSubmitted(false); scrollToSection('top'); }}>
                    Return to the top →
                  </Button>
                </div>
              </div>
            ) : (
              <>
                <div className="form-note">All inquiries treated as privileged. Response within one business day.</div>
                <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
                  <Field label="Full name" value={form.name} onChange={set('name')} required />
                  <Field label="Email" type="email" value={form.email} onChange={set('email')} required />
                  <Field label="Organization" value={form.org} onChange={set('org')} />
                  <Field label="What kind of situation are you in?" as="select" value={form.situation} onChange={set('situation')}>
                    <option>Considering an acquisition</option>
                    <option>Considering a divestiture</option>
                    <option>Board / governance question</option>
                    <option>Quality-of-earnings / due diligence</option>
                    <option>General strategic counsel</option>
                  </Field>
                  <Field
                    label="How can we help?"
                    as="textarea"
                    value={form.message}
                    onChange={set('message')}
                    placeholder="A few sentences on where you are and what you're trying to decide."
                    required
                  />
                  <div style={{ marginTop: 8 }}>
                    <Button variant="secondary" type="submit">Send the message</Button>
                  </div>
                  <div className="help" style={{ marginTop: 14 }}>
                    By submitting, you acknowledge this is an initial inquiry – no engagement
                    is established until both parties sign a written scope.
                  </div>
                </form>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <a href="#main" className="skip-link">Skip to main content</a>
      <Header />
      <main id="main">
        <Hero />
        <Practice />
        <Approach />
        <Engagements />
        <Principal />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);
if (window.lucide) window.lucide.createIcons();