import type { Dictionary } from "@/app/[lang]/dictionaries";
import { Container } from "@/components/ui/container";
import { SectionHead } from "@/components/ui/section-head";

// Split a "Tag: Title" dict string into the colored mod-tag label and the h3.
const splitTitle = (s: string): [string, string] => {
  const i = s.indexOf(":");
  if (i === -1) return ["", s.trim()];
  return [s.slice(0, i).trim(), s.slice(i + 1).trim()];
};

export const Features = ({ dict }: { dict: Dictionary["modules"] }) => {
  const [kwTag, kwTitle] = splitTitle(dict.keywords.title);
  const [blTag, blTitle] = splitTitle(dict.backlink.title);
  const [coTag, coTitle] = splitTitle(dict.content.title);

  return (
    <section id="features" className="py-10 md:py-20 lg:py-32">
      <Container>
        <SectionHead
          eyebrow="Modules"
          title={dict.title}
          titleGrad={dict.title_grad}
          subtitle={dict.subtitle}
        />

        <div className="mod-grid">
          {/* Keywords */}
          <div className="mod">
            <div className="mod-art">
              <div className="metric-mini" style={{ marginBottom: 8 }}>
                <div className="m">
                  <b className="text-gradient-brand">2.4M</b>
                  <span>Volume</span>
                </div>
                <div className="m">
                  <b>34</b>
                  <span>KD</span>
                </div>
                <div className="m">
                  <b>$3.10</b>
                  <span>CPC</span>
                </div>
              </div>
              <div className="chip-line">
                seo mcp tool <span className="right">pos. 12 · 880/mo</span>
              </div>
              <div className="chip-line">
                seo mcp server <span className="right">pos. 14 · 320/mo</span>
              </div>
              <div className="chip-line" style={{ marginBottom: 0 }}>
                seo api for agents{" "}
                <span className="right">pos. 18 · 210/mo</span>
              </div>
            </div>
            <span className="mod-tag">
              <span
                className="sw"
                style={{ background: "var(--brand-blue)" }}
              />
              {kwTag}
            </span>
            <h3>{kwTitle}</h3>
            <p>{dict.keywords.description}</p>
          </div>

          {/* Backlink */}
          <div className="mod">
            <div className="mod-art">
              <div className="chip-line">
                Fetching sources
                <span className="right">
                  <span className="dot-ok">✓</span>
                </span>
              </div>
              <div className="chip-line">
                Processing profile
                <span className="right">
                  <span className="dot-ok">✓</span>
                </span>
              </div>
              <div className="chip-line">
                Scoring DA / dofollow
                <span className="right">
                  <span className="dot-ok">✓</span>
                </span>
              </div>
              <div className="chip-line" style={{ marginBottom: 0 }}>
                Curating ~380 sources
                <span
                  className="right"
                  style={{ color: "var(--brand-yellow)" }}
                >
                  ●
                </span>
              </div>
            </div>
            <span className="mod-tag">
              <span
                className="sw"
                style={{ background: "var(--brand-orange)" }}
              />
              {blTag}
            </span>
            <h3>{blTitle}</h3>
            <p>{dict.backlink.description}</p>
          </div>

          {/* Content */}
          <div className="mod">
            <div className="mod-art">
              <div className="kanban">
                <div className="col">
                  <div className="t">Idea</div>
                  <div className="card" />
                  <div className="card" />
                </div>
                <div className="col">
                  <div className="t">Brief</div>
                  <div className="card g" />
                  <div className="card" />
                </div>
                <div className="col">
                  <div className="t">Writing</div>
                  <div className="card" />
                </div>
                <div className="col">
                  <div className="t">Done</div>
                  <div className="card g" />
                  <div className="card" />
                </div>
              </div>
            </div>
            <span className="mod-tag">
              <span
                className="sw"
                style={{ background: "var(--brand-yellow)" }}
              />
              {coTag}
            </span>
            <h3>{coTitle}</h3>
            <p>{dict.content.description}</p>
          </div>
        </div>
      </Container>
    </section>
  );
};